SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is This A Padding Or Margin Issue?

    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
    Todd Temple > T2 Design

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 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.

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    What is the default font and font-size in your IE browsers (compared to FF and Chrome)?

    How does it render on a Mac or a Linux box?
    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.
    Code:
    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?
    Todd Temple > T2 Design

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The main problem is this you are guessing at the width

    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.

    Code:
    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".

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Todd Temple > T2 Design

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    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?
    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. )


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
  •