CSS: Works in IE but not Firefox?!

So you've put together a template that looks great in IE. But when you check it out in Firefox it's a mess! Are these bugs? Purists will tell you that the Firefox is reading the CSS right... it's your IE that is wrong. Whatever. The point is you need a fix. But before going to a lot of work, make sure you have the latest Firefox installed as previous version have bugs you needn't waste time trying to work around.

So here are the big three noob errors:

In IE it looks like this:	But in FF it looks like this:

<div style="text-align:center; border: 2px solid black;">
<div style="border: 2px solid red;"></div>
</div>

Solution: IE has applied the text-align property to alignment of the inside div however FF interprets CSS strictly: you need to align centrally using auto side margins.

<div style="text-align:center; border: 2px solid black;">
<div style="margin-right:auto; margin-left:auto; border: 2px solid red;"></div>
</div>

In IE it looks like this:	But in FF it looks like this:

This problem is well addressed by Holly 'n John here. Once again, IE is doing it "wrong" but it takes a huge amount of effort to do what you want in the "right" way. What's you're looking for is the Holly hack: application of :after properties to the containing div:

.blackbox:after { 
                  content: "."; 
                  display: block; 
                  height: 0; 
                  clear: both; 
                  visibility: hidden; 
 }
 

There's some further tweaking required to look nice on Mac IE so read details of the entire hack.

In IE it looks like this:	But in FF it's like this:
	?

Once again, Firefox is right. The problem is that your div probably has no content (as its contents have been "floated away") and so it has zero height thus no background showing.

You can fix this by actually specifying the height, or removing the float properties of the divs within this container or applying the holly hack explained above to stretch the containing box. If that doesn't work, try moving the relevant style definitions to the bottom of your style sheet as some of your other code may be overriding it. The DOM inspector (see below) makes finding this much easier.

Still stuck? You should do this:

• Run your page through the WC3 Validator and fix ALL those stupid parse errors and the like no matter how benign they may seem. I couldn't get borders to show up on one div and it turned out that using HTML between the <STYLE> tags was messing it up. The validator spotted this.
• Install the Mozilla DOM inspector (just reinstall Firefox selecting "Custom Installation" and "Developer Tools"). This takes 2 minutes and is worth every second. It makes it easy to see what properties are applied to elements of your page (more here).
• And while you're at it, now is as good a time as any to figure out the difference between CLASS & ID elements.
• If you've gotten this far then of course you should thoroughly read Position Is Everything.
• Still hungry? More links listed here - by the guy who brought you the cool fonts-resize code that I use.

With all that said, you are probably looking at my page from a browser I haven't tested this with and it looks like crap. If so, your snarky comments are welcome.

Labels: tech

Tuesday, May 23, 2006