Table height changes when I apply CSS style to table text

Hello,

Here is my table without any text formatting:

___________________________
|...Text....|...Text....|...Text....|
|...Text....|...Text....|...Text....|
|...Text....|...Text....|...Text....|

Then, I made a text style using one of the tags with CSS (h3) to change the font and color. When I put it to the text, and now preview the page in a browser, the spacing is much larger, like this:

___________________________
|.............|.............|.............|
|...Text....|...Text....|...Text....|
|________|________|________|
|.............|.............|.............|
|...Text....|...Text....|...Text....|
|________|________|________|
|.............|.............|.............|
|...Text....|...Text....|...Text....|
|.............|.............|.............|

I'm not too great with this... but I made sure the CSS style has no cell padding in the "block" tab. I don't know how else to make it look like the first table (there's too much spacing now!)

So, I want it like this:

___________________________
|...Text....|...Text....|...Text....|
|...Text....|...Text....|...Text....|
|...Text....|...Text....|...Text....|

 

Could you paste the code?

 

Here is the portion for each of the defined tags:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003399;
	padding-left: 20px;
	font-weight: bold;
	line-height: 12px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin: 0px;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #993300;
	padding-left: 20px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #009933;
	padding-left: 6px;
	font-style: italic;
}

Code (markup):

Here's my code for the table:

 <h2>Business:</h2>
  <table width="95%" border="0" cellpadding="0" cellspacing="0">
    </tr>
	    <tr>
      <td width="30%" valign="top"><h1>Products:</h1></td>
    <cfoutput> <td valign="top"><h3>#siteinfo.site_products#</h3></td></cfoutput>    </tr>
    <tr height="1">
      <td valign="top"><h1>Total employees:</h1></td>
    <cfoutput> <td><h3>#siteinfo.site_total_employees#</h3></td></cfoutput>    </tr>
    <tr>
      <td valign="top"><h1>Engineering:</h1></td>
    <cfoutput> <td><h3>#siteinfo.site_engineering#</h3></td></cfoutput>    </tr>
    <tr>
      <td valign="top"><h1>Administration:</h1></td>
     <cfoutput> <td><h3>#siteinfo.site_admin#</h3></td>
     </cfoutput>    </tr>
	    <tr>
      <td valign="top"><h1>Operations:</h1></td>
    <cfoutput> <td><h3>#siteinfo.site_operations#</h3></td></cfoutput>    </tr>
		    <tr>
      <td valign="top"><h1>Maintenance:</h1></td>
    <cfoutput> <td><h3>#siteinfo.site_maintenance#</h3></td></cfoutput>    </tr>
		    <tr>
      <td valign="top"><h1>Other employees:</h1></td>
    <cfoutput> <td><h3>#siteinfo.site_other#</h3></td></cfoutput>    </tr>
  </table>

Code (markup):

 

Well, you're not resetting the margins/padding on h2's or h3's.

Paste that exact line at the top in your stylesheet, it should get rid of the margins the h2's or h3's were given from browser default styles.

 

Thanks! Thanks!

 

Uhm, why are you using header tags inside a table? Shouldn't you just be using TH instead? Of course if ALL that's in the table is 'headers' then you aren't doing headers but data, so you should just be styling the TD directly...

Either way, I am 99.999% certain that header tags have NO PLACE in what you are doing... especially since you seem to have H1's under a H2 immediately followed by a H3 - Header abuse much?

 

Just using the header tags for formatting. I won't be using them for anything else.

Yeah, I could've just assigned a class, or another tag that isn't designated as a header, but doesn't matter for what i'm doing.

 

So you're using the header tags as presentational markup?

Non semantic markup, presentational markup and abuse of header tags doesn't matter?

Have fun with that - and having serious developers laugh at your code.

 

Better to take those <h#>s out and make them table headers. There's no reason why you couldn't style them to look like <h#>s. The power of CSS.

 

Which was my point - you're using markup for presentation instead of following rule #1 - simplify, simplify, simplify.

You've also got HTML parsing inside your CFOUTPUT's for no good reason, that is likely slowing the engine down (my condolances btw on being stuck using coldfusion - I kind of doubt anyone uses that by choice anymore)

Let me put it this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
	xmlns="http://www.w3.org/1999/xhtml" 
	lang="en" 
	xml:lang="en"
><head>

<meta 
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1" 
/>

<title>
	Template
</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}
h2 {
	font:bold italic 16px/18px arial,helvetica,sans-serif;
	color:#093;
	padding-left:0.5em;
}

.businessInfoList {
	table-layout:fixed;
	border-collapse:collapse;
	width:95%;
	font:bold 12px/14px arial,helvetica,sans-serif;
}

.businessInfoList th {
	color:#039;
	padding-left:20px;
	vertical-align:top;
	text-align:left; /* default on th is center */
}

.businessInfoList td {
	vertical-align:top;
	color:#930;
	padding-left:20px;
}


</style>

</head><body>

<h2>Business:</h2>
<table class="businessInfoList">
	<tr>
		<th>Products:</th>
		<td><cfoutput>#siteinfo.site_products#</cfoutput></td>
	</tr><tr>
		<th>Total employees:</th>
		<td><cfoutput>#siteinfo.site_total_employees#</cfoutput></td>
	</tr><tr>
		<th>Engineering:</th>
		<td><cfoutput>#siteinfo.site_engineering#</cfoutput></td>
	</tr><tr>
		<th>Administration:</th>
		<td><cfoutput>#siteinfo.site_admin#</cfoutput></td>
	</tr><tr>
		<th>Operations:</th>
		<td><cfoutput>#siteinfo.site_operations#</cfoutput></td>
	</tr><tr>
		<th>Maintenance:</th>
		<td><cfoutput>#siteinfo.site_maintenance#</cfoutput></td>
	</tr><tr>
		<th>Other employees:</th>
		<td><cfoutput>#siteinfo.site_other#</cfoutput></td>
	</tr>
</table>

</body></html>

Code (markup):

As you can see - you had WAY too much markup for what you were trying to do. The point of CSS is to change the presentation on simple markup WITH the css, not to slap more tags in and THEN apply css to it.

Oh, and semantically the h2 should probably actually be a CAPTION on the table - but being that gecko STILL has it's head firmly wedged up it's ass when it comes to styling CAPTION thanks to it being Nyetscape 4's sweetly retarded cousin, I'd keep the h2 - at least if the h2 is semantically the correct tag to use there (being that it's a sibling to other h2's on the page and/or under a h1)

 

I'm sure you're right. I began teaching myself this code a couple months ago (hence, why I'm posting these questions on this forum!).

So next time, you can be a little more considerate about your comments to newbies. That's what makes people want to continue visiting the forum.

Have fun with that - and having serious developers laugh at your code. 

Code (markup):