Link to home
Start Free TrialLog in
Avatar of Jason Minton
Jason MintonFlag for United States of America

asked on

CSS UL has different left indent in FF and IE7

ul has different left indent in FF vs IE.  In this case it looks correct in IE7 but has too much indent in FF.

Refer to the left list items and note the added indention in FF.
http://momsclub-dh.org/index.php?option=com_frontpage&Itemid=1

The ul and li css are:
ul { margin: 0px 0px 0px 20px; }
li { list-style: square; }

I've already tried adjusting the margin and if i change the left from 20px to 0px, it looks ok in FF but in IE7 the bullets overlap into the <td> to the left.

The container for this list is a table:
<table border="0" cellspacing="0" cellpadding="0" width="98%" style="padding: 0px; margin: 0px; spacing: 0px;">
   <tr>
      <td style="border: dashed 1px #0aa;">

I added the border's just for debugging...

I can't seem to get it to look the same for IE and FF.  I considered that there was some default padding or margins in one browser and not the other, but I've tried setting everything to zero and still get the same results.

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of oceanbeach
oceanbeach

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
usually, this sort of problem can be fixed by initializing all the margins, borders, and paddings to zero.
Avatar of oceanbeach
oceanbeach

Hello jasonsbytes,

Or a better idea, set the padding to 0 and adjust from there.

-OB
Sorry JamesCssl, I type slow...
Avatar of Jason Minton

ASKER

Hey guys!

JamesCssl: I tried that first as noted in the original post and no change.  Good thought though; that was my first thought too, but didn't work... :|
   "I can't seem to get it to look the same for IE and FF.  I considered that there was some default padding or margins in one browser and not the other, but I've tried setting everything to zero and still get the same results."

Oceanbeach:  Your first solution worked perfect...  That's very odd...  I went with 5px instead of 20 on the padding and that worked...  The strange part is that setting the padding only affected FF and not IE...
UL
{
   MARGIN: 0px 0px 0px 20px;
   padding-left: 5px;
}

Thanks !
Hi jasonsbytes,

That is strange...  Setting the UL padding to 0 seemed to 'zero' everything out for me.  I wonder why we seemed to get different results? Also,  I guess I  just picked 20px because of the margin.

I wish I could provide some more insight, but I am just glad I could help out!

-OB