Saturday, September 02, 2006

Firefox CSS Work Around

We all love firefox, right? If your answer to that question is anything other than yes, then please let the door hit you in the ass on your way offsite. Unfortunately I discovered a CSS bug in firefox 1.0, and 1.5, in both the Linux and Mac versions (I assume it is also a bug in Windows firefox, but havn't had the software or desire to test it). Basically the problem is that sometimes (havn't been able to work out the exact circumstances of the bug) if you create a div with a width of 100%, the div itself actually is 100% wide, but all the attributes of the div only span as far as the content of the div. For example, lets say I created a title bar for a page like so:

The background color and bottom border would only be as wide as the text "Hello World" in the div. Kind of a pain. Well as a simple work around to this problem you can add a span or a div with a blank space in it floating on the opposite side of the div. So for example, the above div has float left, so to rectify the problem we could do this:

This CSS bug doesn't happen with IE or Safari - I know, it doesn't make sense, a CSS error in firefox that doesn't happen in IE, but its true, I swear - and hopefully the crack firefox crew will get on fixing it and you won't have to use this fix sometime in the very near future.

Links

About Me

Born and raised in Western New York, I eventually left my small town life to pursue a grand life in the city of Chicago. While attending school at the University of Chicago I started a web-development firm with my friend Sean Schulte (seancode.blogspot.com). This was fun and lasted about a year. I graduated from the University of Chicago in 2006 with a degree in philosophy, and am currently employed as a Web Developer and Network Administrator with a Chicago based .com start up.