List Items :: Help with Mozilla

[jwboyte]

I could really use some help. I've been playing with CSS now for a while, but I have some knowledge gaps. The thing(s) that are making my hair gray right now are the following:

I'm using list items without bullets for a list of news headlines, but Mozilla insists on indenting each item, even though I set the margins to 0, indents, etc:

list-style : none outside none;
list-style-type : none;
list-style-image : none;
margin-left : 0px;
margin-right : 0%;
word-spacing : normal;
display : inline;
text-indent : 0%;
padding: 6px;
text-decoration : none;
margin : 0px;
width : 100%;
line-height : normal;

I can get it to work using the "inline" setting for the display property, but would like to use the "block" to take advantage of some spacing and other display tricks. When using "block", it looks great in IE, but gets pushed over at least 15pxs in Mozilla. Any clue how to get this to line up flush on the left?

Also, Is there a property to control the spacing of the line items in general?

Many thanks to anyone who can help!! :cool:

JB

[ray326]

Some browsers use margin, some use padding, YOU have to set both to zero to eliminate the indent in all browsers.

[kelly23]

Also, Is there a property to control the spacing of the line items in generalli {line-height: 30px}

The default is about 20px.

[jwboyte]

Cool - That helped, though I'm not sure how. I think maybe I had a typo in one of the properties, but fiddling with it seemed to do the trick.

Any idea on my second question - that of a way to add space between list items without having to do all sorts of tricks? Line height I don't want to mess with.

Again, thanks!

[jwboyte]

<quote>li {line-height: 30px}

The default is about 20px.
Reply With </Quote>

Sorry for the short messages, I need to be more specific: The list items i have need to scroll, so I'd like the text of each item to group naturally, with some space between each item, so instead of looking like:

list item number one that
scrolls
list item number two that
scrolls

It would look more like this, but with the ability to space it appropriately:

list item number one that
scrolls

list item number two that
scrolls

Does that make sense? I appreciate the help!

[jwboyte]

an addendum to my last post:


expanding the line height would make it look like this:


list item number one that

scrolls

list item number two that

scrolls

[kelly23]

How about margin-bottom: 20px;
vertical-align: top

[jwboyte]

BEAUTIFUL!!!

Thanks a lot - really appreciate it, Kelly23!

[kelly23]

You're welcome! :)