Torn Paper

Something I forgot to mention in the last post was that I swapped out the triangle pattern graphic that I used for the top and bottom edges of the content block with a graphic of torn paper. Along with swapping the image out, I improved the relative position. Before doing so I had 2 blocks of CSS code to manage the height of the content background. In those blocks of code I had a specific min-height attribute assigned.

The problem with the min-height was that if ever there was more content, extra text, or anything; the content would exist outside of the background and push the edge graphic (torn paper) down. effectively breaking the aesthetic of the site. I needed to find a way to make the content block scale automatically. I found out that by using the overflow property, and setting it to auto, with CSS, the block would scale on it's own.

This allowed me to remove the second chunk of CSS code.

The next challenge popped up when the overvflow property of the new content class selector caused the contact page to display a small scrollbar within the div. I dove back into the markup to try and identify the issue. My best guess had to do with the embedded Google map. I cleaned up some unecessary code and that seemed to fix it. I still don't know exactly why it happened, but I'm glad it's gone.

Now. The next problem I have to address deals with browser compatibilty.

Most web designers will agree that Microsfot Internet Explorer is considered the most archaic browser of the bunch.  It is always last to adopt new standards and for this reason, designers consider it the "lowest common denominator." As such, any website under development, needs to be previewed in Internet Explorer often.

I don't do this nearly enough. Instead, getting tunnel vision and forgetting all about it while I work out some new challenge. So today I checked the latest build in Internet Explorer and I've noticed a bunch of issues. First of all. The CSS3 animated elements don't work at all. I could go back and use JQuery to fix it, but I won't. They still have rollover swaps, just no fluid transitions. I'll consider that a win. Second, rounded corners on some boxes don't show up... I'm guessint that's also a CSS3 thing. Again, I'm ok with it as it's not a deal breaker.

The real issue is that the quickform (contact form) in the footer no longer has a placeholder. Anyone looking at this with Internet Explorer will not understand what each field expects. They might be able to figure it out, but it's not a good habit to assume these things. So I'm going to find a JQuery solution to this. I need to generate a dynamic placeholder that dissapears when focus is placed on the input. If I can do this then everything should work fine.

I added some web graphics to the services page. Next I will populate the portfolio section with a lightbox and then move onto writing copy for the categories.