CODEWITHSUNDEEP
csswebkit
Justin Force
Justin Force

Reputation: 6342

Why does this text pop to the left in Webkit?

Maybe somebody has seen this before? When you hover over the "First List" and "Second List" text, the text pops a couple pixels to the left. This only happens in Webkit browsers. Tested in Chrome on Linux and Mac, Safari on Mac, and Android browser. Here's the code. I also made a fiddle: http://jsfiddle.net/XzVLt

#navigation {
    line-height:30px;
    height:30px;
    clear:left;
    text-align:left;
    position:relative;
}

#navigation li {
    padding:0 5px;
    margin-left:-1px;
    width:100px;
    text-align:center;
    float:left;
    display:inline;
}

#navigation ul ul {
    display:block;
    position:absolute;
}

#navigation li ul {
    margin-left:-5px;
    padding-right:10px;
}

#navigation li ul li {
    margin-right:-2px;
    text-align:left;
    line-height:15px;
    padding:5px;
    clear:both;
    width:100%;
}

#navigation ul li {
    list-style:none;
}

#navigation ul li {
    float:left;
    list-style:none;
}

#navigation li ul {
    display:none;
}

#navigation li:hover ul {
    display:block;
}

#navigation a {
    font-size: 0.8em;
}

#navigation li li a {
    display:block;
    margin-left:10px;
    text-indent:-10px;
}
​

<div id="navigation">
<ul>
    <li>
        First list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
    <li>
        Second list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
</ul>
</div>​

Upvotes: 1

Views: 149

Answers (1)

Jayx
Jayx

Reputation: 3966

I'm guessing that it has something to do with your margins and padding that comes into play as soon as you change the drop-down from display:none to display:block

I use the suckerfish method for drop-downs; you can easily implement this in your method as well. Just change how you phase in the drop-down content as follows:

Replace ...

#navigation li ul {
    display:none;
}

#navigation li:hover ul {
    display:block;
}

... with ...

#navigation li ul {
    position:absolute;
    left:-999em;
}

#navigation li:hover ul {
    left:auto;
}

Quick tests in Firefox and Safari - it works just fine ... you'll need some JS to create an element to replace the li:hover pseudo or it won't work in IE.

Read more about the method here http://htmldog.com/articles/suckerfish/dropdowns/

Upvotes: 1

Related Questions