CSS - Border On Empty Cells On Ie6

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox.

At the moment it's laid out properly in FF, but I have some problems with IE.

The cells of a table "deform" while browsing in IE.
This is how it looks like:
URL
http://i38.tinypic.com/5ffe6q.gif
Here is html of the cells in question:
Code:

<table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg">

<tr>
<td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg"  border="0">
</td>
</tr>

<tr>
<td class="cHs" background="pic/left.jpg" width="47" valign=top></td>
<td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top>
<td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top">
</td>
</tr>
</table>

Here is used CSS:
Code:

table.cHs{ background: transparent;
border: none;
}

td.cHs { border: none;

}

Does anybody see a problem?
Thanks in advance.

Hi, I have the following code which is for a table.
Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="A"></a>A</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="B"></a>B</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="C"></a>C</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="D"></a>D</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="E"></a>E</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="F"></a>F</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="G"></a>G</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="H"></a>H</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="I"></a>I</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="J"></a>J</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="K"></a>K</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="L"></a>L</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="M"></a>M</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="N"></a>N</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="O"></a>O</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="P"></a>P</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>
			      <tr>
			        <td><a name="Q"></a>Q</td>
		          </tr>
			      <tr>
			        <td>&nbsp;</td>
		          </tr>

		        </table>

What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc.

I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page.

Anyone know the easiest way to do this?

Thanks

If you click on start and search a new windows opens, you should be able to see Name, In Folder, Size etc. I am looking to style the <td> cells in a table to look like that. i.e. same colours, lines and hover over effects.

I dont think it will be impossible, but for the life of me I cant match the colour. Does anyone know what the colour is exactly, or has anyone seen an example of this style elsewhere so I dont have to waste time designing it.

I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns.

I am trying to replace code like this:

<td width="100px><?php echo $row_rsList['taskpriority']; ?></td>
with a css style

<td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td>

where

td.pcol {
width: 100;
}


But when I display the table it seems to disregard the width setting.


The only other table formatting I ahve done so far is this:
table {
margin:0;
padding:0;
}

table th {
vertical-align: baseline;
font-size: x-small;
font-weight: bold;
font-variant: small-caps;
background: #CCCCCC;
text-align: left;
}

Thoughts?

Here is what I am trying to do:

<table>
<tr>
<td>left cell</td>
<td>right cell</td>
</tr>
</table>

I want to have the code so that the left cell is read first by the search engines followed by the right cell but I want the css to reverse the cells so that the right cell is shown first followed by the left cell. I have done this in IE by assigning the table element to position: relative and then using relative positioning to scoot the right cell to the left and the left cell to the right but this does not work in FF. I am using different stylesheets for different browsers so I dont need a solution that is cross browser compatible, just a solution that will work in standards compliant browsers like FF.

Thanks for your help.

Ok, so I'm making a website using tables and css since I personally hate using <div>. Anyway, it's going fine except for one problem. There is air between my cells. I wanted to show a SS of it, but apparantly I'm not allowed to post either links to the picture nor attach pictures to my thread, so I'll try to explain it.

Now, the html code for the tables looks like this:
Quote:
<table class="center">
<tr>
<td class="top">
<img src="img/top.jpg" alt="top" />
</td>
</tr>
<tr>
<td class="horizontal"></td>
</tr>
</table>


The is air between my two cells here. My horizontal border wont connect to my top cell containing the top.jpg.

The CSS code for trying to make the cells connect looks like this:
Quote:
table.center {
width: 590px;
margin-left: auto;
margin-right: auto;
border-spacing: 0px;
border-collapse: collapse;
}

tr, th {
padding: 0px;
}

td.horizontal {
width: 590px;
height: 2px;
background: #28847F;
padding: 0px;
}

td.top {
width: 590px;
height: 91px;
padding: 0px;
}


How come the two freakin' cells wont connect?

My Goal:
using an onmouseover, highlight the mouse-overed table cell red and highlight another table cell green.

Code:

<head><style type='text/css'>
.cell1 {  background-color: #cccccc; }
.cell1_over { background-color: #ff3366; }
#other_cell { background-color: #cccccc; }
</style></head>
<body>
<table>
<tr>
   <td class='cell1' onmouseover='this.className="cell1_over";'  onmouseout='this.className="cell1";'>words</td>
    <td id='other_cell'>more words</td>
</tr>
</table>
</body>

OK - the above code will change the first cell from grey to red no problem. What I want is to not only make the first cell grey but also the other cell turn green under the same onmouseover.

How might I go about this?

Thanks in advance!

is there a problem with placing div tags inside table cells.

I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice.

is there a problem and/or workaround to using div tags inside a table cell

Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code:

<td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td>

Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance.

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

i have a table with several header columns:
Code:

<table>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
<tr><td colspan=3>empty info</td></tr>
</table>

now i want to put a border inbetween the cells, to do this i simply used:
Code:

table th {
    border-left:1px solid black;
}

except this adds a border to the left hand side of the far left cell, making the table border of 1px actually 2px
if i give that end cell an id can it be ignored when applying the left border?
or would i have to add the lines:
Code:

table th#idname {
    border-left:0px;
}

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

Is it not possible to do the following? What is the correct way of aligning a cell if not?

PHP Code:
 TD.theader {
    background-color: #D0D0D0;
    border: 1px solid #000000;
    padding:5px;
    horizontal-align: right;
} 

Hello,
I posted this in the HTML forum too but didnt get any replies so maybe people in here know it.

When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached?

thanks in advance