Topic: need css debugging help please Pages that link to <a href="https://ozoneasylum.com/backlink?for=10958" title="Pages that link to Topic: need css debugging help please" rel="nofollow" >Topic: need css debugging help please\

 
Author Thread
patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 04-23-2003 21:38 Edit Quote

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:

code:
#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).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 04-23-2003 22:24 Edit Quote

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 04-23-2003 22:31 Edit Quote

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.

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 04-23-2003 22:35 Edit Quote
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.

patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 04-23-2003 23:25 Edit Quote

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 ¸.·´¯`>



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu