List elements don't fit into give space on IE and MAC's Chrome

Question

I have a navigation menu (CSS-only, structured as a list) which works fine on Firefox, Opera and Chrome on a Windows machine. Can't test Safari right now, but I have a problem with the last element of the list not fitting into the given width (which is fixed at 1000px) on Internet Explorer and Chrome on MAC (note that it works fine on Windows Chrome). Both Chromes are (close to) the latest version so that can't be the issue.

Now, if the problem was IE-only, I'd just make a conditional stylesheet and be done with it. But the Chrome thing is bugging me. So here are the screenshots of the working version (taken on Firefox) and the broken version (taken on IE):

not ok

This is the HTML and CSS code of the navigation menu, if you think there's any other relevant CSS please let me know. It seems to me like the text is causing the problem. I've tried fiddling with the font weight, font family and space between letters, but nothing seems to remedy the issue.

<div id="rn-holder">
    <nav id="rolling-nav">
        <ul>
            <li><a href="http://www.domain.com/en/index.php" data-clone="Home">Home</a></li>
            <li class='has-sub '><a href="http://www.domain.com/en/my-team" data-clone="My Team">My Team</a>
              <ul>
                    <li><a href="http://www.domain.com/en/my-team" >Team Settings</a></li>
                                <li><a href="http://www.domain.com/en/account-settings" >Account Settings</a></li>
                              </ul>
        </li>
            <li><a href="http://www.domain.com/en/transfer-center" data-clone="Transfer Center">Transfer Center</a></li>
            <li class='has-sub '><a href="http://www.domain.com/en/browse-leagues" data-clone="Leagues">Leagues</a>
              <ul>
                    <li><a href="http://www.domain.com/en/browse-leagues" >Browse Leagues</a></li>
                <li><a href="http://www.domain.com/en/my-leagues" >My Leagues</a></li>
              </ul>
        </li>
            <li><a href="http://www.domain.com/en/rules-of-the-game" data-clone="Rules">Rules</a></li>
        <li class='has-sub '><a href="http://www.domain.com/en/statistics/players" data-clone="Stats">Stats</a>
              <ul>
                    <li><a href="http://www.domain.com/en/statistics/players" >Player Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/teams" >Team Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/members" >Member Stats</a></li>
                <li><a href="http://www.domain.com/en/statistics/clubs" >Club Stats</a></li>
                                <li><a href="http://www.domain.com/en/serie-a-standings-table" >Standings</a></li>
                <li><a href="http://www.domain.com/en/match-center/20/0" >Match Center</a></li>
                <li><a href="http://www.domain.com/en/player-injuries-and-suspensions" >Injury Report</a></li>
              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/season-dream-team/2012-13" data-clone="Dream Team">Dream Team</a>
              <ul>
                    <li><a href="http://www.domain.com/en/season-dream-team/2012-13" >Season Dream Team</a></li>
                    <li><a href='http://www.domain.com/en/round-dream-team/20' >Round 20 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/19' >Round 19 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/18' >Round 18 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/17' >Round 17 Dream Team</a></li><li><a href='http://www.domain.com/en/round-dream-team/16' >Round 16 Dream Team</a></li>              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/choose-account-type" data-clone="Upgrade">Upgrade</a>
              <ul>
                    <li><a href="http://www.domain.com/en/choose-account-type" >Choose Account</a></li>
                <li><a href="http://www.domain.com/en/premium-accounts" >Account Types</a></li>
                <li><a class="getcoins" >Get Coins</a></li>
                <li><a href="http://www.domain.com/en/store" >Store</a></li>
              </ul>
        </li>
            <li class='has-sub '><a href="http://www.domain.com/en/about-us" data-clone="About">About</a>
              <ul>
                    <li><a href="http://www.domain.com/en/about-us" >About Us</a></li>
                <li><a href="http://www.domain.com/en/contact-us" >Contact Us</a></li>
                <li><a href="http://www.domain.com/en/terms-and-conditions" >Terms & Conditions</a></li>
              </ul>
        </li>
        </ul>
    </nav>
</div>

So that's the HTML (there are, as you see, dropdown menus, but their presence or absence doesn't effect the problem). Here are the styles (including dropdown list styles, probably irrelevant to this problem but can't hurt to share them):

#rn-holder{
    width:1000px;
    margin:10px 0;
    background-color:#ca1026;
    background-image:-webkit-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-moz-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-ms-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-o-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    font-weight:normal;
}

#rolling-nav {
    color:white;
    text-transform:uppercase;
    position:relative;
    font-size:12px;
    margin-left:2px;
}

#rolling-nav ul {
    height:50px;
    margin:0px 0px;
    padding:0px 0px;
    overflow:hidden;
}

#rolling-nav li {
    float:left;
    list-style:none;
    margin:0px 0px;
    padding:0px 0px;
}

#rolling-nav li:hover > a {
    margin-top:-50px;
    margin-bottom:1px;
}

*html #rolling-nav li a:hover{ /* IE6 */
    margin-top:-50px;
    margin-bottom:1px;
}

#rolling-nav a,
#rolling-nav a:before {
    display:block;
    margin:0px 0px;
    padding:0px 27px;
    line-height:50px;
    color:white;
    text-decoration:none;
    background-color:#ca1026;
    background-image:-webkit-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-moz-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-ms-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:-o-linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    background-image:linear-gradient(top, #ca1026 0%, #b60c12 33%, #9b0c12 67%, #810a0f 100%);
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
    position:relative;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    font-weight:normal;
}

#rolling-nav a:before {
    content:attr(data-clone);
    position:absolute;
    top:100%;
    left:0px;
    display:block;
    background-color:white;
    background-image:-webkit-linear-gradient(top, #ddd, white);
    background-image:-moz-linear-gradient(top, #ddd, white);
    background-image:-ms-linear-gradient(top, #ddd, white);
    background-image:-o-linear-gradient(top, #ddd, white);
    background-image:linear-gradient(top, #ddd, white);
    border-top:2px solid rgba(0,0,0,0.2);
    color:#333;
}

#rolling-nav a:hover {
    margin-top:-50px;
    margin-bottom:1px;
}

/*For dropdown sub Menu*/
#rolling-nav .has-sub:hover ul {
    display:block;
    list-style:none;
}

#rolling-nav .has-sub.hover ul {
    display:block;
    list-style:none;
}

#rolling-nav .has-sub ul {
    display:block;
    display: none;  
    position: absolute;
    height:auto;
    top: 50px;
    float:left;
    text-align: center;
    width:160px;
}

#rolling-nav .has-sub ul li {
    text-align: center;
    display:block;
    float:left;
    list-style:none;
    margin-top:0px;
    margin-bottom:0px;
    width:150px;
}

#rolling-nav .has-sub ul li a {
    border-top: 0 none;
    border-left: 1px solid #d2d2d2;
    font-size:12px;
    display:block;
    padding: 1px 1px;
    text-align: center;
    margin-top:0px;
    margin-bottom:0px;
    z-index:45;
    line-height:40px;
}

#rolling-nav .has-sub ul li span.premium {
    background: url('../images/star_yellow_small.png') no-repeat;
    float:left;
    height:9px;
    width:9px;
    position:relative;
    top:15px;
    left:8px;
}

#rolling-nav .has-sub ul li a:hover {
    background-color:#666666;
    background-image:-webkit-linear-gradient(top, #ddd, #666666);
    background-image:-moz-linear-gradient(top, #ddd, #666666);
    background-image:-ms-linear-gradient(top, #ddd, #666666);
    background-image:-o-linear-gradient(top, #ddd, #666666);
    background-image:linear-gradient(top, #ddd, #666666);
    color:white;
}

*{
    font-family:Arial, Helvetica, sans-serif;
}

Does anyone see what the problem is? I don't mind if the fix doesn't work on IE, but I need it to work on all "normal" browsers, such as Chrome on MAC.

I cannot test Chrome on MAC myself but I seem to remember running into an issue like this in the past but I think it was with IE. Try remove the `white space` between all your elements. You can do it like this `
I suggest you look into [kerning](http://stackoverflow.com/questions/5512169/ie9-letter-spacing-problem). I don't know about Mac Chrome but I do know that IE uses a technology called Cleartype. For example, "MY TEAM" is about 52px long in IE and 48px in Chrome for me (zoom changes this as well). — MiniRagnarok, Jul 03 '13 at 19:01

score 0 · Answer 1 · answered Jul 03 '13 at 18:44

0

It's the width of the li getting it's width from the font, since you aren't specifying a width for the li. If you make the font-size: 11px in those browsers, you'll see the last li comes up.

answered Jul 03 '13 at 18:44

mauteri

531
3
7

Thanks, but please refer to my comment on Marc's response. – sveti petar Jul 03 '13 at 18:51
You would need to specify the font then, not give options of Helvetica, Arial, and sans-serif. That means, to guarantee the font is there, you should include it and link to it via @font-face. – mauteri Jul 03 '13 at 18:58

score 0 · Answer 2 · answered Jul 03 '13 at 18:46

0

My first guess is that the issue is related to the floats. Because of the variation in font-size among different systems and browsers, your floated elements are slightly wider on the browser of interest (Mac Chrome). As a result, the "About" link/element is wrapping onto a second line of your menu because of:

#rolling-nav ul {
    height:50px;
    margin:0px 0px;
    padding:0px 0px;
    overflow:hidden; <-- hides the optional 2nd line of the menu
}

Try making you nav blocks narrower to confirm that this is the problem.

I would start by looking at:

#rolling-nav a, #rolling-nav a:before { 
    display:block;
    margin:0px 0px;
    padding:0px 27px;
    ...
}

and reduce the left/right padding.

answered Jul 03 '13 at 18:46

Marc Audet

46,011
11
63
83

I understand that, I've tried reducing the padding and the list fits on all browsers. However, if I do that then there's about 30 pixels of blank space on the right side of the list in Firefox, Windows Chrome etc. I'd really like to avoid that, so basically I'd like to force the font size/weight to be exactly the same on all browsers instead of narrowing it down so much that it looks worse on the browsers on which it fits nicely now. Do your think this is possible? – sveti petar Jul 03 '13 at 18:50
If you are willing to accept CSS3 properties, I would try either `inline-block` or `table-cell` for the `li` elements that are currently `float: left`. However, this will mean a major re-tweak of your styling. Keep in mind that if the user hits ctrl+ on a browser and increases the font size, then your menu could become hard to use with the floats since one or more of the navigation links could wrap onto a second line depending on the user's preferred font-size setting, which you have no control over.. I would go with the `inline-block` or `table-cell` approach. – Marc Audet Jul 03 '13 at 18:54
I guess that would work, but I think it would actually be less tedious to fix the width of all the list elements individually and be done with it... – sveti petar Jul 03 '13 at 18:57
If you are designing a fixed-with page layout, fixing the width of the `li` elements would be a perfectly acceptable way to go. In fact, I would simply fix the width of the `a` tags that use `display: block` and set their width and use `text-align: center` to keep the text centered horizontally. – Marc Audet Jul 03 '13 at 19:06
Yup, it's a fixed-width layout, so that's what I'll do. I'd say it's simple enough and effective too. I was just hoping for a more elegant solution but, alas, IE has thwarted me again. – sveti petar Jul 03 '13 at 19:29

List elements don't fit into give space on IE and MAC's Chrome

2 Answers2