Forum Moderators: open

Message Too Old, No Replies

Problems with <li> and spacing

spacing very large between lines in IE

         

guod

7:27 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

8:06 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

8:09 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

8:37 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

8:40 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



dang. still doesnt work

Demaestro

8:42 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Make sure you are doing a full refresh when you check

hold ctrl and press F5

guod

8:44 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



sadly i tried that.

ill try the css now

guod

8:52 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

Demaestro

8:55 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

8:58 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

9:03 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

I think it may be inheriting something from another element.

guod

9:06 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

Demaestro

9:08 pm on Aug 18, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

guod

9:15 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

11:30 pm on Aug 18, 2010 (gmt 0)

10+ Year Member



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

guod

4:04 pm on Aug 19, 2010 (gmt 0)

10+ Year Member



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