Jack Tripper

you could do something like this:Or this:

Thank you both.To sum up for those googling:Q. How do you put a border on a table row?A. You can't.The best workaround is to have borders on every cell, designed to simulate a border around the entire row. Alternativly, every row in your table can contain a table, and you put your border around either the outer table's cell, or the whole inner table.

Take the time to understand the elements involved and learn to use them to achieve your results. Drop the parts you don't want. Add a Hover feature. Do with it as you will.

i think you're under the impression that i didn't do that already. i picked your page apart, figured out the difference between what i was doing and what you had (you wrap the image in a DIV and float it left). That looked promising, until i realize that as soon as the wrapped content is taller than the image: it wraps under the floated DIV. This is exactly what a float is supposed to do; it's also exactly what i don't want to do.i also tried doing a relative left position of +48px to the "content" and relation left position of -48px for the image. But this only changes where the image and content appear, the wrapping under the image still happens.i also tried two side-by-side spans inside a containing div, but then my content contains a DIV, and CSS forbids having a DIV inside a SPAN, for reasons beyond understanding.The point is i could have posted all my failed approaches, but that doesn't help answer my original question. My original question was how to put a border around a table row. If the answer is "you can't", then that's fine. But don't be afraid of the answer.Alternativly, i have tried to make it work without tables. If anyone cares to point out a non-table based approach that acheives the look i'm going for - feel free. But please don't say, "there is a technique that isn't what you want, but i won't tell you want it is."

Change the margin from 20% to a number of ems or pixels and the behaviour changes.

i don't want to add more white space just to account for how narrow the browser could become, i want the layout engine to do it for real. Margin is just a super-hack which can be made to fail; and fails to achieve what i want visually.

Tables are not the answer for this page and you know it.

i think tables are the only answer for this example. i will never be able to achieve my original design goal of having a single border around the entire thing, but the TR:hover changing it to a blueish background will be close enough. i would, of course, rather not use a table for page layout; but i can't figure out the valid "css" way to do layout.

Well, not without <br /> tags and spacer gifs.

That's worse than using tables, and i'll never stoop to that level.

Have a look at this page to get a couple of ideas from. All css, using divs. No tables and I think I remember validating it once, but can't recall how recently. Of course, you'll have to make some changes, but the concept is the same.

(The page is working now)That technique doesn't do what i need, which is why i had to move to a table.Try resizing the browser horizontally, the "Content Here" text will begin to wrap underneath the image, where i want it to stay aligned.

Have a look at this page to get a couple of ideas from.

Have a look at this page to see how this page doesn't work. (DNS doesn't resolve)

I would get rid of the table all together.What are you trying to do? Do you have an example?

You can see what i'm after here. It's trying to simulate the Vista control panel. ie7 now supports :hover on non-anchor elements, which works well if i'm using a DIV as the container. But i can't get the alignment to work properly with an image there. And even if i do, the header needs a "hanging indent". So the obvious formatting choice is to use a table, but then i can't apply a background and border to a table row.

You can put borders on TABLEs, and you can put borders on TDs. But you can't put them on TRs.So how do you put them on TRs?

If I have understood correctly, you want to fix IE6s buggy box model to follow the W3C box model, correct?

i don't think so. The width of an element refers to the width of the content.Overall width = width of content (e.g. text) +width of padding on left +width of padding on right +width of border on left +width of border on right +width of margin on left +width of margin on rightMy problem is, i have a containing block (e.g. DIV) that is a given size. i want any content in that DIV to full take up that width. Problem is, if i try to specify a width of 100%, then that refers to the internal content. The browser then adds any margins, borders, and padding; and the final width is larger than the containing DIV.What collection of DIVs can be used so that my content fills it's containing block?

I don't indend on trying your code

If i could have posted a screenshot, i would have. But i figured it would be easier for a reader to take the 20 seconds to see it for themselves.

You can copy and paste the following, and see what's wrong. The width of an element is determined by content, excluding the external margin, the border and the internal padding.Problem is, i want what i want, and i want it the way i want it. What is the CSS way to do what i want?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD>	<TITLE> W3C Box Model </TITLE>	<STYLE type="text/css">  DIV.boxTitle { 	 width: 100%; 	 background-color: lime;  	 border: 1px solid green;  	 padding-left: 1em; /*Internal indent title from left...*/ 	 padding-right: 1em; /*...and right*/ 	 font-weight: bold;  }  DIV.boxBody { 	 width: 100%; 	 height: 100%; 	 border-left: 1px solid green;  	 border-right: 1px solid green;  	 border-bottom: 1px solid green;   }	</STYLE></HEAD><BODY>	<DIV style="width: 512px; border: 1px solid black; text-align: center; margin-bottom: 5px">This box is 512px wide</DIV>	<!--i want any content in the following div to be constrained to a box 512px wide-->	<DIV style="width: 512px; border: 1px dotted red">  <DIV class="boxTitle">Title Goes Here</DIV>  <DIV class="boxBody">Content goes here.</DIV>	</DIV>	<BR>	<DIV style="width: 387px; border: 1px solid black; text-align: center; margin-bottom: 5px">This box is 387px wide</DIV>	<!--i want any content in the following DIV to be constrained to a box 387px wide-->	<DIV style="width: 387px; border: 1px dotted red">  <DIV class="boxTitle">Title Goes Here</DIV>  <DIV class="boxBody">Content goes here.</DIV>	</DIV></BODY></HTML>

