Еще одна проблема ширины Safari с CSS

Question

Я делаю этот сайт http://www.christopherbier.com/gbg/locations.html

В Safari на Mac div содержимого больше по ширине, чем в других браузерах. Он перекрывает правую боковую панель. Я не уверен, как это исправить. Вот мой css:

#mainwrap {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    background-color:#f0f0f0;
    min-height:200px;
}
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;
}

a{
    color:#335b83;
}
#nav {
    float:left;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    list-style:none;
    border:0px solid #000;
    background-color:#FFF;
}

#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:2em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    font-family:Georgia, "Times New Roman", Times, serif;
}

h3 {
    font-size:1.5em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    color:#335b83;
    font-family:Georgia, "Times New Roman", Times, serif;
    border-bottom: 1px;
    border-bottom-color: #497caf;
    border-bottom-style: dotted;
    border-width: 80%;
}

h4 {
    font-size:1.2em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    color:#999;
    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:left;
    border:0px solid #000;
    width:188px;
    text-align:center;
}

#footer {
    clear:both;
    margin-right:auto;
    margin-left:auto;
}

#footerpre{
background-image: url(images/footerpre.jpg);
background-repeat:repeat-x;
width: 1000px;
height:73px;
border: 0px solid #000;
margin-top:0px;
margin-bottom:0px;
    margin-right:auto;
    margin-left:auto;
}

#footerfin{
    background-image: url(images/footerfin.jpg);
background-repeat:repeat-x;
width: 1000px;
margin-top:0px;
    margin-right:auto;
    margin-left:auto;
}

#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;
    background-image:url(images/phonebg.gif);
    background-repeat:repeat-x;
    height:38px;
}

#content{
    margin-right:auto;
    margin-left:auto;
    background-color:#FFF;
    width:772px;
    min-height:400px;
    float:left;
    margin-bottom: 0px;
    padding: 20px 5px 5px 20px;
    border:0px solid #000;
    color:#333;
}

    #gpbar {
        float:right;
        width:188px;
        padding: 0px 9px 9px 6px;
        min-height:400px;
        background-color:#f0f0f0;
    } 

и мой HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Georgia Buying Group</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainwrap">
 <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="index.html">HOME</a></li>
<li><a href="webuy.html">WHAT WE BUY</a></li>
<li><a href="goldparty.html">GOLD PARTIES</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="locations.html">LOCATIONS</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<div id="asseenbar">
<p id="asseen">Call or Stop By Today!</p>
</div>
</div>
<div id="content">
  <h3>Our Locations
  </h3><br /><br />
  <h2>Acworth   </h2>
  <h4> Cobb County</h4>
    <br />3451 Cobb Parkway Suite 7
    Acworth, GA, 30101 <a href="http://www.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A">View Larger Map</a>

<table cellpadding="5px"><tr>
  <td valign="top" width="325"><iframe width="325" align="left" height="225" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><img src="images/store.jpg" /></td><td width="317" valign="top">
    <u><b>Store Hours:</b></u><br />
    <table><tr><td bgcolor="#EBEBEB"><strong>Sunday</strong></td><td>10a - 6p</td></tr>
   <tr><td bgcolor="#EBEBEB"><strong>Monday</strong></td><td>10a - 6p</td></tr>
   <tr><td bgcolor="#EBEBEB"><strong>Tuesday</strong></td><td>10a - 6p</td></tr>
    <tr><td bgcolor="#EBEBEB"><strong>Wednesday</strong></td><td>10a - 6p</td></tr>
    <tr><td bgcolor="#EBEBEB"><strong>Thursday</strong></td><td>10a - 6p</td></tr>
    <tr><td bgcolor="#EBEBEB"><strong>Friday</strong></td><td>10a - 6p</td></tr>
    <tr><td bgcolor="#EBEBEB"><strong>Saturday</strong></td><td>10a - 6p</td></tr>
    </table><br />
    <u><b>Phone:</b></u> <h2>888-325-1924</h2>
    <br />
<br />
   <u><b>Servicing:</b></u>
  <br /><h4> Acworth, Woodstock, Cartersville,<br /> Marietta, Kennesaw, Roswell,</h4><br />Alpharetta, Canton, Powder Springs, Smyrna, Sandy Springs, Atlanta,  Rome, Ludyville, Rockmart, Lathentown, Sugar Valley</td></tr></table></div>
  <div id="gpbar"></div>
<div id="footer"><p id="footerpre"></p></div></div>
</body>
</html>

Answer 1

У меня нет Mac, поэтому я не вижу, но несколько моментов:

Ваш xhtml недействителен. center> больше не существует (и, судя по всему, в дизайне вообще не нуждается), также вы должны указать размеры любого изображения заголовка в px.

не знаю, почему вы используете margin auto для чего-то кроме основной упаковки. Попробуйте поле: 0; вместо

попробуйте добавить * {margin: 0; padding: 0} в начало таблицы стилей, а затем добавление дополнительных полей и полей, которые вам понадобятся позже - это более или менее установит для всех браузеров одну и ту же начальную точку, когда дело касается макета.

если вам не нужна граница, используйте {border: none} (если вы говорите, что border: 0px solid; некоторые браузеры все равно будут пытаться что-то нарисовать)

Возможно, это не решит проблему, но это будет шаг в правильном направлении, поскольку чем больше допустимая ваша разметка, тем проще браузерам ее находить.

Answer 2

Я не вижу проблемы в своей копии бета-версии Safari 4, хотя я не совсем уверен, с какой проблемой вы столкнетесь, так как боковая панель справа пуста, и поэтому я не уверен, как я могу сказать, если его перекрывают. Возможно, вам стоит уточнить о конкретной проблеме, с которой вы столкнулись?

Чтобы отладить проблему и решить ее самостоятельно, или задать более конкретный вопрос, вам следует попытаться сократить проблему до минимального примера, необходимого для ее просмотра. Удалите все содержимое и структуру, которые не имеют отношения к проблеме, и убедитесь, что проблема все еще существует. Удалите все CSS, которые не имеют отношения к проблеме, и убедитесь, что проблема все еще существует. Тогда у вас должен быть простой пример, содержащий не более 10 строк в HTML и CSS. Если вы урезаете это достаточно далеко, вы можете обнаружить свою проблему в процессе (если удаление одной из строк CSS устранит вашу проблему, то вы нашли проблему), и если это не так, вы есть что-то, что кто-то другой сможет дать вам лучший совет без необходимости разбираться со всем посторонним кодом.

Если вам все еще не удается понять, что происходит, попробуйте воспользоваться веб-инспектором в Safari. В бета-версии Safari 4 вы можете перейти к настройкам «Дополнительно» и выбрать «Показать меню разработки в строке меню». Я не помню, когда именно это предпочтение было введено, но в более ранних версиях Safari вы должны были следовать этим инструкциям , чтобы включить инспектор. Сделав это, вы сможете щелкнуть правой кнопкой мыши (удерживая нажатой клавишу «Control», если у вас нет правой кнопки мыши) и выбрать «Проверить элемент», чтобы вызвать веб-инспектора. В более поздних версиях Safari вы также можете выбрать «Показать веб-инспектор» (Command-Option-I) в меню «Разработка». Это покажет вам много информации о вашем CSS и о том, как работают метрики элементов, что должно помочь вам отладить проблему.