Problems with <li> and spacing

spacing very large between lines in IE

[guod]

I am creating an unordered list on my site with square bullets and have an issue.

The list works perfectly in firefox, but in Internet Explorer 8 the list gets messed up. The list is still in order and lined up, but there is a lot of spacing between each line.

<ul><li type=square>White Gold Rhodium Bonded Vine Motif Bracelet </li><li type=square>Prong Set Clear CZ and Fold Over Clasp </li><li type=square>Silvertone</li></ul>

. It is very basic code and there is nothing special about it. I tried changing the size of actual lines, but that made the info smashed together in firefox and only helping IE a little..

Any ideas? thanks

[Demaestro]

hey guod

Welcome to WebmasterWorld

Try removing the padding from the UL element by adding a style to the UL.

<ul style="padding:0px;"><li type=square>White Gold Rhodium Bonded Vine Motif Bracelet </li><li type=square>Prong Set Clear CZ and Fold Over Clasp </li><li type=square>Silvertone</li></ul>

Also if you want you can remove the type=sqaure from the LI elements by adding that into the style of the UL tag as well.

Like this:


<ul style="padding:0px; list-style:square"><li>White Gold Rhodium Bonded Vine Motif Bracelet </li><li>Prong Set Clear CZ and Fold Over Clasp </li><li>Silvertone</li></ul>

[guod]

I tried your method and it only changes how the firefox bullets display..still not change to IE.

I didnt think that IE used padding, but used something else. Is this correct?

[Demaestro]

Whoops, looks like I missed a semi-colon. IE8 is strict about that.

<ul style="padding:0px; list-style:square;">

Try a class def like this instead. I thought IE used padding but perhaps there is additional padding in the LI elems.

See if this works.


<ul id="my_list"><li></li></ul>


CSS:

#my_list {
padding:0px;
list-style:square;
}

#my_list li {
padding-bottom:0px;
padding-top:0px;
}

[guod]

dang. still doesnt work

[Demaestro]

Make sure you are doing a full refresh when you check

hold ctrl and press F5

[guod]

sadly i tried that.

ill try the css now

[guod]

just tried the CSS. no change. Not sure why. Maybe it is not related to the bullets? or....what could it be?

[Demaestro]

Hmm it is weird.

try removing the margins.


#my_list {
padding:0px;
margin:0px;
list-style:square;
}

#my_list li {
padding-bottom:0px;
margin:0px;
padding-top:0px;
}

[guod]

with your latest CSS code, it really does not change FF too much, but IE still has the spacing and the bullets do not appear on the page. that is because of the padding issue right?

[Demaestro]

Yes it may collapse the element causing the bullets to drop.

I think it may be inheriting something from another element.

[guod]

this is very strange because nothing else is really double spaced or has large spacing around there.

[Demaestro]

the <p> has a line-height:0.75em;

[guod]

i just tried it with a <p> with no style and in FF it get the same spacing that IE gets. This tells me there is something in the area that is giving it the extra spacing...correct?

[piskie]

What document type declaration are you using and does your code validate against that DTD. Firefox is more stringent than IE on this.

[guod]

we really didnt have any declaration..i tried putting html 4.01 strict on top, but it did not change anything. we kind of found a workaround for this by creating a new table, independent of the others. Now with another table on the site, FF will pick up the UL and Square bullets and put the items in a list, where IE will put the info into a paragraph...It will look like this in IE, when it should be a list:

Carat Weight: 3ct Clasp: Contemporary Fashion Material: Lead Free Alloy Plating Color: Rhodium Shiny Product Dimensions: 20mm L x 16mm W x 5mm H Product Weight:4.5 Grams Setting Type: Prong Stone Color:Amethyst / Purple / Clear