<ul> spacing in IE6 - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

<ul> spacing in IE6

sinthetiq

3:21 am on Mar 9, 2007 (gmt 0)

10+ Year Member

<style type="text/css">
#links{background:#B9CAFF;float:left;width:200px}#links ul {margin:0;padding:0;list-style-type:none;width:200px;} 
#links li {border: 1px dotted #999;border-width: 1px 0;margin:5px 0;}
#links li a {color: #990000;display: block;font: bold 120% Arial, Helvetica, sans-serif;padding: 5px;text-decoration: none;}
 * html #links li a { /* ie hack */
width: 200px;margin: 0;padding: 0;}
#links li a:hover {background: #ffffcc;}
#links a em {color: #333;display: block;font: normal 85% Verdana, Helvetica, sans-serif;line-height: 125%}
#links a span {color: #125F15;font: normal 70% Verdana, Helvetica, sans-serif;line-height: 150%;}
</style>
</head>
<body><div id="links">
  <ul>
 <li><a href="#" title="About Me">About Me
    <em>Who am I?</em></a></li> 
  </ul>
</div>

im having trouble figuring out how to make the spacing come out correct in IE6. in FF/Opera, the spacing is fine in the link, but on IE6, there is no spacing, and any padding or margin would mess up the float alignment.

Setek

3:50 am on Mar 9, 2007 (gmt 0)

10+ Year Member

It's because the anchors inside your list items are displayed as block :) IE 6 will place an extra carriage return, which is why it's a good idea to set the

li

s to display inline.

You don't seem to have any overlapping properties from anchor to

li

, so I thought maybe you could combine them:

#links li { [b]display: inline;[/b] }
#links li a { [b]border: dotted #999;
border-width: 1px 0;
margin: 5px 0;[/b]
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none; }

(My changes are in bold, though they're a bit hard to notice :D I wish we could change the colour somehow...)

sinthetiq

8:40 am on Mar 9, 2007 (gmt 0)

10+ Year Member

thanks, that works great for the spacing, but how do i make the text indent? im trying to put these links on a left-side bar. i just want to have the text a little breathing room. hard for me to explain, so i posted a couple screenshots.

thanks again

[edited by: SuzyUK at 9:27 am (utc) on Mar. 9, 2007]
[edit reason] please no URI's or image links thanks [/edit]

Setek

9:18 am on Mar 9, 2007 (gmt 0)

10+ Year Member

Heya, you're not allowed to post screenshots and the like, you can check out the Forum Charter [webmasterworld.com] and the Webmaster World Terms of Service [webmasterworld.com].

As to indenting, you could increase the horizontal padding, so where it says "

padding: 5px;

" you could replace it with:

padding: 5px 10px;

.. or however much space you want.

Now, the reason none of this padding is showing up in IE 6 is probably a little more confusing. It's because of this:

* html #links li a { /* ie hack */
width: 200px;margin: 0;padding: 0;}

I'm guessing the width is to trigger hasLayout, which allows an anchor to be a greater clickable area (what displaying as block is meant to do.)

I'm not so sure why you're removing margin and padding just for IE though...

Remove it and see if that breaks anything?

sinthetiq

6:49 pm on Mar 9, 2007 (gmt 0)

10+ Year Member

oh, i apologize for posting the link =x

i have the padding and margin at 0 because if i take it off, then the floats dont align properly in ie6 =\

sinthetiq

7:55 pm on Mar 9, 2007 (gmt 0)

10+ Year Member

er, it works now that i changed the width of the inline float next to this one.

thanks for the help :)