Web Tricks: 2008 Archives

I know I put down IE a lot on my site. As a web developer, it has made my life a living hell for the last 4 years. Some people prefer to point the finger at Firefox for starting all these compatibility issues, but for the most part it is IE that deviates from CSS specifications (and sometimes ECMAScript specs too!).

However there is one issue where Firefox is wrong. Dead wrong. So painfully wrong that I have been complaining about it for years. See, Firefox ignores CSS spec on pixel font sizes. Its reasoning is that people have misused pixel font sizes all over the web and wouldn't it be nice if old granny's could read those pages anyway? But this kind of thinking is what put IE in the mess that it's in now. You can't just ignore spec because people made their pages wrong. They are WRONG.

The reason why pixel fonts are and should be absolute is because there are times when you really need text to be absolute. When it's aligning with an image, or needs to fit inside a box. Scaling it so the user can read it may make them happier, but it makes my page look really ugly and can break a lot of other elements depending on that one to stay in its own damn area. When we say we want a box to be 300 pixels wide, you don't go scaling that, now do you, Firefox? If we wanted it scaled, we would have used "em" or percent. Don't make us use a text graphic just to force the size!

And apparently this will now be causing grief to more developers thanks to the new all-in-one advertising tool from google's adsense:
http://groups.google.com/group/adsense-help-optimization/browse_thread/thread/d905b7a9b02dcf23/87844a19ac8320b1

You might say that google could make their banners scalable to overcome this, but banners have traditionally been of a fixed size and few websites can accommodate scaling sizes. The fact is, we as designers should be able to say that we want our text in some circumstances to be *just the right size*. And I am pissed off that Firefox won't let me do it. And Safari. Opera, thank god you decided to just add Zoom and skip the whole font-sizing thing. You are awesome. :)

So I just ran into a really annoying float bug in Firefox (ironically discovered when trying to fix the header navigation of the Drupal SpreadFirefox theme). When you do a double-float right, or a float right inside an absolutely positioned div, the top-most container becomes a screen-filling monstrosity.

See the following:

<style type="text/css">  
#floated {position:relative;float:right;
              color:black;background:#999;border:1px solid black;opacity:0.5}
#floated div {position:relative;float:right;
              border:1px solid black;padding:2px;margin:.5em;}
</style>
<div id="floated">
<div>test 1</div>
<div>test 2</div>
</div>

In Safari, test 1 and test 2 float right, with the containing div surrounding them in a nice discrete little box. In Firefox, the containing div fills the whole width of the page.

Note that when test 1 and test 2 float left, it works as expected in Firefox - regardless of the containing div's float or absolute positioning:

But unfortunately this would reverse the tabs in Drupal SpreadFirefox without other code-level alterations.