div pixel shift "problem" in Firefox, Opera

rolanddopson · 08-05-2008, 08:20 PM

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

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:roland_dopson@hotmail.com?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 · 08-06-2008, 01:13 AM

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

rolanddopson · 08-06-2008, 09:59 AM

Thank you very much - that's done the job and not very much work for anyone in the end. Thanks again for your help.

08-06-2008, 01:13 AM	#2 (permalink)
jnjc Moderator Join Date: Jun 2008 Posts: 365	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 __________________ www.solasit.com.au Website Design and Development Melbourne, Australia

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

08-06-2008, 09:59 AM	#3 (permalink)
rolanddopson New Member Join Date: Aug 2008 Posts: 2	Thank you very much - that's done the job and not very much work for anyone in the end. Thanks again for your help.