Tutorial :Another Safari width issue with CSS



Question:

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>  


Solution: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.


Solution:2

I don't see the problem in my copy of Safari 4 beta, though I'm not exactly sure what issue you would be having since the sidebar on the right is empty and so I'm not sure how I could tell if its being overlapped. Perhaps you should clarify about the exact problem that you're having?

In order to debug the problem, and either solve it yourself or ask a more specific question, you should try to strip the problem down to the minimal example necessary to see the problem. Remove all of the content and structure that is not relevant to the problem, and ensure the problem still exists. Remove all of the CSS that is not relevant to the problem, and ensure that the problem still exists. Then you should have a simple example, with no more than about 10 lines each of HTML and CSS. If you strip it down far enough, you may find your problem in the process (if removing one of the lines of CSS makes your problem go away, then you've found the problem), and if that's not the case, you'll have something that someone else will be able to give you better advice on without having to wade through all of the extraneous code.

If you are still having trouble figuring out what's going wrong, you should try the web inspector in Safari. In Safari 4 beta, you can go to the "Advanced" preferences, and choose "Show develop menu in menu bar". I don't recall when exactly this preference was introduced, but in earlier versions of Safari, you should be able to follow these instructions to enable the inspector. Once you have done that, you should be able to right click (control-click if you don't have a right mouse button) and choose "Inspect element", to bring up the web inspector. In more recent versions of Safari, you should also be able to choose "Show Web Inspector" (Command-Option-I) from the Develop menu. This will show you a lot of information on your CSS and how the metrics on the elements work, which should help you debug the issue.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »