div pixel shift "problem" in Firefox, Opera

R

rolanddopson

New Member
In reality this is probably IE getting things wrong but making it look like Firefox and Opera's fault. :D

The page in question is here... http://www.rolanddopson.co.uk/testing/website.html

The menus at the top are appearing 40 pixels further to the right in Firefox than they do in IE7 (don't worry about IE6, I know it doesn't work there - that's my next problem to solve ;)). The width of the logo is 350px and the css in question is:
Code: 
/* Top bar to contain logo and menus */
div.topBar
{
	z-index:1;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:55px;
	background-color: #CCCC99;
}

/* Logo */
div.logo
{
	z-index:2;
	position:fixed;
	top:0px;
	left:0px;
	width:350px;
}

/* Navigation */

div.mainNav
{
	left:355px;
	top:5px;
	z-index:2;
	position:fixed;
}

div.subNav
{
	left:355px;
	top:31px;
	z-index:2;
	position:fixed;
}

The HTML in question is

Code: 
<!-- Website navigation -->
<div class="topBar">

<!--Logo -->
<div class="logo">
	<center>
	<a href="http://www.rolanddopson.co.uk"><img src="http://www.rolanddopson.co.uk/logo.jpg" border="0" alt="My Website logo" /></a>
	</center>
</div>

<div class="mainNav">
	<ul class="navlist">
		<li class="navlist"><a class="navlist" href="http://about.rolanddopson.co.uk">About</a></li>
		<li class="navlist"><a class="navlist" href="http://travel.rolanddopson.co.uk/">Travel</a></li>
		<li class="navlist"><a class="navlist" href="http://mytree.rolanddopson.co.uk">Family Tree</a></li>
	</ul>
</div>

<div class="subNav">
	<ul class="navlist">
		<li class="navlist"><a class="navlist" href="http://about.rolanddopson.co.uk">Me</a></li>
		<li class="navlist"><a class="navlist" href="http://www.rolanddopson.co.uk/about/website.html">Website</a></li>
		<li class="navlist"><a class="navlist" href="http://www.rolanddopson.co.uk/interests/">Interests</a></li>
		<li class="navlist"><a class="navlist" href="http://cv.rolanddopson.co.uk">CV</a></li>
		<!--Eventually I will get round to adding a contact page with email address and myPlugoo -->
		<li class="navlist"><a class="navlist" href="mailto:[email protected]?subject=RolandDopson.co.uk feedback">Contact</a></li>
	</ul>
</div>

</div> <!-- topBar -->

If anyone has any ideas, I'd be most grateful as I'm stumped!
 
jnjc

jnjc

New Member
This problem seems to be cause by padding on the ul element. Add the following to ul.navlist in your style.css:

padding:0;

This will solve the issue on FF, I haven't tested it in IE but I'm guessing it'll be ok.

HTH,
JC
 
You must log in or register to reply here.
Top