Ive just put a site live for my mrs and ive got a few niggling problems that i could do with a bit of help with, here is the address http://www.alisonkitchen.com/

Problem 1:
the top right navigation is a <ul> floated right in a <div>. the <li>s hold the width and height properties and the <a>s are padded to place the text. In IE6 the hit area is only over the text, where as in IE7+ and FF the hit area is the entire <li>, i have found if you hold these <a>s in floated <div>s you dont get this problem, however <li> tags give you an SEO advantage. is there a way of fixing this?? the code is as follows:

html

Code: Select all

  <div id="nav">
   <ul>
    <li><a href="food_stylist_contact.html" title="contact">contact</a></li>
    <li><a href="food_stylist_portfolio.html" title="portfolio">portfolio</a></li>
    <li><a href="index.html" title="home">home</a></li>
   </ul>
  </div>

css

Code: Select all

#header ul { list-style-type : none; 
position : absolute; 
margin : 0; 
padding : 0; 
right : 23px; 
 
} 
#nav { float : right; 
 
} 
#nav a { display : block; 
background-image : url(../img/link_bg.jpg); 
background-repeat : no-repeat; 
background-position : 0 0; 
text-decoration : none; 
color : #696923; 
margin : 0; 
padding-top : 7px; 
padding-bottom : 20px; 
text-align : center; 
font-size : 14px; 
 
} 
#nav a:hover { background-position : -140px 0; 
 
} 
#nav li { margin : 0; 
padding : 0; 
float : right; 
width : 139px; 
height : 43px; 
 
}

problem 2:
occastionally a blank line appears at the top of the main content box, scrolling or refreshing normally fixes it. Ive tested it on a couple of computers and managed reproduce it. it seems to only occur on the home page.

any ideas??

cheers