Tuesday, April 12, 2005

IE position relative - absolut container bug

Another IE Bug, or better, one that is old but still problematic..
Today i built a side where i needed one element to be positioned absolute.. so i made a structure like this: (I have changed to round brackets)


(div class="headline")(/div)
(div class="container")
(div class="logo")(/div)
(div class="content")
content
(/div)
(/div)


Then i have to add the follwing css attributes:
.container {
position: relative;
}
.logo {
position: abolute;
}
.content {
margin: 0 50px;
}

Actually there where more, but i want to keep this short.
On Firefox everythink looks great, but when i looked in IE i got a different view.
IE positioned the logo not at the left border, the one of container, it positioned it at the left border of content... it added the whole 50px margin..

Workaround:
The problem is, that the .container has no content in it, only the div .content, so IE just ignored it. You have to add content to it. In my case, i just positioned headline into the container, since container has no other attributes than position relative, it did not make any difference and volia everythink works perfect.

No comments: