SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Width difference between Firefox and Safari / Chrome

    So I have a navigation menu consisting of some tabs, and I noticed that a certain amount of tabs still fit in firefox but not in safari. I first thought it was a bug with safari but it turned out chrome did the same thing.
    So for some reason, the tabs are less wide in firefox. This is my code:

    HTML:
    Simply <a> elements

    CSS:

    Code CSS:
    #header a {
    	display:inline;
    	border-radius:5px 5px 0 0;
    	-moz-border-radius:5px 5px 0 0;
    	font-size:12px;
    	padding:5px 10px;
    	position:relative;
    	top:1px;
    	color:#fff;
    }

    My vertical padding is already fixed because I set a general line-height and I tried setting letter-spacing to 0 but this didn't do anything.
    The only thing I can think of is the padding, isn't this the same across browsers?

    EDIT:
    I forgot, this is the general css but the buttons that have the problem also have a margin-right of 5px, and a background color (not like that matters).

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kokos, do you have your style sheet or a link to the page?

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Code:
    #header a {
        display:inline; <--- inline?  so the letters are setting your width then
        border-radius:5px 5px 0 0;
        -moz-border-radius:5px 5px 0 0;
        font-size:12px;
        padding:5px 10px;
        position:relative;
        top:1px; 
        color:#fff;
    }
    So, where's your font-family listing? Are your FF and Safari on two different machines? Safari and Chrome on a Mac should be making your letters slightly fatter than Firefox (though I don't own a Mac so not 100% sure what FF there does), and I'm pretty sure FF on a Windows machine would look somewhat smaller. Font size alone, even in px, can't guarantee widths cross-browser.

    Though you could make those either floats or display: inline-block so you could set widths on them (also then you won't need the position: relative and top: 1px cause then you could just use a top margin... then again, a 1px top padding on the ul (these ARE in a ul, right?) would do it).

  4. #4
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @donboe I do, but I'm sure there's nothing else affecting these elements (I did a check with firebug especially so I could say that).

    @Stomme Poes
    FF / Safari / Chrome which I tested it in are all on the same Mac. These links are tabs that don't want a fixed width but a width decided from the text length.
    I guess that if Chrome and Safari make the letters slightly fatter it can't be helped.
    The problem really isn't that big though, it just means I can fit one less tab in very select cases which I don't really think will happen anyway.
    I was mostly checking if this was something I did wrong or if it's something that can't be avoided.

    EDIT:
    My font-family is listed in the body

    Thanks!

    By the way, I usually put my links in a list, but I don't really see why I should ALWAYS do it. The only advantage it would give me here is being able to use top padding instead of relative positioning, which in my opinion isn't worth putting in all the extra HTML.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to set up your system's resolution and try.

    this may happen due to resolution problem.

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kokos View Post
    @donboe I do, but I'm sure there's nothing else affecting these elements (I did a check with firebug especially so I could say that).
    I asked that because you said
    Quote Originally Posted by Kokos View Post
    My vertical padding is already fixed because I set a general line-height
    But you still have padding top and bottom. Anyway I asked it as well, because sometimes 4 or who knows how many more, eyes can see more than just 2

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    By the way, I usually put my links in a list, but I don't really see why I should ALWAYS do it. The only advantage it would give me here is being able to use top padding instead of relative positioning, which in my opinion isn't worth putting in all the extra HTML.
    Just a note, the reason for using a ul really isn't anything to do with having some helpful container for CSS; otherwise you'd just use a div like everyone did in the Bad Old Days. It's more for reasons of semantics and user agents who can present something as an ordered or unordered list of links.

    Whenever I have a group of inline/floated *things* and they only just fit in some browsers and wrap in other browsers, I either have to enlarge my container, reduce the number of items or make each item smaller. However since we don't have enough code to know 100% if font variation is the problem, we can't say for certain that those are your only options.

    But I usually would hit similar issues back when I stated uneven fonts in a font-stack, like
    verdana, arial, helvetica, sans-serif;
    because the difference between having verdana and not was huge. I don't list fonts like that anymore (this likely isn't your problem since all your test browsers are on the same machine).


Tags for this Thread

Bookmarks

Posting Permissions

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