CSS - Image In Table Cell With Css

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

Hello,

I need to place an image in the bottom right-hand corner of a table cell. How would I do this using CSS, keeping in mind that text and other goodies are already present in the cell? I'd appreciate any advice. Thanks.

hi all...

i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ?

btw: this is for the IE style sheet, mozilla(firefox) works great....

frank/

hi, and thank for the help in advance.

i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom.

Hello,

I have a table and I am styling its cells:

table.Grid td {background-color: red;}

Inside this table I will have some other tables but I don't want their cells to have the styles changed.

I see two options: give a class to Grid table cells:
table.Grid td.Grid {background-color: red;}

Reset the changes in child tables:
table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;}

But can I apply the following style:
table.Grid td {background-color: red;}

And make it only for the cells inside that table but not inside the child tables in this code line?
... without needing to reset the styles on child table cells or give main cells a class ...

Thanks,
Miguel

Check out the following code.

Notice how the dark blue cell has one thin layer peeping through right inside the black border of the outer table? I can't figure out why.

What this should look like is a black border, followed by a border of 3 white thickness all around the light blue cells, as well as between the light blue cells.

Fixing this peeping cell in a way in which it is sucked out is fine - but if you have a better solution as to how to make the white spacing 3 around the cells AND the table, with a black border, I will accept.

Thanks

Code:

<html>
<head>
<style type="text/css">

.table1 
{
border-collapse: collapse; 
border: 1px; 
border-style: solid; 
border-color: #000000;
background-color: #FF0000;
}

.table2 
{
border: 1px; 
border-style: solid; 
border-color: #FF0000; 
border-collapse: collapse;
width: 300px;
}

.cell1
{
background-color: #0099ff;
border: 0px
border-style: solid;
}

.cell2 
{
border: 3px; 
border-style: solid; 
border-color: #FFFFFF; 
background-color: #95caff;
width: 300px;
height: 100px;
}



</style>
</head>

<body>

<table class="table1">
<tr>
	<td class="cell1">
		<table class="table2">
		<tr>
			<td class="cell2">&nbsp;</td>
		</tr>
		<tr>
			<td class="cell2">&nbsp;</td>
		</tr>
		</table>
	</td>
</tr>
</table>

</body>
</html>

hi all,
i'm trying to make a vertical menu using CSS2 and XHTML.
the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows.
This is the code i have written so far:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            TestMenu
        </title>
        <style type="text/css">
BODY, HTML {
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.menuContainer {
    background-color: red;
    width: 300px;
    height: 100%;
    border-spacing: 0px;
}

.menuItem {
    background-color: green;
}
.menuItemOpen {
    background-color: yellow;
}
.menuItemContents {
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}
.menuItemContainer {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
}
.menuTitle {
    background-color: blue;
    color: white;
    height: 20px;
    margin: 0;
    padding: 0;
}
.menuContents {
    padding: 0px;
}
.menuInnerContents {
    background-color: orange;
    overflow: auto;
    height: 100%;
    width: 100%;
    
}
</style>
    </head>
    <body>
    <table class="menuContainer">
        <tr class="menuItemOpen">
            <td class="menuItemContents"><table class="menuItemContainer">
                <tr>
                    <td class="menuTitle">Item 1</td>
                </tr>
                <tr>
                    <td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/>This are the contents<br/>
                    of this menu.<br/></div></div></td>
                </tr>
            </table></td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 2</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 3</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 4</td>
        </tr>
        <tr class="menuItem">
            <td class="menuTitle">Item 5</td>
        </tr>
    </table>
    </body>
</html>

as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow.
Help me please!

Hello people

I have a silly style-related question
I am trying to render a simple HTML table
The table has 2 rows on its left column
and one cell on its right column (rowspan = 2)

What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table

Here is my snippet:
Code:

<html>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
	<td width="50" height="45" valign="top"  style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td>
	<td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td>
</tr>
<tr>
	<td width="50" style="padding-bottom:5px;" valign="top">text under photo</td>
</tr>
</table>
</body>
</html>

The code behaves correctly when viewed in Firefox 1.5
(see attachment screenshot)
but when viewed in IE6.0, the top-left cell seems to ignore my height request...

any help would be appreciated

I am not sure the best way to colour half a table cell?

Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each?

hi all ! Im doing a calendar and I want to make the cell "TODAY" different from the rest.

So far I have to sets:

Code:

.dayrow {
	background: #FFF;
	height: 20px;
}

And today

Code:

.today {
	color:#007eff;
	height: 20px;
	
}

And the PHP code that controls it:

PHP Code:
if($col==1) $xml.="\n<tr class='dayrow'>"; 
          
        $xml.="\t<td valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\"  onClick=\"AfterDaySelected($cur,$month,$year,event)\">";
    
        if($i <= ($days+($start-1)) && $i >= $start) {
            $xml.="<div class='day'><b";
    
            if(($cur==$today[mday]) && ($name==$today[month]) && ($year2==$today[year])) $xml.=" class='today'";
    
            $xml.=">$cur</b></div>"; 





Is there a way to overwrite the BG in dayrow with one I put in the today class? So all the days remain the same except for that one?

Thanks a lot !

Hello,

I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear.

http://oharenoise.org/2010_news_releases-2.htm

Hi,

I have a HTML page linking to a CSS file in the header. My main table is defined using class="formBody".

This includes:
Code:

table.formBody td {
    border-width: 1px 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    border-style: solid solid solid solid;
    border-color: black black black black;
    background-color: white;
    -moz-border-radius: 0px 0px 0px 0px;
}

I need to override this on certain cells, so that a SINGLE certain cell will not have any borders (these will be cells on the bottom row, so the table will have the appearance of having half of its' actual width on the bottom row).

Any ideas? I tried explicitly setting border="0" in the <td> tag and also defining a new class called "noborder" with border set to none, and then using <td class="noborder"> but neither of these work.

essentially, what I want, is a table that looks like:

Code:

________________________
|       |     |        |
------------------------
              |________|

Any suggestions on how to do this?