1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Table height changes when I apply CSS style to table text

Discussion in 'CSS' started by lespaul00, Feb 11, 2008.

  1. #1
    Hello,
    SEMrush
    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....|
     
    lespaul00, Feb 11, 2008 IP
    SEMrush
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #2
    Could you paste the code?
     
    soulscratch, Feb 11, 2008 IP
  3. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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):
     
    lespaul00, Feb 11, 2008 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #4
    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.
     
    soulscratch, Feb 11, 2008 IP
    lespaul00 likes this.
  5. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks! Thanks!
     
    lespaul00, Feb 11, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,535
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #6
    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?
     
    deathshadow, Feb 11, 2008 IP
  7. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    lespaul00, Feb 16, 2008 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,535
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Feb 16, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    Stomme poes, Feb 18, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,535
    Likes Received:
    1,934
    Best Answers:
    247
    Trophy Points:
    515
    #10
    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)
     
    deathshadow, Feb 18, 2008 IP
  11. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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):
     
    lespaul00, Feb 19, 2008 IP