using a modem, or just want to change this site's design? try these...
website design techniques » August 2004: “Coding Cross-Browser Websites”
most recent project
CORE BT Application Graphical User Interface (GUI) and Advanced CSS Design. Requirements included outstanding design and flexible advanced XHTML/CSS
web site design tips
This month’s website design tip is on the topic of vector vs. raster graphics.
web site design techniques
This month’s website design technique demonstrates a wacky way to fake a resizable background image in a DIV.
Cross Your Browser & Hope To Die
Let’s dive into some real-world examples. This website is as good a place as any to start. Lists are always the biggest pain in the ass for me. Believe me when I tell you I have some style nightmares involving lists...
So when a bug crept into my Site Map on this site it was no surprise. But still, no one wants to see it happen because it can mean from 5 minutes to 5 days of extra time trying to conquer the little bugger, depending on how anal you are about figuring things out, that is.
Holly Hack Saves Man’s Butt. News At 11.
The site map on this website is supposed to look like the image below. Notice the even spacing between elements top-bottom-wise, and also that the bullet is where it belongs. This is how it rendered in FireFox before I moved on to the hacking IE step of my coding routine.
When I viewed it in IE6 I saw small parts of Hell breaking loose as shown in the second image. I recognized the drifting bullet as something I’d seen before.
I applied a couple hacks to the most likely culprit, which in this case is the <LI> (because its background bullet was acting funky). I used a combination hack: “* html” and the Holly Hack (height: 1%). The CSS looks like this:
* html #content-right #SiteMapList li { height: 1% }
The “* html” makes the rule only apply itself to IE browsers. The Holly Hack “height: 1%” fixes another IE bug that I just happened to remember manifested itself in this way sometimes, making list item bullets indent further in this pattern, or rather the List Items were negatively indenting I suppose I should say.
This hack caused the bullets to, as the Beatles once sang, “get back where they once belong.” But there was still a silly spacing issue. In the second example above there is undesired space above the “privacy” link and above the “resources” link. I played with some padding and margin but quickly realized there was something else even wackier than IE’s usual spacing issues going on. It became apparent that the issue was similar to the previous bullet issue in that the places where it manifested itself seemed to coincide. I applied the same combo on a whim to the second level <UL> and it immediately fixed the issue.