margin: line-height 1px (IE weirdness)

squaredeye · 2006-05-08 15:54:17

Hey there,

I was recently trying to trim down the css on the nav menu of my site, and thought, hey, what’s that line-height: 1px doing there in the UL, thats weird.

I removed it and the menu expanded as though it had crzy big padding between each list element.

So, hmm. what bug is this? I’m pretty sure there aren’t any parent UL’s that I’m missing that are effecting it?

html in question
<code>
<div id=“menu”>

<ul id=“sections”>
<li><a href=“http://artiswork.org/web” title=“a meager handful of sites I have designed and developed”>web</a></li>
<li><a href=“http://artiswork.org/design” title=“a humble design portfolio”>design</a></li>
<li><a href=“http://artiswork.org/sketchbook” title=“a place for me to think visually”>sketchbook</a></li>
<li><a href=“http://artiswork.org/word” title=“articles, thoughts on web, life, liberti, and the pursuit of weakness”>word</a></li>
<li><a href=“http://artiswork.org/the-goods” title=“stuff I like, and a little blurb about yours truly”>the goods</a></li>
<li><a href=“http://artiswork.org/word/subscribe” title=“get updates by email”>subscribe</a></li>
<li><a href=”#contact-box” title=“contact”>Contact</a></li>
</ul>

</div>
</code>

Style sheet here

whatbrick · 2006-05-08 20:41:08

IE does this because you have an a element (set as block) inside an li element (set as list-item, which is a block element by default). IE7 does not seem to fix this, either. Why it adds the extra spacing, I don’t know, but here are some ways to correct it (according to some tests I’ve run).

Markup Solution:

<ul id="sections">
<li><a href="">web</a></li><li><a href="">design</a></li><li><a href="">sketchbook</a></li><li><a href="">word</a></li><li><a href="">the goods</a></li><li><a href="">subscribe</a></li><li><a href="">Contact</a></li>
</ul>

You are not seeing a goof, that is every li element on the same line. This works, but is not a very appealing solution if you have to view the source of a document.

CSS Solution 1:

#menu li {display: inline;}

This works, and you don’t need to have the list-style-type: none; in your UL rule as the li is no longer a list-item. I haven’t found a downside to this yet, but that doesn’t mean that there isn’t one.

CSS Solution 2:

#menu a {width: 100%}

This works, but be aware that the width will be slightly larger than it was.

Anyways, these worked for me in a test I set up <a href=“http://www.theguruguys.com/samples/listtest.html”>here</a> (view it in IE to see the differences). There are probably more solutions to this, but these are all that I tested (Operav9, FF, IE6, IE7 and Konquerer).

maniqui · 2006-05-08 20:45:21

hi matthew,

maybe it’s also related with this: http://forum.textpattern.com/viewtopic.php?id=12384

squaredeye · 2006-05-09 00:50:09

hey whatbrick,
and manaqui,

You all are often helpful, but this is rediculous. Thanks. I’ll be poking around these ideas and try to learn something.
Cheers!

M

Textpattern CMS

Textpattern CMS support forum

#1 2006-05-08 15:54:17

margin: line-height 1px (IE weirdness)

#2 2006-05-08 20:41:08

Re: margin: line-height 1px (IE weirdness)

#3 2006-05-08 20:45:21

Re: margin: line-height 1px (IE weirdness)

#4 2006-05-09 00:50:09

Re: margin: line-height 1px (IE weirdness)

Board footer