IE6 and absolute positions

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Steffan A. Cline - 30 Aug 2007 03:35 GMT

I posted some time ago about a particular layout I was trying to achieve. I
was told that I needed to strip the page of all the non essentials to make
sure that the page was easily accessible. The idea was to have individual
fixed positions for components on the page. In Safari, Firefox and IE7 the
page renders as intended. IE6 crams it all up at the top. Anyone have any
advice on how to fix it?

http://new.saguarogold.net/menu.html

Thanks

Steffan

Reply to this Message

John Hosking - 30 Aug 2007 12:58 GMT

> I posted some time ago about a particular layout I was trying to achieve. I
> was told that I needed to strip the page of all the non essentials to make
[quoted text clipped - 4 lines]
>
> http://new.saguarogold.net/menu.html

I have what seems to be a workaround, although you may not like it.

Get rid of the <div id="container">, since in the simplified example, at
least, you don't need it. You've got body. To the body rule, add
margin:0; and copy the border:2px solid #c3daf9; from #container (the
ruleset for which you can delete). Test it and see.

I can't give a solid explanation of why this works, but I strongly
suspect the position:absolute of #container (containing the other
position:absolutes). Nastiness like this is why I almost never position
absolutely.

Beyond that, some misc. notes:

Step one is always validate. You got a stray /> in your HTML.

Your CSS shows a common error in selector writing, namely the assumed
inheritance of ancestors. I'm looking, for example, at your rule

#status #localtime,#servertime {}

which selects all #localtime elements (should be only one on the page)
which are descendents of #status elements (should be only one) as well
as all #servertime elements (should be only one) anywhere on the page.
Do you see? The specificity you applied to the #localtime is not applied
to the #servertime selector. They almost certainly ought to be the same.
In this case (and because they're IDs anyway) it doesn't make any
difference, but it's something to watch out for in the future.

HTH

Signature

John
Pondering the value of the UIP: http://improve-usenet.org/

Reply to this Message

Steffan A. Cline - 30 Aug 2007 14:42 GMT

>> I posted some time ago about a particular layout I was trying to achieve. I
>> was told that I needed to strip the page of all the non essentials to make
[quoted text clipped - 35 lines]
>
> HTH

I'll try placing the menu bar back into the mix and see if it will work
without the container. I used the menus from http://www.ExtJS.com and their
example had it in there to that was the way I did it.

Any other way to make it work with container back in there? If you use the
same link, you'll see I commented out this so if anyone were to work on it
they could copy and uncomment. I noticed a few other things further down
too. I had components of #container that were not bound to it. For example,
I had the #status there as #container #status {} but then there were
descendents of #status that did not begin with #container example:
#container #status #servertime {}.

I have an iframe in the middle of this all but it wont show either. And the
#content div with the iframe in it has no border either.

Still trying...

Any other ideas? You've been a help so far.

Thanks

Steffan

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

IE6 and absolute positions