Topic: need css debugging help please

http://www.patricdesign.com/clients/cc/xphp/

I am currently working on this site. Progress is smooth, i am mostly ironing out bugs to make it validate as 100% XHTML. The css already validates fine. However there is a problem:

The navigation div on the left is supposed to have a 20px margin all around it. When i test the page locally, the css is fine and the page is displayed correctly (including the 20px margin of the navi div). However as soon as I upload the site to the server the #navi div gets "fat" and extends further to the right than it should. This is mainly an IE6 issue as the site displays just fine in Mozilla, NutScrape 7 and Opera 6 & 7. What have i done wrong? Where is the bug? And why does css come out different when it is on a server?

Here's the #navi css:

#navi {

	position: absolute;

	top: 94px;

	left: 0px;

	margin: 20px 20px 20px 20px;

	border: 5px solid #fff;

	background: #336;

	padding: 0 0 0 0;

	font: 12px/20px verdana, arial, helvetica, sans-serif bold;

	color: #333;

	width: 150px;

	voice-family: "\"}\"";

	voice-family:inherit;

	width: 150px;

	}

html>body #navi {

	width: 140px;

	}

	

#navi ul {

		list-style: none;

		margin: 0;

		padding: 0;

		border: none;

		}

		

	#navi li {

		border-bottom: 1px solid #fff;

		margin: 0;

		}

	

	#navi li a {

		display: block;

		padding: 5px 5px 5px 0.5em;

		border-left: 10px solid #336;

		border-right: 10px solid #336;

		background-color: #336;

		color: #fff;

		text-decoration: none;

		width: 120px;

		font-weight: bold;

		}



	html>body #navi li a {

		width: auto;

		}



	#navi li a:hover {

		border-left: 10px solid #f90;

		border-right: 10px solid #f90;

		background-color: #336;

		color: #f90;

		}

EDIT: I have previously changed the width: auto; definition of the #navi li a selector to width: 120px; in an attempt to fix the issue - unsuccessfully.

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 04-23-2003).]

Why do you even need margins on an absolutly positioned element? If it's absolutly positioned then what's going to rest against those margins?

You should also specify a mesurement even if you use 0 as the value -- ie 0px.

Appart from that I have no idea what's actually causing that to happen. Unless uploading the file somehow add extra white space (maybe it converted the line break types) in the HTML that's only showing up in IE?... View the source of the online version and compare that to the offline one just to be sure.

Things behaving differently online than they do locally sounds suspiciously to me like a cache problem. Clear all caches (temporary internet files, etc), and force-reload. Put some wacky declaration in the style sheet (like, body{color:red; background:green;}) and upload it, and see if it takes effect, so that you know for sure the style sheet isn't being cached.

Beyond that, it could be something having to do with the content headers that the server is sending along with the page. Mozilla has the ability to look at these, I believe.

quote:

---

You should also specify a mesurement even if you use 0 as the value -- ie 0px.

---

There's really no need to do that.

thanx guys,

it seems fixed now. I am not really sure what the problem was. I fixed a glitch in the box model hack on the #navi id and set the #navi li a width: to auto;. It wasn't a cache problem either, i tried that before i looked at the code again.

strange things happen when you work long hours

<´¯`·.¸ Patric ¸.·´¯`>