CSS, using bulleted text - Mozilla adds line feed, IE does not.

[Deja Q]

Hello. I am using a CSS document to make a vertical drop-down menu appear.

The problem is, Internet Explorer doesn't add line feeds after the <li>...</li> code whereas Mozilla does. :( This makes navigation difficult in IE.

I know I'm missing the obvious, but what parameter will force line feeds between li tags for IE?

Thanks!



ul {
margin: 0;
padding: 2;
list-style: none;
width: 130px; /* Width of Menu Items */
height: 20px;
}

ul li {
position: relative;
}

ul li ul li a {
display: block;
text-decoration: none;
background: #AA0044;
padding: 3px;
border-bottom: 0;
filter:alpha(opacity=70);
opacity: 0.7;
-moz-opacity:0.7;
}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li ul li a:hover { color: #009944; background: #BB0066; filter:alpha(opacity=95); opacity: 0.95; -moz-opacity:0.95;}
/* Hover Styles */

ul ul {
position:absolute;
display:none;
left: 113px; /* Set 1px less than menu width */
top: 0px;
}

li ul li a { padding: 2px 0px; } /* Sub Menu Styles */

li:hover ul ul, li.over ul ul { display:none; }

li:hover ul, li li:hover ul, li.over ul, li li.over ul { display: block; }

[Berserker]

1. Here is a link

to a forum that will help you. I'm not saying someone here can't, just giving a link to one I use to get help.
http://codingforums.com/index.php?

[Deja Q]

3. Much appreciated - thanks!

Until I get this multibrowser stuff down pat, I've opted to cheat via using xparent gifs to get around the crappiness of IE, I do wish microsoft would grow up and make life easier for developers who use code that works fine on ALL the competition... (my peeps website menu...)

[salvorhardin]

2. white-space: nowrap;

http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop