A little while ago, Microsoft let it be known that a beta of Internet Explorer 8 would become available in the first half of 2008. More importantly, the working code has passed the Acid2 test (CSS web standards compatibility), which means, hopefully, I won’t need to code for two browsers, but for one standard in the future.
Almost immediately after completing the theme you see adorning the site currently, I started a new design for WordPress in Photoshop. All my previous designs were hand-drawn, then hacked into XHTML + CSS. This time around, I decided to do the mock-up in Photoshop and perhaps save myself some time and effort. That was almost 3 months ago.
I was working hard at it and making good progress until about a month ago. At that time, I’d done up most of the foundation for the site and needed to delve into the polishing – writing elements styling, little minute details, and so on. I predicted that I would finish the new design within a month. Maybe it was the thought of writing up CSS for every blockquote, list, link, and header that really put a damper on things. Or perhaps it was that I wasn’t completely satisfied with the design. I didn’t want to make something that I wasn’t completely happy with.
This past week, I regained some passion for the project again. I threw out a bunch of elements of the design and hacked away again in Photoshop. I believe I have come up with something I’m happy with. That’s not to say, I’ve come across my final design – I’m sure as I code it, I’ll think of new ideas or areas to improve. In the meantime, I really want to do some work on the current design. The instant the design was completed in XHTML + CSS, I realized I wasn’t pleased with some parts, specifically the header area and the sidebar. That’s the problem when all you’ve got is a crappy hand drawing I guess. I plan on ameliorating some of those concerns this weekend. It’s also about time I put more focus on the navigation bar at the top (I bet maybe 5 people, ever, have noticed that it exists) and implement the About and Contact pages. I’m also going to promote the feed in a more prominent location. I just put my feed through Feedburner this past week and I couldn’t believe I somehow have 20+ subscribers with that feed link hidden away below the fold…
Well, the important thing at this stage is that I’m once more interested in the work and am ready to dig down into it again.
And this morning it hit me in the face. It’s been staring at me this whole time, but for some reason I hadn’t thought of it. All along, I had tried to use the background-color property, with a different color for each div. Instead, I’ve now created a wrapper div, assigned it a background-image, that mimics the colors for the background of the original two divs. Then place two divs inside the wrapper div, with one floated to the left and the other to the right (or something else, depending on how many columns you need). As the internal divs expand, it will push the wrapper div, and hence create the ‘illusion’ that the two divs are expanding at the same rate, regardless if one is actually longer than the other.
I’ve created a couple simple diagrams to demonstrate what I was attempting to do before and what the solution I presented above does.
Here I realized that I could create a wrapper div (shown outlined in red) that contained the two divs I wanted to be the same height. Setting the background-image property on the wrapper div to the appropriate image, I’m able to create the illusion of two equally sized divs.
Of course, there are also limitations to this solution. Since you must specify a background-image, it becomes very difficult to use with non-fixed width designs. Additionally, you’ll need to use an image, which mean some extra data to the downloaded (should be fairly minimal, assuming you just create a slice and repeat it for the length of the div) and an extra HTTP request. Obviously, this only works if you’re okay with creating the ‘illusion’ that the div heights are the same. In reality, it’s the wrapper class with the background-image that does all the work. The divs themselves will only expand to fit the content within them.
You may have noticed in your web design process that element spacing isnâ€™t the same between Internet Explorer and the Gecko engine-powered browsers (Netscape, Mozilla, Firefox, etc). Itâ€™s been the cause of so many wrongly positioned elements during my page design process. At first, I could never figure out why Firefox was working fine, but Internet Explorer just really wanted to push a sidebar below the rest of the page content. I knew it had something to do with the margins and the elements encroaching on each otherâ€™s territory; however, it wasnâ€™t until a couple weeks ago that I (think) really discovered the cause.
It would seem as though Internet Explorerâ€™s measurement for margin spacing is not equivalent to the Gecko engineâ€™s interpretation. Internet Explorer tends to space things out quite a bit more than the Gecko engine. As a result, if youâ€™ve just got enough room to fit in â€˜20pxâ€™ of margin in Firefox, youâ€™ll probably find that it messes up in Internet Explorer. Thatâ€™s not so good. If you want those margins to look right in Internet Explorer, youâ€™ll probably end up with a little funky looking thing in Firefox and the rest of the browsers out there. To get around this little, but annoying problem, Iâ€™ve been using a pretty hacky fix.
Padding spacing seems to be measured the same by Internet Explorer as the other browsers. As a result, lining things up for me has been requiring another element (say a div layer) that has as its padding attribute what the inner element wouldâ€™ve needed as a margin. By avoiding those margins, you can be pretty much assured that things will line up properly in all the browsers. (Okay, I lied, I havenâ€™t tested this in Safari, but if anyone would like to send me a Mac, Iâ€™ll gladly look into it. 😉 ) So the only inconvenience is really that everything will be nested one div deeper. Thatâ€™s not too bad.
If anyone can point out what Iâ€™m doing wrong to solve this â€˜problemâ€™ without doing what Iâ€™m doing, feel free to drop me a line. Iâ€™d really appreciate it if thereâ€™s an easier way of getting around it.
I think I’ve finally nailed down when to use CSS IDs and classes. IDs are for when you need to identify a unique object that exists only once in your design. Classes are for styling multiple instances of something. By fixing that one little problem, I’ve decreased my number of w3c validation errors from 55 or so down to 24.
[tags]css, id, class[/tags]