newbielearner 0 Posted July 23, 2007 Report Share Posted July 23, 2007 I have a list of links. They are broken into groups of links. In order to indent the links, I use CSS to format the "list items containing links" as blocks so I can set text indent. it worked for both IE6 and Firefox 2. But I've noticed that if a link includes a space at the end (just before the </a> tag, it messes up the formatting in IE6. The space between that list item and the next list item dissappears. I've included the code below. I've included the ending space in Links Num 2 and Link Num 10. Can anyone please educate me on why this happens? Is this a bug or am I doing something wrong? If so, how can I work around it? Finally, any pointers on a better way to indent the links?Thanks! <!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"><!--#linkList a { text-indent: 2em; display: block;}--></style></head><body><div id="linkList"> <h2>Links</h2> <ul> <li>Link Grounp 1</li> <li><a href="link num 1">link num l</a></li> <li><a href="link num 2">link num 2 </a></li> <li><a href="link num 3">link num 3</a></li> <li><a href="link num 4">link num 4</a></li> <li>Link Grounp 2</li> <li><a href="link num 5">link num 5</a></li> <li><a href="link num 6">link num 6</a></li> <li><a href="link num 7">link num 7</a></li> <li><a href="link num 8">link num 8</a></li> <li>Link Grounp 3</li> <li><a href="link num 9">link num 9</a></li> <li><a href="link num 10">link num 10 </a></li> <li><a href="link num 11">link num 11</a></li> <li><a href="link num 12">link num 12</a></li> </ul></div></body></html> Quote Link to post Share on other sites
S@m 0 Posted July 23, 2007 Report Share Posted July 23, 2007 If you have to have everything in a list, then give this a shot.HTML/CSS <!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 {font-family:"Trebuchet MS";font-size:12px;}ul {list-style-type:none;margin:0;padding:0;}ul li {background-color:#33ccff;border-top:1px solid #fff;font-weight:bold;}ul li a {font-weight:normal;padding-left:10px;}</style></head><body><h2>Links</h2><ul> <li>List One</li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a> <ul> <li>List Two</li> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a> </li></ul></ul><p>...and so on.</p></body></html> Don't forget you can "talk" directly to an element. So, an "li" and an "li a" can have 2 different settings. Keeping that in mind will also help keep your code a lot cleaner in the end.Hope that helps!*edit*Something else that might help you out when it comes to lists:http://css.maxdesign.com.au/ Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.