I have a div that is positioned absolute at 88px from the top. In both IE6 and IE7 this comes out decently. However, in FF the div is being put at the top of the page. You can take a look at this here: http://www.dvolve.org/ktt/ Any pointers on what's going on here? -DeV
Edit your CSS to actually have 88px rather than just 88. Validating your code in the W3C CSS Validator may help you find such errors as the eye tends to miss them.
Thanks, that solved the problem! However, now it looks as if the padding or border of the div is implemented differently in FF, seeing as how my menu and scrollbar are all obscured by it a bit. Any quick idea on that too?
Every browser has its own default for padding and margins on various elements. Most of us control freaks make everyone start at ZERO with a "CSS reset" such as this: * { margin: 0; padding: 0; } img { border: 0; } and whatever else you want. The * means "all elements" and these declarations should be the first thing in the CSS sheet, because sheets cascade and we want everyone to START at 0. Notice also that when you are absolutely positioning things, they position relative to their nearest positioned parent, not always the body/page. If the parent doesn't have a position, then the body should be the default. However, I've noticed that IE doesn't quite get that right. If I have <div id="header"> <h1>stuff stuff stuff <span></span></h1> </div> And if header is position: relative (so it has a position now), and nothing on the h1, and make the child span position: absolute, modern browsers will correctly see that while the parent, h1, has no position, its parent the div called "header" DOES, and uses that as a reference. IE, or at least IE6, seems to look only at the direct parent and not grandparents, and so then may use the body instead as the reference. This might have to do with Haslayout or something too though. So, always declare a position on the parent whom you want the reference to be!