TheCatapult Posted March 28, 2013 Share Posted March 28, 2013 Hello w3Schoolers, I just want to remove the indent between my <li> but I can't figure it out. Here is my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>School Web</title><style type="text/css">#bodycss {background-color:#7a0026;}#wrapper{margin: 0 auto;width:768px;}.right{float:right}.left{float:left}.logo-banner{width768px;height:576px;background-color:#959595}.upper-navigation{width:768px;height:57px;}ul.navvv{list-style-type:none;margin:0;padding:0;overflow:hidden;}li{text-color:ffffff;} a.navvv{display:block;font-family:Arial;text-decoration:none;}.articles-left-nav{width:768px;height:1000px;} .articles {width:480px; height:1000px; float:left;} .articles-news-header {width:480px; height:37px;} .articles-news-content {width:480px; height:463px; .articles-updates-header {width:480px; height:37px;} .articles-updates-content {width:480px; height:463px; .left-nav { float:right; width:288px; height:1000px;}background-color:#ff00ff;} .subdiv-time {width:288px; height:130px;}</style></head><body id="bodycss"><div id="wrapper"><div class="logo-banner"></div><div class="upper-navigation"><img src="Components/Images/upper-navigation/nav-home.jpg" alt="Home" width="153" height="57"><imgsrc="Components/Images/upper-navigation/nav-about.jpg" alt="About" width="153" height="57"><imgsrc="Components/Images/upper-navigation/nav-download.jpg" alt="Download" width="153" height="57"><imgsrc="Components/Images/upper-navigation/nav-forum.jpg" alt="Forum" width="153" height="57"><imgsrc="Components/Images/upper-navigation/nav-guides.jpg" alt="Guides" width="153" height="57"></div><div class="articles-left-nav"> <div class="articles">Hello</div> <div class="leftnav"><ul class="navvv"><li><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-register.jpg" alt="Register" width="288"height="71"></a></li><li><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-gmprofile.jpg" alt="GM's Profiles" width="288"height="71"></a></li><li><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-shop.jpg" alt="Cash Shop" width="288"height="71"></a></li><li><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-vote.jpg" alt="Vote for us!" width="288"height="71"></a></li></ul></div></div> I also have attached the snip shot of the said problem. Thank you very much! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2013 Share Posted March 28, 2013 by default ul and li have margin, padding, list style and some browsers use text indent, thats why i always reset everything to 0 for a unordered list used for menu .leftnav ul, .leftnav li {padding:0; margin:0; list-style-type: none; text-indent:0;} Link to comment Share on other sites More sharing options...
TheCatapult Posted March 28, 2013 Author Share Posted March 28, 2013 Thanks dsonseuk, but it still does not work. ------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>School Web</title> <style type="text/css">#bodycss {background-color:#7a0026;} #wrapper{margin: 0 auto;width:768px;} .right{float:right} .left{float:left} .logo-banner{width768px;height:576px;background-color:#959595} .upper-navigation{width:768px;height:57px;} ul.navvv{list-style-type:none;margin:0;padding:0;overflow:hidden;text-indent:0;}li.zerotext{text-color:ffffff;text-indent:0;} a.navvv{display:block;font-family:Arial;text-decoration:none;text-indent:0;} .articles-left-nav{width:768px;height:1000px;} .articles {width:480px; height:1000px; float:left;} .articles-news-header {width:480px; height:37px;} .articles-news-content {width:480px; height:463px; .articles-updates-header {width:480px; height:37px;} .articles-updates-content {width:480px; height:463px; .leftnav { float:right; width:288px; height:1000px;}background-color:#ff00ff;padding:0;margin:0;text-indent:0;} .subdiv-time {width:288px; height:130px;}</style> </head> <body id="bodycss"><div id="wrapper"> <div class="logo-banner"></div><div class="upper-navigation"><img src="Components/Images/upper-navigation/nav-home.jpg" alt="Home" width="153" height="57"><img src="Components/Images/upper-navigation/nav-about.jpg" alt="About" width="153" height="57"><img src="Components/Images/upper-navigation/nav-download.jpg" alt="Download" width="153" height="57"><img src="Components/Images/upper-navigation/nav-forum.jpg" alt="Forum" width="153" height="57"><img src="Components/Images/upper-navigation/nav-guides.jpg" alt="Guides" width="153" height="57"></div><div class="articles-left-nav"> <div class="articles">Hello</div> <div class="leftnav"><ul class="navvv"> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-register.jpg" alt="Register" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-gmprofile.jpg" alt="GM's Profiles" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-shop.jpg" alt="Cash Shop" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-vote.jpg" alt="Vote for us!" width="288" height="71"></a></li></ul></div></div> -------------------------------------------- I have noticed also one thing: When I move the highlighted word let's say to this ------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>School Web</title> <style type="text/css">#bodycss {background-color:#7a0026;} #wrapper{margin: 0 auto;width:768px;} .right{float:right} .left{float:left} .logo-banner{width768px;height:576px;background-color:#959595} .upper-navigation{width:768px;height:57px;} .articles-left-nav{width:768px;height:1000px;} .articles {width:480px; height:1000px; float:left;} .articles-news-header {width:480px; height:37px;} .articles-news-content {width:480px; height:463px; .articles-updates-header {width:480px; height:37px;} .articles-updates-content {width:480px; height:463px; .leftnav { float:right; width:288px; height:1000px;}background-color:#ff00ff;padding:0;margin:0;text-indent:0;}ul.navvv{list-style-type:none;margin:0;padding:0;overflow:hidden;text-indent:0;}li.zerotext{text-color:ffffff;text-indent:0;} a.navvv{display:block;font-family:Arial;text-decoration:none;text-indent:0;} .subdiv-time {width:288px; height:130px;}</style> </head> <body id="bodycss"><div id="wrapper"> <div class="logo-banner"></div><div class="upper-navigation"><img src="Components/Images/upper-navigation/nav-home.jpg" alt="Home" width="153" height="57"><img src="Components/Images/upper-navigation/nav-about.jpg" alt="About" width="153" height="57"><img src="Components/Images/upper-navigation/nav-download.jpg" alt="Download" width="153" height="57"><img src="Components/Images/upper-navigation/nav-forum.jpg" alt="Forum" width="153" height="57"><img src="Components/Images/upper-navigation/nav-guides.jpg" alt="Guides" width="153" height="57"></div><div class="articles-left-nav"> <div class="articles">Hello</div> <div class="leftnav"><ul class="navvv"> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-register.jpg" alt="Register" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-gmprofile.jpg" alt="GM's Profiles" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-shop.jpg" alt="Cash Shop" width="288" height="71"></a></li> <li class="zerotext"><a href="default.asp"><img border="0" src="Components/Images/left-navigation/nav-vote.jpg" alt="Vote for us!" width="288" height="71"></a></li></ul></div></div> -------------------------------------------- the menu gets bullets buttons. Why? Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2013 Share Posted March 28, 2013 (edited) .leftnav{float:right;width:288px;height:1000px;} /*wrong*/background-color:#ff00ff;padding:0;margin:0;text-indent:0;} a.navvv{ /*I don't know what this is supposed to target, as there is no anchor link with this class */display:block;font-family:Arial;text-decoration:none;text-indent:0;} Edit: theres more .articles-news-content{width:480px;height:463px;} /*missing*/.articles-updates-content{width:480px;height:463px;;} /*missing*/ Edited March 28, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now