Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts

    Macintosh different padding on mac FF

    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?

    Code:
    #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;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    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

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Not enough information there.

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

  • #5
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    the main css file:

    Code:
    * {
    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>

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.
    Code:
    #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;
    }

  • Users who have thanked jlhaslip for this post:

    sybil6 (10-28-2007)

  • #7
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    ok thank you for your answer and time, i will check this.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    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.
    Attached Thumbnails Attached Thumbnails different padding on mac FF-fx.png  

  • Users who have thanked VIPStephan for this post:

    sybil6 (10-28-2007)

  • #9
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    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...

  • #10
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://www.cssplay.co.uk has a good selection of Horizontal menus


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •