Hi there, I wonder if anyone could solve this issue for me?
On my page I have a nav bar which is in a fixed position of top: 50%. I have then applied a margin to position the text a certain amount of pixels from the center of the page.
The problem is that the margin is working correctly in Safari, IE, Chrome and Opera, but is about 3 pixels out in Firefox. Because there is a background image that surrounds the text fairly tightly, it’s a bit of a problem.
Here is the CSS I’ve used for the nav bar:
.nav {
position: fixed;
top: 50%;
margin-top: 163px;
padding: 0px
margin-left: 0px;
width: 100%;
height: 18px;
text-align: center;
vertical-align: top;
list-style: none;
z-index: 9500;
}
And here is the HTML
<div class=“nav” style=" margin-left: -10px; “>
<li><a href=”#" onclick=“statement_visible()”>artist’s statement</a></li>
********
<li><a href=“#” onclick=“illustrations_visible()”>illustrations</a></li>
********
<li><a href=“#” onclick=“drawings_visible()”>sketchbook</a></li>
********
<li><a href=“#” onclick=“contact_visible()”>contact</a></li>
</div>
Does anyone have any idea what could be causing this problem, could it be an error in my code?
Thanks greatly
Hm… ok, everything else is centered okay, but seems to still have a problem with that margin in firefox.
Through giving the nav a background colour I worked out that it seems to be a text centering issue rather than the margin itself. The text is centering within the height of the div in most browsers except firefox.
I guess you’re right, it’s not majorly noticeable, would be nice to fix it though, if just to be a perfectionist about it. (:
Mm I never thought about macs. It’s crazy how much inconsistency there is between the browsers. Anyway, at least it’s aligning okay for now. (:Thanks again for your time, will leave it alone for the time being I think.
The reason I made the image wider than the screen was because I wanted it to center when viewed in any resolution, without having to scale the image, and having the image fit right to the sides of the screen. But if this is going to cause problems I guess I should resolve that some other way.
There is no problem with this in the code I sent - was there?
Setting the line height to zero could hide it completely in some browsers. Your best bet is to do it right as I have shown in the code above and avoid these issues. You should set the line-height in the body element anyway to standardise things (as in my example).
You must have a logical structure and then things just start working properly. If you have various unrelated elements all being placed in respect of something else then it is unlikely to be consistent.
There is also no need for the tables to be used and your code would be reduced considerably and avoid other differences creeping in.
I realise that this would mean a bit of a re-write but you did ask
Yes you won’t get it pixel perfect cross browser anyway because it will depend on the height of the page on both browsers as well. If the page height is an odd pixel height then 50% will be 1px out when rounded and the rounding algorithms vary between browser also. Pixel perfection isn’t always possible because web pages are fluid unlike apiece of paper.
The point I was making with my code is that you don’t get this rounding error and if you resize the browser up and down the text doesn’t move at all whereas in your code it moves by 1px on each odd pixel movement (and previously it was moving by 2 or three pixels because of differences in line-height).
I’ve just checked your page in Safari and it looks exactly the same as Firefox assuming we are still talking about the vertical alignment.
See attachment screenshot2 which is your current page compared in Firefox and Safari. Screenshot1 is using the method I was suggesting just to show it is also the same.
Of course Firefox on the mac would probably be different again 
Hi,
If you are talking about the 1 or 2px jog on the text at the bottom of the image then it’s hardly noticable.
You can cure it by changing the way you are doing this and placing the text in relation to the element holding the image.
here is an example of a perfectly centred element that doesn’t slid off the top and sides of the screen like yours does (which is very bad) and doesn;t need any tables either.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
html{min-width:574px}
body {
text-align:center;
line-height:1.2;
}
#vertical {
float:left;
height:50%;
margin-top:-184px;/* half vertical height*/
width:100%;
}
#hoz {
width:100%;
margin-left:auto;
margin-right:auto;
height:368px;
text-align:left;
clear:both;
}
a {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #625d8d;
}
a:visited {
text-decoration: none;
color: #625d8d;
}
a:hover {
text-decoration: none;
color: #433d6f;
}
a:active {
text-decoration: none;
color: #433d6f;
}
.openingimage {
background: url(http://www.kirstybaynham.co.uk/bordereddusk368pxnew2.png) no-repeat 50% 0;
height: 368px;
width: 100%;
overflow: hidden;
position: relative;
z-index:9001;
}
.nav {
margin:0;
padding:0;
position: absolute;
top: 347px;
left:0;
margin-left: 0px;
width: 100%;
height: 20px;
text-align: center;
list-style: none;
z-index: 9500;
}
.nav li {
list-style: none;
display: inline;
margin:0 25px;
}
.nav a:link, nav a: visited {
font-weight: normal;
}
.nav li.current a:hover {
color:#fff;
}
#header{
height: 14px;
width: 548px;
margin:2px auto;
z-index:9700;
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #b42eac;
}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
<div class="openingimage">
<h1 id="header"><img alt="" src="http://www.kirstybaynham.co.uk/kirstybaynhamillustrator2.png" /></h1>
<ul class="nav">
<li><a href="#" onclick="statement_visible()">xartist's statement</a></li>
<li><a href="#" onclick="illustrations_visible()">illustrations</a></li>
<li><a href="#" onclick="drawings_visible()">sketchbook</a></li>
<li><a href="#" onclick="contact_visible()">contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Just copy and paste and test it out to see if that’s what you meant.
There is no jog on the text because it is placed in relation to the element holding the image. If you do that for the other elements and lose all those tables the code will be cleaner and more solid and display better.
Hi, Welcome to Sitepoint
Is this really the html or have you made a typo?
Firstly list must be inside a UL and there can be no content between the list items (the stars in your post).
It should be like this:
<ul class="nav">
<li><a href="#" onclick="statement_visible()">artist's statement</a></li>
<li><a href="#" onclick="illustrations_visible()">illustrations</a></li>
<li><a href="#" onclick="drawings_visible()">sketchbook</a></li>
<li><a href="#" onclick="contact_visible()">contact</a></li>
</ul>
Have you reset the margins on the body and on the ul?
html,body{
height:100%;
margin:0;
padding:0;
}
ul{margin:0;padding:0}
If you are trying to match that exactly with a background image on the body then it is likely to be 1px out on odd pixel/height widths in various browsers due to rounding errors.
I’d need to see the page to debug further.
As a matter of note vertical-align does not apply to block elements so remove it. And lastly z-index:9500 is rather a strange number to use. I often use 999 as an arbitrary high number but in truth it only needs to be one higher than what went before and 9500 seems very strange
It looks better than it was before and is hardly noticeable now.
I’d leave it alone unless you want to change it as I mentioned above. (If you try out the code I gave above (just copy and paste) you will see that it is rock solid with no jog but it obviously means a lot of work for you to implement all the changes for such a small reward. Although you would benefit in tighter cleaner code as well ;)).
I’ve just tried reseting the margins and padding from body and ul but it hasn’t helped the height.
Hi, thanks for the reply
Ok, it’s kind of a typo. There’s a space between each link that for some reason turned into stars when I copied and pasted the code. I just didn’t notice.
If I can’t have a consistent top margin in all browsers, do you know of another way I can get the text to align correctly?
The url is http://www.kirstybaynham.co.uk/
Oh and about the z-index:9500, I’m not exactly sure why I picked that number I guess I thought it needed to be significantly more!
I do think it would be worth the time spent sorting the code if it sorted everything out, although I think it is only out by 1 pixel now (that’s using line-height: 0em though).
I don’t know whether we’re perhaps looking at this in a different version of firefox, but when I copy and paste the code into a new page it still views differently in firefox than in safari, the text is still slightly further down in firefox.
The reason I made the image wider than the screen was because I wanted it to center when viewed in any resolution, without having to scale the image, and having the image fit right to the sides of the screen. But if this is going to cause problems I guess I should resolve that some other way.
Anyway, thanks for this code, I’ll try it out and hopefully it will sort things.
I’ve actually just managed to sort the margin problem using line-height: 0em; but I don’t know if it’s the best solution…
Thanks for your time