Building a grid with ul/li and css...

RIRedinPA · March 26, 2010

I'm trying to build a scrollable grid using css (I know, jquery does it and all that but humor me ).

Anyway, all is fine in FF, Safari, Chrome, etc. etc. on Mac and PC...and of course the problem child is IE...7 and 8 to be exact. Where everything stacks nicely in the other browsers, one row on top of the other, in IE I get staggered rows...so where everyone else looks like this:

item item item item

IE looks like this:

item item item

I've been told by various parties it is because I am:

closing off the <li> tag (which leaves me with invalid HTML)

not including a <p> tag

should get rid of the <div> within the <li> and replace with <p></p>

anyway, here's my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type"  content="text/html; charset=utf-8"/>
	<title>Grid that will work on any browser</title>

	<!--CSS Link-->

	<style type="text/css">

		* { 
			border: 0px;
			margin: 0px;
			padding: 0px;
		}

		html {
			background-color: #eee;
		}

		#main { 
			position: absolute; 
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}

		#content { 
			position: absolute; 
			left: 100px; 
			top: 100px;
			height: 60%;
			overflow-y:  scroll; 
			padding-right: 16px;
		}

		#content ul { 
			list-style-type: none;
		}

		#content li.item {
			float: left; 
			border: 1px solid black;
			width: 120px;
			min-height: 25px;
			max-height: 25px;
		}

		#content li.itemnav { 
			float: left;
			width: 20px;
			height: 25px;
			background-color: #fff;
			min-height: 25px;
			max-height: 25px;
		}

		.row { 
			background-color: #fff;
		}


	</style>

</head>



<body>

	<div id="main">

		<div id="content">

			<div id="header">
				<div id="hitem" class="row">
					<ul>
						<li class="itemnav"><div> </div></li>
						<li class="item"><div style="hcell">Field 1</div></li>
						<li class="item"><div style="hcell">Field 2</div></li>
						<li class="item"><div style="hcell">Field 3</div></li>
						<li class="item"><div style="hcell">Field 4</div></li>
						<li class="item"><div style="hcell">Field 5</div></li>
					</ul>
				</div>
			</div><br />

			<div id="groupwrapper">

				<div id="gitem1" class="row">
					<ul>
						<li class="itemnav"><div>h</div></li>
						<li class="item"><div><input type="text" id="ric1tx1" value="title" /></div></li>
						<li class="item"><div><input type="checkbox" id="r1c1ck2" /></div></li>
						<li class="item"><div><input type="checkbox" id="r1c1ck3" /></div></li>
						<li class="item"><div><input type="checkbox" id="r1c1ck4" /></div></li>
						<li class="item"><div><input type="checkbox" id="r1c1ck5" /></div></li>
					</ul>
				</div><br />

				<div id="gitem2" class="row">
					<ul>
						<li class="itemnav"><div>h</div></li>
						<li class="item"><div><input type="text" id="r2c1tx1" style="item" value="title" /></div></li>
						<li class="item"><div><input type="checkbox" id="r2c1ck2" style="checkbox" /></div></li>
						<li class="item"><div><input type="checkbox" id="r2c1ck3" style="checkbox" /></div></li>
						<li class="item"><div><input type="checkbox" id="r2c1ck4" style="checkbox" /></div></li>
						<li class="item"><div><input type="checkbox" id="r1c1ck5" /></div></li>
					</ul>
				</div><br />
			</div><!--end group wrapper-->
		</div><!--end content-->
	</div><!--end main-->
</body>
</html>

DaiLaughing · March 26, 2010

I agree with them. Fix those problems and maybe it will work. You certainly shouldn't have DIVs inside LIs (block elements are not allowed in in-line elements).

You don't need them - just apply the styles to the LIs - they are boxes as well so you can do anything to them you are doing to the DIVs.

In addition you have:

style="hcell"

in the DIVs. That's not CSS - did you mean class=? If so you then need the matching class in the CSS.

Finally although I am not a CSS guru why don't you use DIVs instead of lists and then just float:left? That's far easier anyway:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  	<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
	<meta name="keywords" content="" />

    <title></title>

<style type="text/css">

	body {
		padding:0;
		margin:0;
		border:0;
	}

	.row {
		height:30px;
		width:500px;
	}

	.cell {
		height:28px;
		width:98px;
		border-width:1px;
		border-style:solid;
		border-color:black;
		float:left;
	}
</style>
        


    </head>
<body>

<div class="row">
<div class="cell">

</div>
<div class="cell">

</div>
<div class="cell">

</div>
<div class="cell">

</div>
<div class="cell">

</div>
</div>

</body>
</html>

JustLikeIcarus · March 27, 2010

just change your .row css to :

.row {
clear:both;
background-color: #fff;
}

That made it work in IE 6 which is the only ie i have available.

haku · March 29, 2010

You shouldn't have the div tags inside the li tags. It's invalid.

RIRedinPA · March 31, 2010

Thanks for the collective replies.

The style/class thing - stupid typo on my part, switching between some javascript and css and my brain got jumbled.

Initially I didn't have divs within the <li> tags but went with some bad advice to try to get it to work.

I now have it working but have new issues which I am going to post in a separate thread, if you get a chance take a peek and let me know where I am going wrong...thanks again.

Sign In

Building a grid with ul/li and css...

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

DaiLaughing

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information