Page 1 of 1

Unordered list in IE7

Posted: Wed Nov 05, 2008 3:53 am
by remkop
Hi,

A strange thing is happening on our page in IE7.
I have an unordered list with list items that contain a <br>.

Now the problem is that in IE7 the bullet is put on the second line of the list item (so after the <br>).
In Firefox this is not a problem, the bullet is shown on the first line and that's what I want.

It has to do with mt CSS (particullary with the 'width' property

Code: Select all

.Race {
    background-color:#FF9933;
    [b]width:450px;[/b]
    padding-bottom:3px;
    padding-top:3px;
    }
There is a test page available http://www.eur-roadrunners.nl/Test/List.html
I use this width property in the real page, which is over here: http://www.eur-roadrunners.nl/Pages/Agenda.php

So if someone has a solution for it...

Note: the <br> is not the problem. If I put a long text in a list Item this problem also arises.

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 3:58 am
by papa
Don't use the padding top and bottom for the li items.

try something like margin-top: 0px and maybe padding-bottom: 3px.

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 4:48 am
by remkop
Thanks,
that is a good tip which i also wanted to change (I've updated the test page)
http://www.eur-roadrunners.nl/Test/List.html

But it doesn't solve te problem

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 4:56 am
by papa
Try margin-bottom: 3px instead of padding?

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 5:04 am
by remkop
I completly removed the padding properties, bit the bullet is still on the bottom of the list item.
Or did you mean replace the width with a margin?? (because the width is causing the problem)

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 5:52 am
by papa
A see that you are using div tags. Skip those and play around with margins and paddings only using the <li> instead.

Re: Unordered list in IE7

Posted: Wed Nov 05, 2008 7:49 am
by remkop
Thank you for the tip.

I've updated the example.
  • Removed the width property form the listitem class
  • Added a margin-right to get a box arround the list item
It works now!!
:D