2 replies [Last post]
mattmikulla
Offline
Regular
Last seen: 6 years 39 weeks ago
Joined: 2004-07-06
Posts: 20
Points: 0

My nested lists look fine in everything but windows I.E. 5,6, and 7. I.E. is padding or margining too much vertically. The reason I was using nested lists was to make lists with different bullets, but maintaining a vertically uniform list. Any help appreciated.

http://www.artrogue.com/

html:

<ul class="list_1">
<li>
<ul class="bullet_folder">
<li><a href="http://www.artrogue.com/archive/" rel="nofollow">Archive</a></li>
</ul>
</li>
<li>
<ul class="bullet_feed">
<li><a href="/rss" title="RSS" rel="nofollow">RSS</a></li>
</ul>
</li>
</ul>

css:

.list_1 {
	margin: 0 0 20px 0;
	padding: 0;
	list-style-type:  none;
	}
.list_1 li {
	color: #444;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 0 0 0 15px;
	}
.list_1 li ul {
	margin: 0;
	padding: 0;
	list-style-type:  none;
	}
.list_1 li ul li {
	margin: 0 0 5px -15px;
	padding: 0 0 0 15px;
	}

mattmikulla
Offline
Regular
Last seen: 6 years 39 weeks ago
Joined: 2004-07-06
Posts: 20
Points: 0

Solved.

Here's how I fixed it and how it was explained.

Sometime, when you nest block level elements that have no height or
width values inside elements with no height and width elements, IE gets
a little confused. What I've found is that if you give the offending
element a border, IE suddenly seems to understand the objects boundaries
again. Many times you can just give the object a top border and
everything is good again with IE. That is the case with your li issue.
Put a white top border on your parent li tags and things pop back into
place. Here's my change which fixes your problem:

.list_2 li { border-top: 1px solid #ffffff; margin: 0 0 7px 0; padding: 0 0 0 15px; }

I would use a transparent border but IE 6 makes those black.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9186
Points: 3191

The explanation you received

The explanation you received is purely empiric, and does not address the actual issue. Your fix is one that is known, but it's not one of the more favored. See http://csscreator.com/node/6745

You have a problem with modern browsers. They actually do as you told them. Open your page in a smaller browser window, say 800×600, then scroll to the right. Compliant browsers do not expand the container to enclose content. IE does, quite wrongly. Your culprit is setting the width to 100%. Ultimately, the width is the viewport width, which is smaller than the content. Do not specify a 100% width.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.