Jump to content

trouble building table with DIVs


bukwus
 Share

Recommended Posts

HelloI'm playing around with a way to build tables that are styled consistently throughout the site, but whose dimensions will be different from page to page. I'm sure there are better ways to do it, just the same I'd like to figure out a couple problems I've run into.In IE what I've done so far looks fine, but in Firefox the DIVs that have nested DIVs inside them are not stretching height-wise to the dimensions of the nested DIVs. In other words they are all compressed at the top of the table which can be seen because of their borders.Also, in both browsers, the background color of the last cell in the top row does not stretch all the way to the right.Check out this link in IE and Firefox for an example:http://www.bdki.com/buzg8.org/nh/ch_sharebuilder.phpHere is the code:

<!-- TABLE -->	<div>		<div class="row">			<div class="cell sBuild head width1">cell</div>							<div class="cell sBuild head width2">cell</div>						<div class="cell sBuild head last width3">cell</div>		</div>				<div class="row">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>				<div class="row">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>				<div class="row last">			<div class="cell sBuild body width1">cell</div>							<div class="cell sBuild body width2">cell</div>						<div class="cell sBuild body last width3">cell</div>		</div>	</div><!-- END TABLE -->

Here are the styles:

DIV {  font-family:verdana,helvetica,arial;  font-size:11px;  line-height:13pt;  font-weight:normal;  color:#000000;  background-color:transparent;  margin:0px;  padding:0px;  margin-top:10px;}.row {	border-style:solid;	border-width:1px;	border-color:gray;	border-bottom:none;	padding:0px;	margin:0px;	width:97%;}.row.last {	border-bottom:solid 1px gray;}.cell {	padding:0px;	margin:0px;	border-right:solid 1px gray;	padding:3px;	margin:0px;	float:left;}.cell.last {	border-right:none;}.cell.head {	text-transform:uppercase;	background-color:#C0C0C0;	font-weight:bold;}.sBuild.body {	min-height:150px;}.sBuild.width1 {	width:17%;}.sBuild.width2 {	width:55%;}.sBuild.width3 {	width:26%;}

Link to comment
Share on other sites

Yes, the main reason why you don't use tables is because they are slow to load, but as your code is it would be quicker just to use tables :) Tables are fine for data, and they have their uses.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...