CODEWITHSUNDEEP
htmlcssinternet-explorer-7internet-explorer-6css-float
Prabu
Prabu

Reputation: 4187

A list inside a floating div

So I am laying out a div. Inside this outer div there are 4 more divs, as below. 

-----------------------------------
.      div 1      .               .
...................   div 2       .
.                 .               .
.   div 3         .               .
.   (ul list 1)   .               .
.                 .               .
...................................
.                                 .
.                                 .
.           div 4                 .
.           (ul list 2)           .
.                                 .
...................................

The outerdiv has padding 20px. My problem is the bullets of the lists are being indented left about 20px in IE6 and about 10px in IE7. This is so weird and I cannot figure out what's going on. Everything looks fine in IE8 and FF2+.

Does anyone have any idea?? I know my description might be missing some details, so please ask and I'll try to clarify. Cheers in advance.

Edit: Html example

<div style="padding: 20px;">
    <div style="float: left;">
        div 1
    </div>
    <div style="float: right;">
        div 2
    </div>
    <div style="float: left;">
         <ul>
           <li>List item 1</li>
           <li>List item 2</li>
         </ul>
     </div>
 <div>

I just tried adding display:inline to the style of the ul, and the bullet points appear in IE6, but the formatting is ugly. It looks like this:

 .Some text after the bullet point 
 is indented under unlike ff

But looks like this in FF.

 .  Some text after the bullet point
    is indented under unlike ff

Upvotes: 1

Views: 1032

Answers (3)

ignacioricci
ignacioricci

Reputation: 1276

Did you try:

list-style:disc inside;

?

Upvotes: 1

Alan Whitelaw
Alan Whitelaw

Reputation: 16880

This could be Double Floated Margin bug But you would need to provide a html example.

Upvotes: 0

theazureshadow
theazureshadow

Reputation: 10049

Where bullets end up is generally defined by the padding-left of the ul. They are placed to the left of the box of the list item. Set a consistent padding-left and margin-left, and it should work. You might also have to worry about the padding-left and margin-left of the li elements.

Upvotes: 0

Related Questions