Web Design Forum  
 
Go Back   Web Design Forum > Web and Graphic Design > Web Design

Reply
 
LinkBack Thread Tools Display Modes
Old 08-05-2008, 08:20 PM   #1 (permalink)
New Member
 
Join Date: Aug 2008
Posts: 2
Default div pixel shift "problem" in Firefox, Opera

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!
rolanddopson is offline   Reply With Quote
Old 08-06-2008, 01:13 AM   #2 (permalink)
Moderator
 
jnjc's Avatar
 
Join Date: Jun 2008
Posts: 365
Default

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
jnjc is offline   Reply With Quote
Old 08-06-2008, 09:59 AM   #3 (permalink)
New Member
 
Join Date: Aug 2008
Posts: 2
Default

Thank you very much - that's done the job and not very much work for anyone in the end. Thanks again for your help.
rolanddopson is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 09:24 PM.


Computer Forum - TechZine - Webpage Design

 
Powered by vBulletin® Version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.