NS6/7 and absolute positioning

[madmatt69]

Hi everyone. I know that this has been discussed many times, but I'm just baffled by this code! I have the following DIV:

<div id="services" style="position:absolute; left:114px; top:101px; z-index:1;" class="nav">

Which renders right where it's supposed to, in IE. In NS6, 7, and Opera, it renders a few pixels further down than it's supposed to.

Do I need to define something to do with padding, etc? It's so frustrating! :)

Thanks for any help!

[BlobFisk]

Have you got the page margins set to 0px?

body {
margin: 0px;
}

[madmatt69]

Yep! This is what I have-

body{
margin: 0px 0px 0px 0px;
}

[tedster]

Are you trying to line up two layers of graphics?

I ran into this one time when I needed a perfect match-up between a jpg and an overlying gif with transparency. The way I finally got cross-browser results was to absolutely position BOTH divs and use different z-indexes.

Then the variations in positioning were applied equally to both divs and they always lined up with each other. Although they were in slightly different positions relative to the surrounding body copy, it was not noticeable.

Never did figure out exactly what was going on.

[madmatt69]

Not exactly. There is an image in the div, but it's very small...doesn't effect the size. It's part of a naviation system, and the navigation is all text.

All the layers are absolutely positioned.

I just can't figure it out..it makes no sense. The code validates and everything.

[tedster]

> the navigation is all text

Maybe that's the issue? Different browsers have subtle differences in the size of fonts, even when css declares font-size pixels. Line-height is also prone to cross-browser variations.

[madmatt69]

Hmm...

The text all appears the same, same size and all. The text that is in the layer is defined in a stylesheet as:

nav {
color: #FFF;
font: 10px Verdana, Helvetica, sans-serif;
}

I wonder, could it simply be the z-index order? I do have a number of layers, but they're all on their own z-index. I know that it appeared correctly at some point, but I made a bunch of changes, and since then the positioning of that one layer has been just a little bit off..And I have no idea what change could have triggered that. I'll post the url of a test page, so you can see it -
[itms.de...]
The layers can be viewed by clicking on "Profil" "Presse" or "Services".

Thanks again for the suggestions! Hopefully we'll figure this out :)

[madcat]

it renders a few pixels further down than it's supposed to.

Just a word of caution, it might save you alot of aggro by going into each project with the understanding that pixel perfect precision across browsers isn't realistic - not in the CSS game.

Best,
Madcat

(edited by: madcat at 2:23 pm (utc) on May 28, 2002)

[papabaer]

Hello Madmatt69,

The problem in display is caused because there is no font-size declaration in your body styles.

Add the following:
body {
font: 10px Verdana, Helvetica, sans-serif;
}

Opera 6.03 displayed the divs with no variation from IE6.

Mozilla, Netscape were breaking the containing div because it assumed a larger default (undelcared) font-size.

Unexpected results are common when you fail to set a base font-size in your body styles. Make the above change (the same font-size as your troubled divs) and you will solve the problem

You have an #id (#id nav) an a reference to a class .nav that does not exist.

nav {
color: #FFF;
font: 10px Verdana, Helvetica, sans-serif;
}

The above was not present in your style sheet, though you listed it in an above post.

<div id="nav">
followed by:
<div id="services" class="nav">
is not good form. Try renaming one or the other to avoid any conflicts or confusion.

In all of the instances I've witnessed where "postioned elements" did not display uniformly across browsers, each case could be attributed to how the individual browser renders the default element.

For instance, try placing a heading as the first element inside of a <div> (no padding declared) and then view the results in Opera, Mozilla and IE. IE does not render any spacing above the heading while Opera and Mozilla do... adding the following: h1 {margin:0;} will then give uniform results.

Lists, paragraphs, headings and forms are common elements the may display with different "spacing" across browers. Understanding this, and where the variances occur, will help you decide on the appropriate CSS to control display in a uniform manner.

- papabaer

(edited by: papabaer at 2:54 pm (utc) on May 28, 2002)

[madmatt69]

You guys rock! :)

Yeah, I just had to add that extra font declaration in the body. Interesting..and so easy to fix too. Learn something new every day :)

And thanks for pointing out that class="nav" thingy. At one point I had a seperate class declared, but forgot to remove it from the page.

Thanks again for all your help - problem solved!