Unordered list in IE7

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
remkop
Forum Newbie
Posts: 4
Joined: Wed Nov 05, 2008 3:15 am

Unordered list in IE7

Post 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.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Unordered list in IE7

Post 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.
remkop
Forum Newbie
Posts: 4
Joined: Wed Nov 05, 2008 3:15 am

Re: Unordered list in IE7

Post 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
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Unordered list in IE7

Post by papa »

Try margin-bottom: 3px instead of padding?
remkop
Forum Newbie
Posts: 4
Joined: Wed Nov 05, 2008 3:15 am

Re: Unordered list in IE7

Post 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)
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Unordered list in IE7

Post by papa »

A see that you are using div tags. Skip those and play around with margins and paddings only using the <li> instead.
remkop
Forum Newbie
Posts: 4
Joined: Wed Nov 05, 2008 3:15 am

Re: Unordered list in IE7

Post 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
Post Reply