PDA

Click to See Complete Forum and Search --> : Shrink List Indent

rpanning
02-17-2004, 02:03 PM
Hi, I'm trying to shrink the list indent size. I seen the other post about removing the indent and whatnot but cannot get it to work right. Here's what I'm basicly using.

<html><head>
<title>Test</title>
<style type="text/css">
ul {
margin-left: -20px;
}
</style>
</head><body>
<ul>
<li>Test</li>
<li>Test</li>
<ul>
<li>Test</li>
<li>Test</li>
<ul>
<li>Test</li>
<li>Test</li>
</ul>
<li>Test</li>
</ul>
<li>Test</li>
<li>Test</li>
</ul>
</body></html>

Now that works great in Firefox but IE 6 seems to take a different approach. It "reverses" the indent so the first item is indented farther than sub lists. It also pushes it off the screen to the left. Hard to explain, give it a try. Dang IE! Anyway, does anyone know a way around this? I'm just trying to get the indent smaller for lists & sublists. Thanks
Aronya1
02-17-2004, 02:21 PM
Originally posted by rpanning
ul {
margin-left: -20px;
}
That's why it's pushed off to the left. I changed that margin to 20 & everything looks fine to me. IE 6.0, Win200Pro

Remove the margin-left altogether & your indents get bigger.
rpanning
02-17-2004, 03:30 PM
Ah...I see. I was thinking it would subtract that number from the default. Ok, well changing that to 20 brings up a few other issues.. IE's left margin seems to start from the left side of the screen instead of the div. Firefox seems to add the 20 px to the default. Not sure whats going on..
Originally posted by Aronya1
I stand ready to be corrected by Pyro (it wouldn't be the first time).
LOL, so true, same here. He knows a lot!