newbielearner Posted July 23, 2007 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> Link to comment Share on other sites More sharing options...
S@m Posted July 23, 2007 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/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.