?

Log in

No account? Create an account
 

Floating content - Web Developer

About Floating content

Previous Entry Floating content Feb. 7th, 2005 @ 12:29 pm Next Entry
I came across this site ( http://www.w3.org/QA/Tips/color ) that has content that floats on the right hand side of the page when viewed in netscape, but in IE it floats at the top right. (In netscape, the content will float on the same location regardless of where in the document a browser is.) I'm looking for a way to replicate this behavior in netscape and IE, I can't get the CSS right. Any ideas?
Leave a comment
From:xiota
Date:February 7th, 2005 07:10 pm (UTC)
(Link)
I did this for my website: http://www.infinitycomputing.net (but then decided in IE to make it non-floating by default, more on this in a moment)

It involves a bit of a 'hack' in IE

#nav
{
background-color: #DEDEBB;
position: absolute;
left:0;
top:0;

width: 12em;
height: 100%;

border-right: 1px black solid;
border-bottom: 1px black solid;
padding: 1em;
margin: 0;
}
body > #nav
{
position: fixed;
}

IE doesn't recognize the ">" denoter that would signify "direct descendent", so that makes it work in both browsers.

What some sites do instead is:

< ! --[if IE] --

That directive, but I think that's messy.

Regardless, I decided to have php detect IE and then throw in the normal look to my site because the positioning with IE is different with a static div than Gecko browsers. That is, in IE your positions of objects are relative to the page end (ignoring the static elemenent, because it's position absolute) and in Gecko browsers it's relative to the object, cause it's still "there" (non-absolute).

Hope this helps. If not:

http://www.google.com/search?hl=en&q=position+fixed+css&btnG=Google+Search
(Leave a comment)
Top of Page Powered by LiveJournal.com