SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TD width is being ignored

    I'm having trouble with TD widths. They seem to be being ignored. I have some code like this:
    Code:
    <table align="center">
    	<tr>
    		<td align="center"><img src="../images/spacer.gif" width="1" height="5" alt="" class="bg-spacer" /></td>
    
    	</tr>
    	<tr> 
    		<td valign="top" class="text-msg-info">
    			This is a message.
    	</td>
    	</tr>
    	<tr>
    		<td align="center"><img src="../images/spacer.gif" width="1" height="5" alt="" class="bg-spacer" /></td>
    	</tr>
    </table>
    
    and the css for text-msg-info is:
    
    .text-msg-info {
    	background-color	: #FFEBCB;
    	border		: 1px solid #F98537;
    	color			: #C00000;
    	font-style		: italic;
    	padding		: 5px;
    	text-align		: center;
    	width			: 80%;
    }
    but the TD is always the full width of the table instead of 80% of the table's width.

    Could anyone suggest how I could get this working, please?

    Debbie
    QuicknEasySalesPro.com
    - your quick and easy, yet powerful solution for managing your
    membership site sales, downloads and affiliates.

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh...

    Well if you insist on using tables, you might as well go all out and just use a width="" attribute on your cell. Forget the CSS. It's not gaining you much of anything unless you actually decide to do your layout all in CSS (as you should). If you're gonna mix, might as well not do it at all.
    Aaron Brazell
    Technosailor



  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,182
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    table cell width

    Sketch has a point.
    I think different browsers render different elements in different order. In other words, the browser my define an element's size and position and then "force" following elements into the page structure. Using tables for structure may be "easier" then figuring out css, but can really cause problems cross-browser-wise.
    Do yourself a favor and take the time to learn how to use css.
    Play with it until it's broken, fix it, play some more, etc. etc. When your site needs to be modified in the future you will be glad you can tweak it instead of rewriting everything.
    IMHO I suggest replacing your table structure with divs for block sections and spans for inline. Give them class or id names and put the styles into a referenced css file, or at least in the head's style tags.
    Last edited by Mittineague; Jul 17, 2005 at 00:49.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    one td is always 100% width of a table, so you need min. 2 td's

    80% of what ? screen ? table width ?

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	.tablea{width:400px;}
    	
    	.text-msg-info {
    	background-color	: #FFEBCB;
    	border		: 1px solid #F98537;
    	color			: #C00000;
    	font-style		: italic;
    	padding		: 5px;
    	text-align		: center;
    	width			: 80%;
    	}
    	</style>
    </head>
    <body>
    <table align="center" border="1" class="tablea">
    	<tr>
    	<td>&nbsp;</td><td align="center"><img src="../images/spacer.gif" width="1" height="5" alt="" class="bg-spacer" /></td><td>&nbsp;</td>
    	</tr>
    	<tr> 
    	<td>&nbsp;</td><td valign="top" class="text-msg-info">This is a message.</td><td>&nbsp;</td>
    	</tr>
    	<tr>
    	<td>&nbsp;</td><td align="center"><img src="../images/spacer.gif" width="1" height="5" alt="" class="bg-spacer" /></td><td>&nbsp;</td>
    	</tr>
    </table>
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TD width is being ignored - solution

    Found the solution at last. Thought I'd let you all know:

    One TD always takes up 100% of a table's width, so you need at least 3 TDs to achieve this - the two outer ones just to ensure the middle one is centered:
    Code:
    <table align="center" border="1">
    <tr>
    	<td>&nbsp;</td>
    	<td valign="top" class="text-msg-info">
    		This is a message.
    	</td>
    	<td>&nbsp;</td>
    </tr>
    </table>
    Hope that helps anyone who has a similar problem.

    Debbie
    QuicknEasySalesPro.com
    - your quick and easy, yet powerful solution for managing your
    membership site sales, downloads and affiliates.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •