Page 1 of 1

width ok in all browsers apart from safari, im using 3.2.2

Posted: Fri Apr 17, 2009 1:13 pm
by djjamiegee
hi all i have just started a website for my company and put an inline navigation at the top made of pure css. it works fine on all browers apart from safari, the last <li> which has a class set to .solar i have had to set the width fot it to line up the way i want it and it lines up with the main wrapper on all browsers apart from safari where it over hangs by around 3-4 pixels.

any suggestions????

Code: Select all

<!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>Enviroglaze | Quality Windows Doors Rooflines and Conservatories</title>
<link href="enviro.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="headerContainer"><img src="enviroheadersmall.jpg" width="1000" height="130" /></div>
<div id="MainNav">
  <ul>
    <li><a href="" class="selected">Home</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Our Products</a>
      <ul>
        <li><a href="">Windows</a></li>
        <li><a href="">Doors</a></li>
        <li><a href="">Roofline</a></li>
        <li><a href="">Conservatories</a></li>
      </ul>
    </li>
    <li><a href="">Offers</a></li>
    <li><a href="">Installations</a></li>
    <li><a href="">Advice</a></li>
    <li><a href="">Testimonials</a></li>
    <li><a href="">FAQ's</a></li>
    <li><a href="">Contact</a></li>
    <li class="solarnav"><a href="">Enviro Solar</a></li>
  </ul>
</div>
<div id="wrapper">
  <div id="maincontectbox">
    <div id="mainpicturebox">
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="652" height="320">
        <param name="movie" value="Untitled-2.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>

 
-->
        <object type="application/x-shockwave-flash" data="Untitled-2.swf" width="652" height="320">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>

 
-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
    <div id="mainnavboxestop"><img src="springsavings.jpg" width="338" height="100" alt="Fantastic spring savings"/></div>
    <div id="mainnavboxesmiddle"><img src="onlineappointment.jpg" width="338" height="100" alt="Arrange an appointment online"/></div>
    <div id="mainnavboxesbottom"></div>
  </div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Code: Select all

@charset "utf-8";
/* CSS Document */
 
 
body {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:18px;
    color:#000;
    width:100%;
    text-shadow: #000000 0 0 0px;
}
#wrapper {
    width:100%;
    margin:0px auto 0 auto;
    padding:10px 0 0 0;
    float:left;
    background:#fff;
    height:auto;
}
#headerContainer {
    text-align: center;
    padding: 0px;
    width: 100%;
    min-height: 150px;
    height: auto !important;
    height: 150px;
    margin:17px auto 0;
    background:#fff;
}
#MainNav {
    width:1000px;
    margin:0px auto 0px auto;
    padding:0;
}
#MainNav ul {
    margin:0 auto;
    padding:0;
    list-style:none;
    width:1020px;
}
#MainNav li {
    padding:0px;
    border:0px solid #000;
    margin:0 6px 0 0;
    background:url(navbg.jpg);
    float:left;
    width:auto;
    display:inline;
}
#MainNav li a {
    display:block;
    margin:0;
    padding:9px 17px;
    color:#ffc;
    text-decoration:none;
    text-align:left;
font-weight:;
}
#MainNav li a:hover {
    text-decoration:none;
    background:url(navbghover.jpg);
    color:#333;
}
#MainNav .selected {
    background:url(navbghover.jpg);
    color:#000;
}
#MainNav .solarnav {
    background:url(solarbgunder.jpg);
    display:block;
    text-decoration:none;
    color:#fff;
    margin:0;
    padding:0;
    float:left;
    width:141px;
}
#MainNav ul ul {
    width:130px;
    display:none;
    float:left;
    background-color:#b84847;
    z-index:1;
    padding:0;
    margin:0;
}
#MainNav ul li:hover ul {
    display:block;
    position:absolute;
}
#MainNav ul ul li {
    float:left;
}
#MainNav ul ul li a {
    background:url(navbg.jpg);
    display:block;
    font-size:14px;
    text-align:left;
    width:130px;
    padding:10px 0 10px 15px;
    border-top:1px solid #fff;
    color:#ffc;
}
#MainNav ul ul li a:hover {
    background:url(navbghover.jpg);
    color:#000;
}
#maincontectbox {
    width:1000px;
    margin:0 auto 10px auto;
    padding:0px;
}
#mainpicturebox {
    width:652px;
    margin:0 10px 0 0;
    padding:0px;
    height:320px;
    float:left;
}
#mainnavboxestop {
    width:338px;
    margin:0 0 10px 0;
    padding:0px;
    height:100px;
    float:left;
}
#mainnavboxesmiddle {
    width:338px;
    margin:0 0 10px 0;
    padding:0px;
    height:100px;
    float:left;
}
#mainnavboxesbottom {
    width:338px;
    margin:0 0 10px 0;
    padding:0px;
    height:100px;
    float:left;
}
#mainnavboxescontainer {
    width:340px;
    margin:0;
    padding:0;
    float:right;
    background:#000;
}