CODEWITHSUNDEEP
csspositionhtml-lists
Hobby99
Hobby99

Reputation: 703

CSS text of first list item is out of place

I have tried for quite a while but did not get the text of the first list item in place (it is down by a couple of pixels). Its only the text. The li-elem itself is fine (as when hovering over the li-elem it is in correct position).

http://jsfiddle.net/picbig/9W3Gu/1/

Thanks for the help!

HTML:

<div id="lang_cnt">
<div id="lang_head_left">Languages</div><span id="lang_head_right">▼</span>
<div id="lang_body_cnt">
    <ul>
        <li>English</li>
        <li>Deutsch</li>
        <li>Italiano</li>
        <li>Français</li>
        <li>Español</li>
        <li>Português</li>
        <li>русский</li>
        <li>日本</li>
        <li>日本人</li>
    </ul>
</div>
</div>

CSS:

#lang_cnt{
    width: 100px;
    height: 22px;
    float: right;
    background: #2b627f;
    border: 1px solid white;
    color: white;
    cursor: pointer;
}
#lang_head_left{
    width: 65px;
    position: relative;
    float: left;
    padding: 2px 5px;
    font-size: 0.8em;    
}
#lang_head_right{
    width: 15px;
    float: right;
    padding: 2px 8px 2px 0;   
}
#lang_body_cnt{
    position: relative;
    top: 32px;
    border: 1px solid white;
}
#lang_body_cnt ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
#lang_body_cnt ul li{
    height: 10px;
    padding: 3px 0 5px 3px;
    color: #2b627f;
    cursor: pointer;
    font-size: 0.8em;
}
#lang_body_cnt li:nth-child(even){
    background: #2b627f;
    color: white;
}
#lang_body_cnt li:hover{
    background: lightgrey;
    color: white;
}

Upvotes: 0

Views: 54

Answers (1)

sinisake
sinisake

Reputation: 11328

Something like this? 

#lang_body_cnt{
    position: relative;

    border: 1px solid white;
}
#lang_body_cnt ul{
    list-style-type:none;
    margin:0;
    padding:35px 0 0 0;

}
#lang_body_cnt ul li{
    height: 10px;
    padding: 3px 0 5px 3px;
    color: #2b627f;
    cursor: pointer;
    font-size: 0.8em;
   line-height:10px;
    margin:0;
}

JSfiddle: http://jsfiddle.net/9W3Gu/7/ Edit: if you need dots, remove list-style-type: none, of course. Problem was in default margins and paddings - added by browsers, for ul element, if you set it properly (+ line height) it should work fine.

Upvotes: 2

Related Questions