Кроссбраузерность

[Imperil]

http://jsfiddle.net/HJrSb/

При наведении в эксплорере пропадает верхний бордер. Как лечить?

Проверял в IE8

[Yazon_Nile]

Чтобы не лечить такие баги нужно делать правильную верстку.

Бордер не пропадает а режется.

<ul class="nav">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
</ul>

.nav{
    border-bottom: 1px #888899 solid;
    font-weight:bold;
    list-style: none;
    margin:0;
    padding:4px 0 0;
    overflow:hidden;
}
.nav li{
    float:left;
    margin-right:10px;
}
.nav a{
    background: #a5dbf5;
    border: 1px #000 solid;
    border-bottom: none;
    color: #000;
    display:block;
    padding:10px 14px;
    position:relative;
    text-decoration: none;
}
.nav a:hover{
    margin:-4px 0 0;
    padding-top:14px;
}

или, ещё один вариант

.nav{
    border-bottom: 1px #888899 solid;
    font-weight:bold;
    list-style: none;
    margin:0;
    padding:0;
    overflow:hidden;
}
.nav li{
    float:left;
    margin-right:4px;
    padding:4px;
}
.nav a{
    background: #a5dbf5;
    border: 1px #000 solid;
    border-bottom: none;
    color: #000;
    display:block;
    padding:10px;
    position:relative;
    text-decoration: none;
}
.nav a:hover{
    margin:-4px;
    padding:14px;
}

Проверил до ие7 включительно.

Edited February 29, 2012 by Yazon_Nile

[Switch74]

Yazon_Nile +

[Imperil]

Большое спасибо. Очень помогли

Edited February 23, 2012 by Imperil

[Imperil]

Чтобы не лечить такие баги нужно делать правильную верстку.

Бордер не пропадает а режется.

<ul class="nav">
    <li><a href="#"><span>link1</span></a></li>
    <li><a href="#"><span>link2</span></a></li>
    <li><a href="#"><span>link3</span></a></li>
    <li><a href="#"><span>link4</span></a></li>
</ul>

.nav{
    border-bottom: 1px #888899 solid;
    font-weight:bold;
    list-style: none;
    margin:0;
    padding:4px 0 0;
    overflow:hidden;
}
.nav li{
    float:left;
    margin-right:10px;
}
.nav a{
    background: #a5dbf5;
    border: 1px #000 solid;
    border-bottom: none;
    color: #000;
    display:block;
    padding:10px 14px;
    position:relative;
    text-decoration: none;
}
.nav a:hover{
    margin:-4px 0 0;
    padding-top:14px;
}

или, ещё один вариант

.nav{
    border-bottom: 1px #888899 solid;
    font-weight:bold;
    list-style: none;
    margin:0;
    padding:0;
    overflow:hidden;
}
.nav li{
    float:left;
    margin-right:4px;
    padding:4px;
}
.nav a{
    background: #a5dbf5;
    border: 1px #000 solid;
    border-bottom: none;
    color: #000;
    display:block;
    padding:10px;
    position:relative;
    text-decoration: none;
}
.nav a:hover{
    margin:-4px;
    padding:14px;
}

Проверил до ие7 включительно.

Я не до конца понял что режется, почему, и из-за чего? Если не затруднит - объясни поподробнее пожалуйста.

[Yazon_Nile]

Верхний бордер обрезался. По какой именно причине не скажу. Но основная - логика в твоей верстке отсутствует.

Во-первых ссылки у тебя инлаиновые, а ты им верхний и нижние отступы даешь. Ссылки сделаешь блочными - будет все работать, правда не так, как тебе нужно. Но потом доделаешь, думаю по примеру.

[Imperil]

Верхний бордер обрезался. По какой именно причине не скажу. Но основная - логика в твоей верстке отсутствует.

Во-первых ссылки у тебя инлаиновые, а ты им верхний и нижние отступы даешь. Ссылки сделаешь блочными - будет все работать, правда не так, как тебе нужно. Но потом доделаешь, думаю по примеру.

СпасибО!