garry27 Posted June 29, 2011 Share Posted June 29, 2011 Why is my nav menu self indenting itself and how can I fix it and I wont change my code this time <!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=utf-8" /> <title>Reptile Care Guide - Homepage</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Container"> <img src="images/header.gif" width="1000" height="191" alt="Reptile Care Guide" /> <ul id="NavBar"> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="index.html" title="Reptile Care Guide - Homepage">Home</a></div> <div class="rollover-tab-div3"></div> </li> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="bearded-dragon.html" title="Reptile Care Guide - Bearded Dragon">Bearded Dragon</a></div> <div class="rollover-tab-div3"></div> </li> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="corn-snake.html" title="Reptile Care Guide - Corn Snake">Corn Snake</a></div> <div class="rollover-tab-div3"></div> </li> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="green-anole.html" title="Reptile Care Guide - Green Anole">Green Anole</a></div> <div class="rollover-tab-div3"></div> </li> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="leopard-gecko.html" title="Reptile Care Guide - Leopard Gecko">Leopard Gecko</a></div> <div class="rollover-tab-div3"></div> </li> <li> <div class="rollover-tab-div1"></div> <div class="rollover-tab-div2"><a href="blogs.html" title="Reptile Care Guide - Blogs">Blogs</a></div> <div class="rollover-tab-div3"></div> </li> </ul> <div id="TabBar"> </div> <div id="MainContent">Content for id "MainContent" Goes Here</div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ body { background-image: url(../images/bg-tile3.jpg); background-repeat: repeat; } #Container { background-color: #FFF; margin: 0 auto; width: 1000px; } #NavBar { background-image: url(../images/nav-bar.gif); height: 38px; width: 1000px; background-repeat: no-repeat; margin: 0px; text-align: center; } #TabBar { background-image: url(../images/tab-bar.gif); height: 23px; width: 1000px; float: left; } #NavBar ul { margin: 0; padding: 0; float: left; } #NavBar li { display: inline; margin: 0; padding: 0; } .rollover-tab-div1 { height: 36px; width: 10px; float: left; } .rollover-tab-div2 { height: 36px; width: auto; float: left; } .rollover-tab-div3 { height: 36px; width: 10px; float: left; } #NavBar li:hover .rollover-tab-div1 { background-image: url(../images/rollover-menutab-1.1.gif); } #NavBar li:hover .rollover-tab-div2{ background-image: url(../images/rollover-menu-tab-1.2.gif); } #NavBar li:hover .rollover-tab-div3 { background-image: url(../images/rollover-menu-tab-1.3.gif); } #NavBar li a { text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #FFF; font-weight: bold; padding-right: 15px; padding-left: 15px; padding-top: 7px; height: 36px; float: left; } .clear-float{ clear:both; margin:0; padding:0; } #Container #NavBar li div { background-repeat: repeat-x; margin: 2px 0 0 0; padding: 0; } http://www.gigaddict.net/reptilepetcare/index.html Link to comment https://forums.phpfreaks.com/topic/240729-another-horrible-css-thing/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.