Ever try to give a div an absolute position in IE6 and find out it’s not doing anything your CSS is telling it to do? I found out why!

Yesterday I was working on a really advanced CSS layout for a client and there were 2 elements that needed to be absolute positioned. I did it as usual, expecting the outcome to be what it should be, except IE6 was positioning it in the bottom left instead of bottom right and without any of the layout I had on the div! I spent 3 hours trying different things just to have it presentable for a meeting, but I still didn’t have an answer to my dilemma. Last night I spent another 2 hours on this and finally came up with an answer. For whatever reason, IE6 needs the div to be nested into another div. Only then can you absolute position the inner div… sometimes! If I moved my div to some parts of the xhtml it worked as intended, but in certain places it was inheriting something from a div around it (NOT inside it). I couldn’t find any reasonable explanation for why it worked in some areas and not others, but I did realize that whatever it was, the outer div absorbed it and allowed the inner div to be positioned correctly. In a perfect world you can wrap things in one div, but the existence of IE means this is not a perfect world. When in doubt‚ wrap it!

This entry was posted on Saturday, February 9th, 2008 at 7:49 pm by jshroyer and is filed under Templates, XHTML+CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.