Is This A Padding Or Margin Issue?

HTML & CSS
1

LINK-
http://www.securehostserver.info/tellico/

In the #header ul, the anchors should read “HOME, ABOUT THE REGION, SITE FACTS, FAQS, WORKFORCE DATA, RESOURCES, CONTACT” and they do look accurate in Safari, IE8, Opera, Firefox (although the spacing between buttons seems a bit off since the last button - CONTACT - should have a border-right shown), and Chrome.

But they do not show the last button “CONTACT” in IE 9 and IE 10.

Can someone help me figure out why?

Todd

2

The padding within each list item is fixed and depends on a fixed font size to display the menu the way you expect to see it. If the font size is larger than expected, the last menu item drops out of view. I’ll bet that’s what is happening :slight_smile: What is the default font and font-size in your IE browsers (compared to FF and Chrome)?

The valuable lesson here is that your site depends on predictable users. It is not designed to adapt to less than ideal users who use default values and have a PC. How does it render on a Mac or a Linux box? Worth a thought. :slight_smile:

3

ronpat,

I am not aware of the default font-size in IE browsers compared to FF and Chrome. Here is the property for the body tag.

body {font:100%/1.4 'Lato', sans-serif;}

And it renders accurately on a Mac as that is what I am using.

I am wondering if I should change the body font-size to pixels. Might that help my situation?

4

You’ve got 24px of left and right padding on header li a. Reduce that to 23px on each side, and IE will show all your menu items.

5

HI,

The main problem is this you are guessing at the width :slight_smile:

That is to say you have this equation:

pieces of text + padding-right + padding-left = width of navbar

The flaw in the equation is that “a piece of text” can vary by as much as 10px width depending on browsers and the length of the text snippet and there is nothing you can do about it. Browsers do not have to (and do not) make text at the same width as each other. Some have various anti-aliasing methods applied and sub have faux sub pixel positioning and then there is cleartype, the weight of the text and many other factors to take into consideration.

The bottom line is that you cannot make something fit exactly where you take the length of the text and its padding and try to make it fit. Even if you shorten the padding by a couple of pixels it will fit in IE ok but if the user bumps up the text a size the last item drops off once again.

The way I get around it is to remove the padding from the anchor and use display:table (IE8 plus) to space things out instead. This will allow for quite a few resizes in text before it starts to break.

e.g.


header ul { display:table; }
header li {
	float:none;
	*float:left;/* ie7/6 ugly hack */
	display:table-cell;
	text-align:center;
}
header li a {
	padding:0;
	*padding:0 22px;/* ie7/6 ugly hack */
}
header li a:hover {
	margin:0;
	position:relative;
	top:1px;
}

(The above code are over-rides to your code and not replacements.)
IE7 and under just get the floated version.

Alternatively you could set a width on each element using a class and then just centre the text within that width. You know the width of the navbar and if the widths of the elements add up correctly they will always fit and any small differences in text is eaten up within the centred portion without causing harm.

One thing I always say is “allow breathing space”.:slight_smile:

6

Paul O’B,

Thanks for the explanation. That makes perfect sense. One thought that I had was I am using a Google Font (Lato) to render that text. Would the various browsers still display the text differently even though I am using the Google Font? It seems like they wouldn’t, but obviously I am not “in the know”. I appreciate your help!

Also, when you mention that the code is an over-ride and not a replacement, do you mean to add those properties directly beneath the existing styles that I have written as opposed to deleting my styles and pasting in yours?

7

Yes they will still render it according to their own set of dynamics so there will be variations cross-browser.

Also, when you mention that the code is an over-ride and not a replacement, do you mean to add those properties directly beneath the existing styles that I have written as opposed to deleting my styles and pasting in yours?

Yes the code I gave should be pasted after your original code and leave your original untouched. (Or if you are confident then just merge the rules in with your own.:slight_smile: )