...

View Full Version : different padding on mac FF



sybil6
10-27-2007, 12:14 AM
I have a problem with paddings on FF on Mac
with this code i get a padding left and right of around 18px on FF on Pc(what i expect), but on FF on Mac i get a padding left and right of around 40px(40 px on each side) , why is that?


#header {
position:absolute;
z-index:1;
text-align:center;
margin-left:121px;
height:26px; /*complete height 38px*/
padding-top:12px;
width:449px; /*complete width 485px */
padding-left:18px;
padding-right:18px ;
font-family:Georgia,verdana;
font-size:0.79em;
font-weight:normal;
}

VIPStephan
10-27-2007, 06:26 PM
You are doing something wrong. But it’s impossible to say what if you only post such a small snippet of code. You know, even if the CSS is correct, CSS is only styling HTML. And if the HTML is wrong the CSS can be correct like nothing on this world but it still won’t make badly coded HTML look right.

And something that people often don’t see: The error doesn’t always lie where it occurs visually, it can be a totally different place and through some kind of chain reaction it just shows up somewhere else. So please post your entire code (i.e. HTML and CSS) and we can help you. A link to the site will also help.

sybil6
10-28-2007, 01:14 AM
here is the html part of the "header":

<div id="header"><a href="index.htm"><span style="color:white;">CONSULT</span>
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="services.htm">YDELSER</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="bio.htm">BAGGRUND</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="actualites.htm">AKTUELT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="contact.htm">KONTAKT</a></div>


do you think this could be due to the &nbsp;? arent hey supposed to be parsed the same way on every brownser? and anyway the problem comes from padding left and right:confused:

jlhaslip
10-28-2007, 01:21 AM
Not enough information there.

Please post a link if possible. Or the entire html and css files. Inside code tags, of course.

sybil6
10-28-2007, 01:30 AM
the main css file:


* {
margin: 0;
padding: 0;
}
#wrapper{
width:1000px;
margin: 0 auto;
}
#header {
position:absolute;
z-index:1;
text-align:left;
margin-left:121px;
height:26px; /*complete height 38px*/
padding-top:12px;
width:462px; /*complete width 485px */
padding-left:23px ;
font-family:Georgia,verdana;
font-size:0.79em; /*ems to ensure compatibility between ie and ff */
font-weight:normal;
}
#header a:hover{
color:white;
}
#sub-header a{
color:white;
}
#sub-header a:hover{
color:black;
}
#content{
position:absolute;
top:76px;
margin-left:121px;
width:465px;
height:740px;
background-color:#efeede;
font-family:Arial,verdana;
font-size:0.88em;
line-height:1.3em;
padding-left:20px;
}
.typo{
font-family:Georgia,verdana;
font-size:1.1em;
line-height:1em;
}
.punto{
font-size:0.68em;
}




the html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon" href="LC.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style type="text/css">
#header {
background-color:#7c907e;
}
body {
background-color:black;
}
#main{
position:absolute; /*wrote to make active the z-index of header*/
}
#quotation{
display: inline;
position:relative;
top:456px;
left:517px;
font-family:Georgia,verdana;
font-size:1.22em;
line-height:1.3em;
color:#6c7d6f ;
}
a {
text-decoration:none;
color: black;
}
a:hover{
color:#efeede;
}
</style>


</head>

<body>

<div id="wrapper">





<div id="header"><a href="index.htm"><span style="color:white;">CONSULT</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="services.htm">YDELSER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="bio.htm">BAGGRUND</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="actualites.htm">AKTUELT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.htm">KONTAKT</a></div>

<div id="main"><img src="images/main01.jpg"/></div>

<div id="quotation">' Uden fordærves<br>
er<br>
uden sjæl, ket og dør '<br>
<span style="font-size:11px;">Albert Camus</span></div>

</div> <!--close wrapper-->

</body>
</html>

jlhaslip
10-28-2007, 02:11 AM
It might be due to the margin:0 auto on the wrapper. That could be inherited down to the element giving you problems. Since you have provided a width to the header, the links inside are centering itself, regardless of the padding???
Only thing I can see.
Try not using a width on the #header to see if it behaves differently.


#wrapper{
width:1000px;
margin: 0 auto;
}
#header {
position:absolute;
z-index:1;
text-align:left;
margin-left:121px;
height:26px; /*complete height 38px*/
padding-top:12px;

padding-left: 30px ;
padding-right: 30px ;

font-family:Georgia,verdana;
font-size:0.79em; /*ems to ensure compatibility between ie and ff */
font-weight:normal;
}

sybil6
10-28-2007, 02:18 AM
ok thank you for your answer and time, i will check this.

VIPStephan
10-28-2007, 03:34 PM
Hmm, did you solve it yet? It looks exactly the same in both, Win and Mac Firefox for me (see attached image).
In any way, your links/menu aren’t/isn’t formatted really nicely. You should use a list (ul) and float the list items to the left, making the lnks go side by side, and then you can space them out with margins or paddings.

sybil6
10-28-2007, 09:18 PM
it look like it is a problem of specifying the width of items what jlhaslip said, VIPStephan:someone has been checking it for me on a mac and i also did brownsercamshot and the padding error is there. Now i must re-arrange all the contents that are justify to the header...

jlhaslip
10-28-2007, 10:27 PM
http://www.cssplay.co.uk has a good selection of Horizontal menus



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum