This has been a perplexing problem to say the least. I’m coding a new site that has a header, horizontal navigation, and the page’s main body. It’s a fixed width site that the navigation needs to line up on the left and right edges of the screen. My screen shots show the right edge in IE8 on XP and Firefox on OS X.
I’ve tried different variations and, ironically, the easiest solution had every browser, including IE, lined up perfectly in XP and Win 7. I varied each link’s width via padding adjustments, and everything worked fine. Unfortunately, when everything worked in Windows, every browser in OS X had the navigation running onto a second line.
As the site designer and I are working in OS X, the current version online displays correctly in Safari and Chrome on OS X, and IE8 in XP due to specific targeting. Most of the remaining browsers are short on the right side and Opera on OS X wraps to two lines. The nearly complete site is at http://www.thewriteplace.biz/midtown/.
So, any suggestions? I tried leaving it so that the Windows’ browsers displayed correctly and then targeting OS X specifically. Unfortunately, I couldn’t find a hack to target a particular OS. The relevant code is copied below with everything available on the site above. I’m using Dreamweaver CS5 with the pages built off of my template for the site.
<div id="masterpage">
<div id="pagearea">
<div id="header"><a href="../index.html"><img src="../assets/images/site/header.jpg" width="924" height="90" alt="Midtown Tire Co."></a></div><!--End Header-->
<div id="nav">
<ul>
<li id="navHome"><a href="../index.html" title="Home">Home</a></li>
<li id="navAbout"><a href="../about.html" title="About Us">About Us</a></li>
<li id="navWheel"><a href="../wheelstires.html" title="Wheels & Tires">Wheels & Tires</a></li>
<li id="navBasic"><a href="../basicmaint.html" title="Basic Maintenance">Basic Maintenance</a></li>
<li id="navExtend"><a href="../extendedmaint.html" title="Extended Maintenance">Extended Maintenance</a></li>
<li id="navRepair"><a href="../repair.html" title="Repair">Repair</a></li>
<li id="navOem"><a href="../oem.html" title="OEM">OEM</a></li>
<li id="navCont"><a href="../contact.html" title="Contact Us">Contact Us</a></li>
</ul>
</div><!--End Nav-->
<div id="main">
<div id="content"><!-- TemplateBeginEditable name="Content" -->Content<!-- TemplateEndEditable --></div>
<!--End Content-->
<div id="mainpic"><!-- TemplateBeginEditable name="MainPic" -->MainPic<!-- TemplateEndEditable --></div>
<!--End Pic-->
</div><!--End Main-->
#masterpage {
width: 960px;
background-image: url(images/site/background.jpg);
background-repeat: no-repeat;
margin: auto;
}
#pagearea {
width: 924px;
margin: 18px;
padding-top: 18px;
}
#header {
width: 924px;
height: 90px;
margin-bottom: 5px;
background-color: #fff;
}
#nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 924px;
float: left;
font-size: 0.9em;
background-color: #fff;
margin-bottom: 5px;
text-align: center;
background-color: #fff;
}
#nav ul {
margin: 0;
padding: 0;
width: 924px;
}
#nav li {
margin: 0;
padding: 0;
float: left;
list-style-type: none;
text-transform: uppercase;
}
#nav a {
float: left;
width: auto;
text-align: center;
color: #ffffff;
background-color: #636466;
padding: 6px 12px 6px 12px;
border-right: 3px solid #ffffff;
}
#nav a:hover {
background-color: #cd3333;
}
/* Specific nav declarations */
#nav #navHome a {
padding: 6px 14px 6px 15px; /* In OS X, 6 13 6 14 */
}
#nav #navAbout a {
padding: 6px 14px 6px 14px; /* Skip in OS X */
}
#nav #navBasic a {
padding: 6px 13px 6px 13px; /* Skip in OS X */
}
#nav #navRepair a {
padding: 6px 13px 6px 13px;
}
#nav #navOem a {
padding: 6px 13px 6px 14px;
}
#nav #navCont a {
padding: 6px 14px 6px 15px; /* Skip in OS X */
border-right: none;
}
/* End nav declarations */