CODEWITHSUNDEEP
htmlcssinternet-explorerfont-face
Thomas Shields
Thomas Shields

Reputation: 8942

Why Is My Font-Family Affecting a Wrapping Issue?

I've got a fixed-width ul with inline lis. Inside some of the lis i've got a with links. I'm essentially making tabs. I've set all the lis with fixed width's that up directly to the width of the ul. This works fine in Chrome. In Opera and Firefox it's a pixels off. But in IE, the lis wrap around onto a new row. I stripped my HTML and CSS down as much as possible and put it in a JSFiddle. I discovered that for some stinkin reason, font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; causes this to happen. When i remove it, it's fixed. I'd like to know WHY???

HTML:

 <ul id="menu">
                <li class="side"></li>
                <li class="spacer first"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer last"></li>
                <li class="side last"></li>
            </ul>

CSS:

    body { font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}
ul#menu {
       width:1110px; 
}

ul#menu li {
    display: inline;
  }
ul#menu li.side
{
padding-right:100px;
      }
ul#menu li.spacer.first
{
    padding-right:85px;
}
ul#menu li.spacer.last
{
    padding-right:85px;
}
ul#menu li.side.last
{
    background-position:0px 0px;
    padding-right:100px;
}
ul#menu li.spacer
{
   padding-right:84px;
  }

ul#menu li a 
{ margin-right:-4px;
    text-align:center;
    width:122px;
    font-size:x-large;
      display:inline-block;
    font-weight: bold;
    text-decoration: none;
    padding-top:13.5px;
    padding-bottom:14.5px;
    background-color:blue;
    color: #000;


   }

You can see the behavior here: http://jsfiddle.net/GfSLC/14/ Thanks! Let me know if i need to provide anymore info.

Upvotes: 1

Views: 243

Answers (1)

andyb
andyb

Reputation: 43823

I think it is simply that browsers render pages slightly differently. A different font will affect the width and height of an element with width:auto; height:auto. For example the height of your <a> shrinks by 3px if you remove the font-family. Different font glyphs will consume different amounts of space.

In this case, the problem is that one browser has calculated the width of all the <li> to be greater than the width of the containing element and it is spilling over to the next line. To fix this you can either:

  • apply the font-family to the <li> instead of <body>
  • reduce the width of the spacer elements by 1-2px

Also, IE8 in quirks mode renders the page as expected; in standards mode it overspills the container.

Upvotes: 1

Related Questions