Home/ Questions/Q 169773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T12:41:25+00:00

I am making this web site http://www.christopherbier.com/gbg/locations.html In safari on mac the content div

  • 0

I am making this web site http://www.christopherbier.com/gbg/locations.html

In safari on mac the content div is larger in width than it is in other browsers. It overlaps the right side bar bit. I am not sure how to fix this. Here is my 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;     }

and my 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I don’t have a mac so can’t see, but a few points:

    your xhtml is not valid. center> doesn’t exist anyomre (and by the looks of things isn’t actually needed in the design anyway), also you shoudl specify the dimensions of any the header image in px.

    don’t know why you’re using margin auto on anything other than the mainwrap. Try margin:0; instead

    try adding * {margin:0; padding:0} to the top of your stylesheet, and then adding in any extra padding and margin you need later – this will more or less set all browsers to the same starting point when it comes to layout.

    if you don’t want a border use {border:none} (if you say border: 0px solid; some browsers will still try and draw something)

    This might not fix the problem, but it will be step in the right direction as the more valid your markup is the easier browsers find it to render.

    • 0