Hi friends , In my Navigation an image (bgDIVIDER) is not appearing . Secondly I want to align it to the center of my Navigation. The site is online here at Geocities. http://www.geocities.com/sindhjisada Any kind of help will be appriciated . Thanks Html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title><<--Home Page-->></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://localhost/upload/sample.css); --> </STYLE> </head> <div id="container"> <div id="header"><h1>English Literature</h1> </div> <div id="nav"> <ul id="saturday"> <li><a href="" title="index.html"class="current">Home</a></li> <li><a href="about.html"> About </a></li> <li><a href="downloads.html"> Downloads</a></li> <li><a href="intrest.html"> Intrests </a></li> <li><a href="contact.html"> Contact me</a></li> </ul> </div> <div id="leftmnu"><h3>M.A English I</h3> <ul> <li><a href="#"> I.Drama </a></li> <li><a href="#"> II.Classical Poetry</a></li> <li><a href="#"> III.Romantic Poetry </a></li> <li><a href="#"> IV.Prose</a></li> </ul> <h3>M.A English II</h3> <ul> <li><a href="#"> I.Literary Criticsm </a></li> <li><a href="#"> II.Western Literature</a></li> <li><a href="#"> III.fiction </a></li> <li><a href="#"> IV.Literary Essays</a></li> <li><a href="#"> V.Viva Voice</a></li> </ul> </div> <div id="content"><h2> This is My Home Page</h2> <p><a href="http://geocities.yahoo.com/gb/view?member=sindhjisada">Guest Book Sindh ji Sada</a> </p> </div> <div id="rightmnu"><h3>Recent Articles</h3> <ul> <li><a href="#"> I.Literary Criticsm </a></li> <li><a href="#"> II.Western Literature</a></li> <li><a href="#"> III.fiction </a></li> <li><a href="#"> IV.Literary Essays</a></li> <li><a href="#"> V.Viva Voice</a></li> </ul> </div> <div id="footer"><h3>Copyright@Jdchanna@gmail.com</h3></div> </div> <body> </body> </html> CSS Code: /* CSS Document */ * { padding: 0; margin: 0; } body{ font-family: Arial , Helvetica , sans-serif; font-size: 13px; } #container{ margin: 0px auto; width: 779px; background-color: silver; } #header{ float: left; width: 779px; height: 70px; margin: 0; padding: 0; background: #ccc; color: #333; } #nav{ float: left; width: 779px; margin: 0px; height: 30px; padding: 0; } /* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */ ul#saturday{ margin: 0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; background:transparent url("images/bgOFF.gif") repeat-x top left; font-family:Helvetica,Arial,Verdana,sans-serif; border-bottom:4px solid #336666; border-top:1px solid #C0E2D4; } ul#saturday li{ display:block; float:left; margin:0; pading:0; } ul#saturday li a{ display:block; float:left; color:#874B46; text-decoration:none; padding-top:12px; padding-right: 40px; padding-bottom: 0; padding-left: 20px; height:30px; background-image: url("images/bgDIVIDER.gif") no-repeat top right; } ul#saturday li a:hover{ background:transparent url("images/bgHOVER.gif") no-repeat top right; } ul#saturday li a.current,ul#saturday li a.current:hover{ color:#fff; background:transparent url("images/bgON.gif") no-repeat top right; } /* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */ #leftmnu{ float: left; width: 150px; height: 400px ; margin: 0px; padding: 0px; background: #ccc; displat: inline; } #content{ float: left; width: 478px; height: 400px ; margin: 0px; padding: 0px; background: #fff; color: #333; } #rightmnu{ float: left; width: 150px; height: 400px ; margin: 0px; padding: 0px; background:#ccc; color: #333; display: inline; } #footer{ width: 779px; height: 25px; clear: both; margin: 0px; padding: 0px; background: #999; color: #333; } #footer h3{ font-size: 14px;}
Looks to me like it is working, which browser is this happening it? Can you give more of a description of what you want? Maybe i can help then