1 reply [Last post]
FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 47 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

I'm trying to create a three column grid using lists, something similar to dribbble.com site, but I'm having issues with it in IE7 and IE6. I'm using selectivizr to enable the advanced css selectors in IE8 and below (the selectors are being recognized). Clearing the first list item in each row works in most browsers but in IE 6&7 the following list item does not clear the row above. Here is the code that I'm using.

I don't want to set a specific height because each list is going to have a different amount of items in it, and I would prefer to not use tables.

<!doctype html>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
 
<ul class="parts group">
	<li>
		<h3>Axles &amp; Components</h3>
		<ul>
			<li>Tubular &amp; Torsion Axles</li>
			<li>End Units</li>
			<li>Spindles</li>
			<li>Hubs &amp; Drums</li>
			<li>Bearings, Seals &amp; Dust Caps</li>
			<li>Wheel Attaching Hardware</li>
		</ul>
	</li>
	<li>
		<h3>Tires &amp; Wheels</h3>
		<ul>
			<li>Tire &amp; Wheel Assemblies</li>
			<li>Single Wheels</li>
			<li>Dual Wheels</li>
			<li>Spare Tire Carriers</li>
			<li>Accessories</li>
		</ul>
	</li>
	<li>
		<h3>Brakes &amp; Components</h3>
		<ul>
			<li>Electric Brake Assemblies</li>
			<li>Hydraulic Drum Brake Assemblies</li>
			<li>Hydraulic Disc Brake Assemblies</li>
			<li>Brake Replacement Parts</li>
			<li>Breakaway Parts</li>
		</ul>
	</li>
	<li>
		<h3>Brake Control Systems</h3>
		<ul>
			<li>Electric Brake Controllers</li>
			<li>Electric Brake Breakaway Kits</li>
			<li>Hydraulic Surge Brake Actuators</li>
		</ul>
	</li>
	<li>
		<h3>Fenders &amp; Body Components</h3>
		<ul>
			<li>Fenders</li>
			<li>Body Components</li>
			<li>Climate Control</li>
			<li>Trim &amp; Finishing</li>
		</ul>
	</li>
	<li>
		<h3>Marine Components</h3>
		<ul>
			<li>Winches &amp; Accessories</li>
			<li>Bow Stops &amp; Rollers</li>
			<li>U-Bolts</li>
		</ul>
	</li>
	<li>
		<h3>Suspensions &amp; Components</h3>
		<ul>
			<li>Hanger Kits</li>
			<li>U-Bolt Kits</li>
			<li>Springs</li>
			<li>Hardware</li>
			<li>Hangers</li>
			<li>Equalizers</li>
			<li>Heavy Duty Suspensions</li>
		</ul>
	</li>
	<li>
		<h3>Lights &amp; Electrical</h3>
		<ul>
			<li>Clearance Lights</li>
			<li>Stop, Turn &amp; Tail Lights</li>
			<li>Utility Lights, LED</li>
			<li>Lighting Accessories</li>
			<li>Electrical Connectors</li>
			<li>Trailer Wiring Harnesses</li>
			<li>Wiring &amp; Accessories</li>
			<li>Adapters</li>
		</ul>
	</li>
	<li>
		<h3>Security Accessories</h3>
		<ul>
			<li>Coupler Lock</li>
			<li>Receiver Lock</li>
			<li>Gooseneck Lock</li>
			<li>Wheel Lock</li>
			<li>Cargo Door Lock</li>
			<li>Combo Lock Kit</li>
		</ul>
	</li>
	<li>
		<h3>Hardware &amp; Accessories</h3>
		<ul>
			<li>Cargo Control Devices</li>
			<li>Safety Chains</li>
			<li>Pull Tarps</li>
			<li>Tool Boxes</li>
			<li>Mud Flaps</li>
			<li>Latches &amp; Hinges</li>
			<li>Trailer Ramps</li>
			<li>Fasteners</li>
			<li>Load Binders</li>
			<li>Ratchet Straps</li>
			<li>Trucker Chain</li>
			<li>Rope Rings</li>
			<li>E-Track</li>
			<li>D Rings</li>
			<li>Lashing Rings</li>
			<li>Winches</li>
			<li>Motorcycle Wheel Caulks</li>
		</ul>
	</li>
	<li>
		<h3>Jacks &amp; Couplers</h3>
		<ul>
			<li>Screw Jacks</li>
			<li>Drop Leg Jacks</li>
			<li>Landing Gear</li>
			<li>Jack Accessories &amp; Replacement Parts</li>
			<li>Bumper-Pull Couplers</li>
			<li>Gooseneck Couplers</li>
			<li>Draw Bars</li>
			<li>King Pins &amp; Boxes</li>
			<li>Coupler Accessories &amp; Replacement Parts</li>
			<li>Stabilizer Jack</li>
			<li>Jack Foot</li>
			<li>Castor Wheel</li>
		</ul>
	</li>
	<li>
		<h3>Towing Accessories</h3>
		<ul>
			<li>Frame Hitches</li>
			<li>Ball Mounts</li>
			<li>Balls</li>
			<li>Gooseneck Hitches</li>
			<li>Fifth Wheels</li>
			<li>Pintle Hooks</li>
			<li>Weight Distribution</li>
			<li>5th Wheel Gooseneck Adapter</li>
			<li>Anti-Sway Device</li>
			<li>Vehicle Wiring Adapters &amp; Harnesses</li>
			<li>Truck Accessories</li>
			<li>Towing Mirrors</li>
		</ul>
	</li>
</ul>
 
</body>
</html>

.parts > li {
float:left;
width:220px;
margin:0 0 30px 20px;
list-style:none;
}
.parts > li:nth-child(3n + 1) {
clear:left;
margin-left:0;
}
.parts li ul {
padding:10px 0 0 20px;
list-style:disc;
}
.parts li li {
font-size:13px;
margin-bottom:.3em;
color:#3a3a3a;
}

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 47 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Uploaded to a test server to

Uploaded to a test server to make it easier to view what is happening.