Head-Banging CSS Bugs
Listen! You hear that? It’s the faint *thud thud thud* of a web developer banging their head against a desk trying to solve the simplest of CSS bugs that they squashed 3 months ago but now can’t remember how!
Below is a list of the most common CSS problems I’m asked to fixed over and over again. Keep it in your back pocket. Trust me, it will come in handy. Now put the Advil away.
1) Dropdown Menu Behind Flash Element
I know you all have seen this one before- it can take a lot of time to find the solution. You set the z-index on the ul to 99. That doesn’t work, you set the z-index on the li to 99 (though, sometimes this helps if it’s not a flash element that it’s going behind) finally you say f** it, and set the ul z-index to 500 and every other tag in your css file to -90000. But still not dice.
The problem is with the flash movie it self, not the z-index of it either. You need to set the “wmode” of the flash movie to “transparent”.
Depending on how you’re embedding the code there are different ways you can do it. The two most common ways would be:
If you’re using the embed tags add this anywhere in it:
wmode="transparent"
For you swfObject lovers give this a go:
so.addParam("wmode", "transparent");2) Fieldset/Legend IE Background Overflow.. thing
I doubt that is the technical name for this bug, but who cares. It’s a bug and still a problem. What happens is when IE renders the fieldset background it applies it to the legend as well. Yay IE! If you add a padding to the fieldset it gets even worse.
The easiest way to fix this, is to set the position of the fieldset to “relative”, and the position of the legend to “absolute”. This disassociates the legend with the fieldset by removing it from the flow of the document.
This has been my solution:
fieldset { position:relative; padding:10px /*this is optional*/ } label{ position:absolute; top: -10px; /*make this the same as your fieldset padding top- if set */ }
3) Can’t Click Position:Absolute Anchor Tag
Yeah, this is another IE bug- I’m not sure if there is a well documented solution for this one, but this is what’s up.
Lets say you have a “button” that is actually part of a background image. Typically it’s a logo. You have a link positioned absolute inside the container that you want to be able to click. Your code might look something like this:
<h1><a id="homeLink" href="/index.html"></a></h1>
And your CSS along these lines:
#homeLink{ display:block; height:150px; width:150px; position:absolute; top:50px; left 50px; }
I really wish I had a clean solution for this problem. But I don’t, since it’s IE I suppose it doesn’t matter too much. The easiest and dirtiest solution is to add a fake background-image to your style.
#homeLink{ background:url(fake_image.gif); display:block; height:150px; width:150px; position:absolute; top:50px; left 50px; }
That’s quick and easy, with more time, just add REAL transparent .gif and be done with it.
4) Content Flows Past Container
I get this problem a lot, especially when I’m floating a ton of objects on the page. If your content inside its container is all floated, then the container doesn’t know how to size itself. If your container has a width, it needs a float as well. So your solution would be to put a float on it!
#contentContainer{float:left; width:/*whatever your width is*/}
A rule of mine is, if it floats, it needs a width, if it has a width, it needs to float. If adding a float to the object screws up your site big time, you can always cheat by adding this extra tag just before your container’s closing div.
<div style="clear:both"></div>
Of course, giving a class and keeping the style separate is the better option. But you get my point.
February 18, 2009
When you said:
I think what you really meant was this
.clearer{
clear: both;
}
February 18, 2009
Bah, comment box removes tags instead of HTML-encoding them!
February 24, 2009
Head-Banging CSS Bugs…
A list of common CSS issues that every web designer has encountered at one time or another and how to solve them….
February 28, 2009
Regarding the clearing of floats, have you tried the ‘clearfix‘ method? Although it’s pretty old (2004 I think) and there’s a newer version, the old method works just as fine in modern browsers, and it eliminates the need to add <div class=”clear”><> that has no semantic meaning to the HTML.
Just my $0.02
March 28, 2009
I have had all of those problems before. The first one with the flash is a particularly frustrating one.
Also, on the last one, adding an overflow:hidden on the container class works wonders.
March 29, 2009
nice tips, i especially found #2 helpful.
RE: item #1, in most cases wmode opaque is preferable to wmode transparent.
wmode opaque will still fix the stacking order problem, but will not bog down the CPU as much as wmode transparent. mode transparent is also known to trigger other bugs and rendering issues.
March 30, 2009
No no no no – don’t use clearfix anymore OK
The better solution for clearing your floats is to set overflow to hidden. For IE6 you also have to ensure that your container hasLayout (my preferred method is to use zoom: 1 in your IE6 CSS file, equally setting a fixed width or height on the container will work)
April 2, 2009
Hello fellow CSS Guy (I’m often called that same name in my geek circles) I have an easier fix for “4) Content Flows Past Container”. The answer….give the container overflow: auto. I wrote an article about this @ http://www.nealgrosskopf.com/tech/thread.asp?pid=27
November 27, 2009
I agree with the others that the best solutions to the floated element issue is to use overflow:hidden and then add zoom:1 in your ie6-specific stylesheet.
December 10, 2009
WOW!!
overflow is a great method!!
Who posted this method first?
When did this method get popular?
Anyone knows?
December 10, 2009
Sorry, I just saw Neal G’s posted article, thanks Neal G!