i obviously don't want boxTitle and boxBody to be hardcoded to any widths. i am sure there is a standard workaround of adding 3 or 4 more DIVs in order to separate a containing block with its contents; i just can't think of the "CSS" way to do it.

Try this

Now any way to make both items vertically aligned middle?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD>	<STYLE type="text/css">   DIV#lblThirdPartyDiscount {     border: 1px solid green;    float: left;  }  DIV#EditDiscount {     float:right;    border: 1px solid red;  }  IMG { vertical-align: middle }	</STYLE></HEAD><BODY>	<TABLE style="WIDTH: 100%" border="1">  <TR> 	 <TD style="WIDTH: 60%">    <DIV id="lblThirdPartyDiscount">Third Party Discount</div>    <DIV id="EditDiscount"><IMG src="EditDiscount.gif">Edit Discount</DIV> 	 </TD> 	 <TD>$123.45</TD>  </TR>	</TABLE></BODY></HTML>

<!doctype html public "-//w3c//dtd html 4.0//en"><html>...</html>

Oh, i see you changed my HTML style syntax to xhtml style syntax. This site is not xhtml, it's not even strict HTML, and we can barely make it transitional HTML.As evidenced by the fact that i can't align right using CSS.

Try using "div" instead of "span". See if that helps.

DIV puts it on a new line. i need it on the same line.

I would...suggest that your css didn't use any capital letters. Looks a lot better

i fully, completely and totally disagree. It's a matter of preference, and my preference is that anyone using underscores to separate words be shot. But that's just my opinion.

i want my <SPAN id="EditDiscount "> to be right aligned inside its table cell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML>  <HEAD>     <STYLE type="text/css">       SPAN#EditDiscount {          text-align: right;          border: 1px solid red;       }       IMG {         vertical-align: middle       }     </STYLE>  </HEAD><BODY>  <TABLE style="width: 100%" border="1">    <TR>      <TD style="width: 60%">        <SPAN id="lblThirdPartyDiscount">Third Party Discount</SPAN>        <SPAN id="EditDiscount"><IMG src="EditDiscount.gif">Edit Discount</SPAN>      </TD>      <TD>$123.45</TD>   </TR>  </TABLE></BODY></HTML>

i've tried using text-align: right on the SPAN i want aligned right; and i've tried float: left on the SPAN on the left. Niether work. Any ideas?

IE6 was released before CSS2

May 1998: Cascading Style Sheets, level 2 CSS2 SpecificationJune: 1998: Internet Explorer 5.0 Beta 1August 1998: Internet Explorer 5.0 Beta 2March 1999: Internet Explorer 5.0November 1999: Internet Explorer 5.01December 1999: Internet Explorer 5.5 Beta 1July 2000: Internet Explorer 5.5March 2001: Internet Explorer 6.0 Beta 1August 2001: Internet Explorer 6.0

The following is taken from the W3C specification Cascading Style Sheets, level 2: Chapter 17 - Tables. It is the very first example at the start of the chapter. The HTML renders properly in Firefox, but not in Internet Explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD>   <STYLE type="text/css">      /* The following CSS rule centers the text horizontally in the header cells and present the data with a bold font weight:*/      TH { text-align: center; font-weight: bold }      /*The next rules align the text of the header cells on their baseline and vertically centers the text in each data cell:*/      TH { vertical-align: baseline }      TD { vertical-align: middle }      /*The next rules specify that the top row will be surrounded by a 3px solid blue border and each of the other rows will be surrounded by a 1px solid black border:*/      TABLE { border-collapse: collapse }      TR#row1 { border-top: 3px solid blue }      TR#row2 { border-top: 1px solid black }      TR#row3 { border-top: 1px solid black }      /*The following rule puts the table caption above the table:*/      CAPTION { caption-side: top }   </STYLE></HEAD><BODY>   <TABLE>      <CAPTION>This is a simple 3x3 table</CAPTION>      <TR id="row1">         <TH>Header 1      <TD>Cell 1        <TD>Cell 2      <TR id="row2">         <TH>Header 2      <TD>Cell 3        <TD>Cell 4      <TR id="row3">         <TH>Header 3      <TD>Cell 5        <TD>Cell 6   </TABLE></BODY></HTML>

So what's the problem?