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:
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).
#header a {
display:inline; [b]<--- inline? so the letters are setting your width then[/b]
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).
@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.
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).