Un autre problème de largeur Safari avec CSS

Question

Je fais ce site web http://www.christopherbier.com/gbg/locations.html

dans Safari sur Mac le div de contenu est plus grande en largeur que dans les autres navigateurs. Il chevauche le peu de barre de droite. Je ne suis pas sûr de savoir comment résoudre ce problème. Voici mon 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; 
    } 

et mon 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

Je n'ai pas un mac donc ne peut pas voir, mais quelques points:

votre xhtml est pas valide. center> n'existe pas (et d'après l'apparence des choses n'est pas vraiment nécessaire dans le design), vous devez également spécifier les dimensions de n'importe quelle image d'en-tête dans px.

Je ne sais pas pourquoi vous utilisez la marge automatique sur autre chose que l'emballage principal. Essayez la marge: 0; à la place

essayez d'ajouter * {margin: 0; padding: 0} en haut de votre feuille de style, puis en ajoutant tout padding et toute marge supplémentaire dont vous avez besoin plus tard - cela mettra plus ou moins tous les navigateurs au même point de départ en ce qui concerne la mise en page.

si vous ne voulez pas une utilisation à la frontière {frontière: none} (si vous dites frontière: 0px solide, certains navigateurs toujours essayer de dessiner quelque chose)

Cela pourrait ne pas résoudre le problème , mais ce sera le pas dans la bonne direction car plus votre balisage est le plus facile à trouver pour les navigateurs.

Answer 2

Je ne vois pas le problème dans ma copie de Safari bêta 4, bien que je ne suis pas sûr de ce problème, vous seriez avoir depuis la barre latérale sur la droite est vide et donc je ne sais pas comment je pourrais dire si son chevauchement. Peut-être devriez-vous clarifier le problème exact que vous rencontrez? Pour résoudre le problème et le résoudre vous-même ou poser une question plus spécifique, vous devriez essayer de réduire le problème à l'exemple minimal nécessaire pour voir le problème. Supprimez tout le contenu et la structure qui ne sont pas pertinents pour le problème et assurez-vous que le problème existe toujours. Supprimez tous les CSS qui ne sont pas pertinents au problème et assurez-vous que le problème existe toujours. Ensuite, vous devriez avoir un exemple simple, avec pas plus de 10 lignes chacune de HTML et CSS. Si vous le dépassez assez loin, vous pouvez trouver votre problème dans le processus (si la suppression d'une des lignes de CSS fait disparaître votre problème, alors vous avez trouvé le problème), et si ce n'est pas le cas, vous aurez avoir quelque chose que quelqu'un d'autre sera en mesure de vous donner de meilleurs conseils sans avoir à parcourir tout le code étranger.

Si vous ne parvenez toujours pas à déterminer ce qui ne va pas, essayez l'inspecteur Web dans Safari. Dans Safari 4 beta, vous pouvez aller dans les préférences "Avancées" et choisir "Afficher le menu déroulant dans la barre de menu". Je ne me souviens pas quand exactement cette préférence a été introduite, mais dans les versions antérieures de Safari, vous devriez être en mesure de suivre these instructions pour activer l'inspecteur. Une fois que vous avez fait cela, vous devriez être capable de faire un clic droit (contrôle-clic si vous n'avez pas le bouton droit de la souris) et choisissez "Inspecter l'élément", pour faire apparaître l'inspecteur web. Dans les versions plus récentes de Safari, vous devriez également pouvoir choisir "Afficher Web Inspector" (Commande-Option-I) dans le menu Développement. Cela vous montrera beaucoup d'informations sur votre CSS et comment les métriques sur les éléments fonctionnent, ce qui devrait vous aider à déboguer le problème.