Question

Я создал панель навигации на основе списка для моего нового проекта и добавил две информационные панели с каждой стороны навигации. В Firefox и IE он выходит как угодно, но, как ни странно, Safari работает. Это делает большое пространство между панелью навигации и правой информационной панели.

CSS

body{
    background-color:#4c7094;
    background-image: url(images/bg.gif);
    background-repeat:repeat-x;
    font-size:.9em;
    color:#FFF;
    margin-top:0px;
    font-family: Tahoma, Geneva, sans-serif;
}

#nav {
    float:left;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    list-style:none;
        border:0px solid #000;
}

#nav li { 
    float:left;
    margin: 3px 3px 0px 0px;
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#e7ebf0;
    border:3px double;
    display: inline;
    border-color:#99aabb;
}

#nav a {
    float:left;
    display: block;
    color:#1d4c7b;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#nav a:hover {
    float:left;
    display: block;
    color:#FFF;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    background-color:#5b7290;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#phonebar{
    padding: 0px 6px 9px 6px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:left;
    border:0px solid #000;
    width:15%;
    text-align:center;
}

#asseenbar{
    padding: 0px 9px 9px 6px;
    margin-right: 0px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:right;
    display:inline;
    border:0px solid #000;
    width:19.7em;
    text-align:center;
}

h2 {
    font-size:1.5em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    font-family:Georgia, "Times New Roman", Times, serif;
}

#phone {
    font-size:1em;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family:"Times New Roman", Times, serif;
}

#asseen {
    font-size:.8em;
    margin: 0px 0px 0px 0px;
    padding: 9px 0px 0px 5px;
    text-align:left;
    font-family:"Times New Roman", Times, serif;
}

#menubar{
    clear:left;
    margin-bottom:0px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    height:40px;
}

#content{
    margin-right:auto;
    margin-left:auto;
    background-color:#FFF;
    width:975px;
    height:890px;
    padding: 20px 5px 5px 20px;
    border:0px solid;
    border-color:#4c7094;
    color:#333;
}

HTML:

<body>
 <center> <img src="images/banner.jpg" width="1000" height="72" /></center>
<div id="menubar">
<div id="phonebar">
<p id="phone">888-325-1924</p>
</div>
  <ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">WHAT WE BUY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div id="asseenbar">
<p id="asseen">As seen on CNN and NBC</p>
</div>
</div>
<div id="content">Welcome to Georgia Buying Group</div>
</body>

Я боролся с этим часами и, будучи новичком в CSS, я надеюсь, что кто-то там может мне помочь! Любой совет приветствуется! Спасибо:)

Chris

EDIT: Мой тип документа является переходным:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

извините

РЕДАКТИРОВАТЬ -----------

Я изменил все единицы измерения на пиксели, но проблема все еще обсуждается. Теперь он отлично смотрится на сафари на моем MacBook, но не на сафари на моем компьютере или в Firefox. он просто расширяется настолько, что его толкают на одну строку вниз.

Вот мой CSS:

body{
    background-color:#4c7094;
    background-image: url(images/bg.gif);
    background-repeat:repeat-x;
    font-size:.9em;
    color:#FFF;
    margin-top:0px;
    font-family: Tahoma, Geneva, sans-serif;
}

#nav {
    float:left;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    list-style:none;
    border:0px solid #000;
}

#nav li { 
    float:left;
    margin: 3px 3px 0px 0px;
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#e7ebf0;
    border:3px double;
    display: inline;
    border-color:#99aabb;
}

#nav a {
    float:left;
    display: block;
    color:#1d4c7b;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#nav a:hover {
    float:left;
    display: block;
    color:#FFF;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    background-color:#5b7290;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}



h2 {
    font-size:1.5em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    font-family:Georgia, "Times New Roman", Times, serif;
}


#phonebar{
    padding: 0px 6px 9px 6px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:left;
    border:0px solid #000;
    width:120px;
    text-align:center;
}

#asseenbar{
    padding: 0px 9px 9px 6px;
    margin-right: 0px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:right;
    display:inline;
    border:0px solid #000;
    width:326px;
    text-align:center;
}

#phone {
    font-size:1em;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family:"Times New Roman", Times, serif;
}


#asseen {
    font-size:.8em;
    margin: 0px 0px 0px 0px;
    padding: 9px 0px 0px 5px;
    text-align:left;
    font-family:"Times New Roman", Times, serif;
}

#menubar{
    clear:left;
    margin-bottom:0px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    height:40px;
}

#content{
    margin-right:auto;
    margin-left:auto;
    background-color:#FFF;
    width:975px;
    height:890px;
    padding: 20px 5px 5px 20px;
    border:0px solid;
    border-color:#4c7094;
    color:#333;
}

Его можно найти здесь;

http://www.christopherbier.com/gbg

Любая помощь приветствуется !!!

mercator · Answer 1 · 09 апреля 2009

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

Я думаю, что вам лучше всего установить это phonebg.gif изображение в качестве фона для всего элемента #menubar вместо левой и правой его частей, а затем добавить белый фон на #nav.

Таким образом, вам вообще не нужно будет устанавливать ширину для этого правого элемента (или, по крайней мере, не такую ширину, которая должна быть настолько точной, чтобы убедиться, что 3 части точно соответствуют всей ширине). 1008 *

inspite · Answer 2 · 09 апреля 2009

У меня нет Safari, поэтому я не могу проверить (хотя я использую Chrome), но проблема, вероятно, исходит от

#phonebar {
    padding: 0px 6px 9px 6px;
    width:15%;
} 

#asseenbar{
    padding: 0px 9px 9px 6px;
    width:19.7em;
} 

#nav li { 
    margin: 3px 3px 0px 0px;
    border:3px double;
}

#nav a {
    padding: 5px 15px 5px 15px;
}

Старайтесь использовать единообразные единицы измерения (т. Е. Пробуйте все пиксели, и, когда вы все сделаете правильно, вы можете возиться с%, если вы чувствуете себя смелым) и убедитесь, что сумма ширин ваших столбцов - не превышает ширину контейнера div #menubar.

Кроме того, вы должны указать DOCTYPE или вы получите проблемы между различными браузерами. Если вы не объявляете определенный docType правильно, браузер посетителей должен «угадать» (обычно применяя самый простой из возможных docType или собственный docType в режиме «причуд»), что приводит к более медленному отображению.

Если вы не укажете DOCTYPE, у вас могут возникнуть проблемы.

Проблемы с пространством CSS в Safari?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Проблемы с пространством CSS в Safari?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов