Навигационная панель с некоторыми браузерами

Я борется с проблемой, которая может быть легко разрешима, но поскольку у меня нет большого опыта работы с CSS, я решил обратиться за помощью.Навигационная панель с некоторыми браузерами

Навигационная панель на моем веб-сайте работала отлично, когда я тестировал ее с помощью последних версий Safari, Chrome и Firefox, но некоторые версии, похоже, показывают это немного ошибочно. Даже на смартфоне проблема такая же повсюду - белая линия в правом конце панели навигации. Как его исправить? Кроме того, в некоторых браузерах последняя кнопка на панели навигации была ниже первой кнопки (на следующей строке).

Screenshot of the problem here.

Вот файл CSS:

<style type="text/css"> #Container {} #container { 
    font-family: Arial; 
    width: 804px; 
    background: #fafafa; 
    border-radius: 1px; 
    border: 3px solid #000; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 10px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 6px; 
} 
body { 
    background-image: url("img/bg-light.png") 
} 
.header { 
    height: auto; 
    width: 850px; 
} 
#nav li { 
    float: left; 
} 
#nav { 
    font-family: Arial; 
    width: 850px; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    background-color: #fafafa; 
} 
#nav li a { 
    display: block; 
    padding: 10px 38.4px; 
    text-decoration: none; 
    background-color: #000; 
    color: #FFF; 
} 
#nav li a:hover { 
    color: #000; 
    background-color: #fadd75; 
} 
.tabel { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    border: 1px solid #000000; 
} 
.tabel table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
.tabel tr:last-child td:last-child { 
    border-bottom-right-radius: 0px; 
} 
.tabel table tr:first-child td:first-child { 
    border-top-left-radius: 0px; 
} 
.tabel table tr:first-child td:last-child { 
    border-top-right-radius: 0px; 
} 
.tabel tr:last-child td:first-child { 
    border-bottom-left-radius: 0px; 
} 
.tabel tr:nth-child(odd) { 
    background-color: #fadd75; 
} 
.tabel tr:nth-child(even) { 
    background-color: #fafafa; 
} 
.tabel td { 
    vertical-align: middle; 
    border: 1px solid #000000; 
    border-width: 0px 1px 1px 0px; 
    text-align: left; 
    padding: 7px; 
    font-size: 12px; 
    font-family: Arial; 
    font-weight: normal; 
    color: #000000; 
} 
.tabel tr:last-child td { 
    border-width: 0px 1px 0px 0px; 
} 
.tabel tr td:last-child { 
    border-width: 0px 0px 1px 0px; 
} 
.tabel tr:last-child td:last-child { 
    border-width: 0px 0px 0px 0px; 
} 
.tabel tr:first-child td { 
    background: -o-linear-gradient(bottom, #000000 5%, #000000 100%); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000"); 
    background: -o-linear- gradient(top, #000000, 000000); 
    background-color: #000000; 
    border: 0px solid #000000; 
    text-align: center; 
    border-width: 0px 0px 1px 1px; 
    font-size: 14px; 
    font-family: Arial; 
    font-weight: bold; 
    color: #ffffff; 
} 
.tabel tr:first-child td:first-child { 
    border-width: 0px 0px 1px 0px; 
} 
.tabel tr:first-child td:last-child { 
    border-width: 0px 0px 1px 1px; 
}

И в случае, если HTML нужен - здесь:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<html> 

<head> 
    <title>Carcassonne</title> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 

<body> 
    <div id="header"> 
    <center> 
     <img id="header" src="img/header.png" alt="Carcassonne Logo" class="header"> 
    </center> 
    <ul class id="nav"> 
     <li><a href="index.html" class="button"> 
     Mängust</a> 
     </li> 
     <li><a href="reeglid.html" class="button"> 
     Reeglid</a> 
     </li> 
     <li><a href="laiendused.html" class="button"> 
     Laiendused</a> 
     </li> 
     <li><a href="autorist.html" class="button"> 
     Autorist</a> 
     </li> 
     <li><a href="voistlused.html" class="button"> 
     Võistlused</a> 
     </li> 
     <li><a href="osta.html" class="button"> 
     Ostmine</a> 
     </li> 
    </ul> 
    </div> 
    <div id="container"> 

    Content 
</body> 
</div> 

</html>

Заранее спасибо!

источник

2014-12-14 nolem

не уверен, что это решит проблему, но я замечаю, что вы не очищаете свои поплавки. – PlantTheIdea

Попробуйте это. При использовании плавающих элементов вы должны добавить ширину к элементам, которые вы плаваете. http://jsfiddle.net/02j2Lzfd/. Так что я сделал, взял 6 ли элементов и разделил его на ширину 850 пикселей. Если вы хотите добавить больше li в будущем, просто разделите количество литов, разделенных шириной вашего контейнера.

#nav li { 
    float: left; 
    display: inline-block; 
    width: 141.666px; 
}

источник

2014-12-14 16:40:26 dowomenfart

Это решение получило трюк! Благодарю. – nolem

NO проблема надеюсь, что вы получите объяснение. Пытался объяснить это как можно лучше. – dowomenfart

Test этот хак добавить HTML комментарий после </li>: см: http://jsfiddle.net/7a1x4e4s/

<li><a href="osta.html" class="button"> 
     Ostmine</a> 
     </li><!-- !>

источник

2014-12-14 16:34:40 toto21

Первый дивизион; div id, img id и class all = header. Идентификаторы могут использоваться только один раз на странице и не могут быть вызваны классом. если вы решите сохранить его как id, тогда в css это должно быть #header

Линия, которую вы видите, - это два div над притиром. если вы добавите margin-top:100px; в #container, вы увидите его отдельно.

источник

2014-12-14 16:43:34 csaw

Навигационная панель с некоторыми браузерами

ответ

Смежные вопросы