positioning problem between ie and firebird

[dtra]

hi all
i've got this positioning bug on my site http://dtra.sonnexh.com
it's the navigation bar across the top
my stylesheet says

position: relative;
top: -11px;

that works for firebird but not ie
if i take the top line out (and maybe the position), it works for ie but not firebird

it's in a list at the moment, which is causing the most problem at the moment i think
when i take it out of the list, it works in both
i prefer it being in a list, any ideas or suggestions
should i:

• get rid of the list? or
• fix the css so that it works (if possible, obviously this is preferred)?

the stylesheet is located at http://dtra.sonnexh.com/styles.css

thanks for any help
dave

[BenANFA]

Your problem is this line of code

<p><a class="skipLink" href="#content">Skip navigation</a></p>

although you have switched off the display of the <a> the <p> is still being displayed. Change it to

<p class="skipLink"><a class="skipLink" href="#content">Skip navigation</a></p>

and remove the

position: relative;
top: -11px;

from your classes.

From my experience if you are having to resort to negative top margins then something else is wrong.

[dtra]

thanks for your reply
i'll have a look at that
hopefully it'll work

[Shyflower]

I think it is basically a positioning problem. I would put some top padding into your log-in paragraph. However before I did that, there are several changes I would make in your css. Have you tried using em's or percentages for font-sizes? Both px and points display differently in different browsers and at different resolutions.

I also am not much into negative positioning (-11px) and I guess I don't understand what good that is doing your page.

Another solution could be to create an image map with the blue bar and the navigation text.

[BenANFA]

Another solution could be to create an image map with the blue bar and the navigation text.

Image maps ---- Bad! (or at least frowned upon).

They mean nothing to a screen read or other accessability orientated browser.

[dtra]

ok guys
thanks for your replies
what ben has suggested worked
and i'll look at em's, but i seem to get different sizes for them
and i think they were messing with other styles i had
but i'll definitely see if i can use em's instead of px's

and yeah, i would prefer to stay away from image maps
haven't used one for a few years, and don't really want to go back

[BenANFA]

If you are going to use em's (and I do) the consensus of opinion seems to be that setting a % size on you body element makes them work better (especially in IE). Even if you use 100%.

For example

body {
  font-size: 100%;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

p.footnote {
  font-size: 0.8em;
}

Another advantage of this is that if you decide that the fonts are generally too big or too small you can adjust all of them just by changing the body font-size percentage.

See http://www.thenoodleincident.com/tutorials/typography/ and the 264 screen shots for more info

[Shyflower]

Image maps ---- Bad! (or at least frowned upon).

They mean nothing to a screen read or other accessability orientated browser.

I don't use image maps either, but in the case of this page where there were so many conflicts, an image map would have been one "quick fix" for the navigation bar problem.

With the negative positioning, I don't think the page will present well to accessbility oriented browsers anyway. However, I'm glad the suggestion you offered worked.

[Shyflower]

If you are going to use em's (and I do) the consensus of opinion seems to be that setting a % size on you body element makes them work better (especially in IE). Even if you use 100%.

Excellent suggestion!

I generally use percentages for font-size and em's for top and bottom margins and padding, but I like the idea of setting the font-size in the body. I think this will solve some of my problems in making my cascade present correctly. Although the initial post wasn't mine... Thanks!