So a buddy and I were talking web design over a beer following our band practice.  I brought up an issue that I’d been struggling with yesterday concerning Internet Exploder [Explorer] and how the image alignment wasn’t truly snapping all the way to the right or left.  A small gap was showing up (and showing a portion of the background I had intended to not be visible).  See this example snapshot of a corner image that I’m attempting to align to the left:

Firefox works fine: 

IE pukes up a three-pixel gap:

Jamison mentioned that it’s called the three-pixel bug in IE.  Of course you can just put a style attribute in there like so: 

style="margin-left: -3px;"

…but you also need to put browser case statements into your HTML to test for IE, and in principle you shouldn’t have to do that.  ANNOYING.  Somehow I doubt that we’ll ever see the day when you don’t need to run browser case statements in your source code.  Call me a cynic, but I’ve been doing web development since Microsoft decided to try their hand at web browsing with Internet Explorer version 1 and they’ve been deviating from web standards and norms from day one.  It’s been a persistant issue since the mid-90’s—finding the common denominators between the major players in browsers and coming up with a hack to just make things work.

Which brings up the issue concerning finding balance between a purely style sheet-driven layout and the use of tables.  The purists say “don’t use tables”, but let’s face it—it’s not always practical to take that approach.  The browsers can’t even agree on what is standard for a particular way of measuring height and width.  Example:  IE treats the height and width value as that of the entire window while Firefox treats it as the width and height of the object that the attribute belongs to. 

For an illustration, look at these screen captures, which compare how IE and Firefox in height definition.  The context here for this example is if I decided to give the value height: 100% to the header shown above.  [Firefox] [Internet Explorer]

Of course there are advantages to both perspectives of what the height attribute does in both browsers, but you’re back to performing case statements on browser type.  That’s just not cool.

Instead, I think the folks at the W3C ought to consider refining the standards to include values like this:

object-height: value context
object-width: value context

In this example, value would be the height in pixels, percentage, etc. Context would be specific to either parent-object, window or some other value that might give it a better context. So if you wanted to specify your object to be 100% of the window height, you might put in: object-height: 100% window Or if you only wanted it to extend to 50% of the object to which it is subject to (a parent object), you might put something like object-height: 50% parent-object

Just some thoughts on what I think they need to implement into browser standards.

July 27, 2006, 12:13 pm

Filed under: CSS, Development, HTML

Leave a Comment

You must be logged in to post a comment.