<style> .nav{ padding:10px 0px 10px 0px; margin:0px; width:575px; border:1px solid #003399;} .nav ul{ list-style:none; padding:0px; margin:0px; } .nav li{ display:inline; padding:0px 17px 0px 17px; } .nav li a{ display:inline; padding:0px 17px 0px 17px; } </style> <div class="nav"> <!-- Start of Navigation --> <ul> <li> </li> <li><img src="images/curriculum.png" width="120" height="26" border="0" /></li> <li><img src="images/separator.png" width="5" height="29" /></li> <li><img src="images/fotos.png" width="63" height="26" /></li> <li><img src="images/separator.png" width="5" height="29" /></li> <li><img src="images/video_book.png" width="123" height="26" /></li> </ul> </div> <!-- End of Navigation --> HTML: Whenever i wanted to put a link on the menu buttons padding gets removed. At the moment its working fine in both IE and FF but when make it like: <a><img src="images/curriculum.png" width="120" height="26" border="0" /></a> all the spacing gets disturbed. Please help. thank you
I am sorry, its on my local machine, here is my complete page source code. <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin:0px; padding:0px;} #wrapper{ width:982px; height:694px; margin:0px auto; border:1px solid #009966;} .site_background{background-image: url(images/main_background.png); background-repeat: no-repeat; background-position: center top; height:694px;} .left_section{padding:20px 10px 0px 0px; text-align:right; border:0px solid #009966; width:389px; float:left; } .right_section{margin:0px padding:0px; width:580px; border:1px solid #009966; float:left;} .nav{ padding:10px 0px 10px 0px; margin:0px; width:575px; border:1px solid #003399;} .nav ul{ list-style:none; padding:0px; margin:0px; } .nav li{ display:inline; padding:0px 17px 0px 17px; } .nav li a{ display:inline; padding:0px 17px 0px 17px; } .headingArea{ text-align:right; border:1px solid #003300; padding:33px 37px 0px 0px;} --> </style> </head> <body> <div id="wrapper"><!-- Start of wrapper --> <div class="site_background"> <div class="left_section"> <!-- Start of left side --> <a href="contacto.html"><img src="images/contacto_button.png" alt="Contacto" width="103" height="26" border="0" /></a> </div> <!-- End of left side --> <div class="right_section"> <!-- Start of right side --> <div class="nav"> <!-- Start of Navigation --> <ul> <li> </li> <li><img src="images/curriculum.png" width="120" height="26" border="0" /></li> <li><img src="images/separator.png" width="5" height="29" /></li> <li><img src="images/fotos.png" width="63" height="26" /></li> <li><img src="images/separator.png" width="5" height="29" /></li> <li><img src="images/video_book.png" width="123" height="26" /></li> </ul> </div> <!-- End of Navigation --> <div class="headingArea"> <!-- Heading area start--> <img src="images/contacto.png" width="384" height="93" /> </div><!-- End of Heading area --> </div> <!-- End of right side --> </div> </div><!-- End of wrapper --> </body> </html> HTML:
simply add = .nav img { margin: 0px; padding: 0px; } to kill the img properties prior to the ul / li properties.
for menus you should display inline the LI as you have done but float the A's to the left, and add all styling to the a, so it becomes: .nav li{ display:inline; } .nav li a{ float:left; padding:0px 17px 0px 17px; }