Jump to content

Adding a space messes up CSS formatting in IE6


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...