I’d also suggest axing the COMPLETELY POINTLESS div around the UL. you aren’t applying anything to that DIV you couldn’t be doing on the UL itself.
I WOULD go with a reset because it just makes life easier; just not the ‘universal’ one because as noted, it shtups form elements. The one I prefer is this:
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
Anything more creates problems and is a waste of code, anything less you end up declaring margins/padding on every blasted element, or ripping your hair out wondering what’s wrong with certain elements in certain browsers… or wondering why some people report your layout as broken when you are unable to recreate the problem. Generally I do NOT end up restating the values on the majority of elements, or if I do it’s usually different ones from the default anyways, and using it most always means less CSS than having to say margin:0 padding:0 every blasted time I want to use one of those elements.
Your CSS has a lot of pointless redundancy too – like on your hover state the ONLY thing you need to change are the parts that are DIFFERENT. Since you aren’t changing the width, padding, margins, alignment, decoration or line-height, why are you re-declaring them?!? Likewise I would suggest loading the image on the base anchor and using background-position to hide it, so you don’t have the ‘load delay’ the first time you mouse-over one… and take an axe to ‘bolder’ and just use bold since support for it is inconsistent/non-existent depending on the browser.
So, neuter the markup down to:
<ul id="mainMenu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">OUR SERVICES</a></li>
<li><a href="#">WORKING FOR US</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
Getting rid of that silly DIV – WHY do people keep throwing DIV around UL’s for no good reason?!? Ranks right up there with the <div id=“header” nonsense – or putting a P before a H1 or H2 after a H1 for what should be SMALL inside the H1…
Then for CSS:
#mainMenu {
list-style:none;
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE, also means we don't need to clear! */
background:url(images/nav_bg.jpg) top center repeat-x;
}
#mainMenu li {
display:inline; /* don't even TRY to style these! */
}
#mainMenu a {
float:left;
display:inline; /* prevent IE margin doubling */
margin-right:20px;
padding:14px 20px;
text-decoration: none;
font:bold 13px/14px arial,helvetica,sans-serif;
color:#FFF;
background:url(images/nav_hover.jpg) 0 42px repeat-x;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background-position:0 0;
}
Notice I added :active and :focus for keyboard users… added a fix so you don’t get margin doubling in IE6, avoided the IE7 staircase bug by making the LI display:inline instead of floated and floating the anchor instead, and instead of declaring heights (recipe for disaster) set a short line-height with padding which will provide more consistent placement cross browser. (though I’d up that to 14px font-size as 13px is below usability minimums!)
Though I’d have to see the whole page in question to say for sure – that clear:both made by eyebrows furrow.
