CSS - Table Cell Width Changing

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

Here's the code:

Code:

<table class="tab_thin_table">
<tr>
	<td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 1</td><td class="tab_end_off" rowspan="2"></td>
	<td class="tab_start_on" rowspan="2"></td><td class="tab_bg_on" rowspan="2">Example 1 ON</td><td class="tab_end_on" rowspan="2"></td>
	<td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 3</td><td class="tab_end_off" rowspan="2"></td>
	<td class="tab_thin_spacer"></td>
</tr>
<tr>
	<td class="tab_thin_top"></td>
</tr>
</table>

Here's the CSS:

Code:

tab_thin_table
{
width: 578px;
vertical-align: top;
}

.tab_thin_top
{
height: 1px;
background-color: #6E7073;
}

.tab_thin_spacer
{
height: 19px;
}

.tab_start_on
{
width: 6px;
height: 20px;
background: url(../container/tab_start_on.gif);
background-repeat: no-repeat;
}

.tab_bg_on
{
background: url(../container/tab_bg_on.gif);
}

.tab_end_on
{
width: 10px;
height: 20px;
background: url(../container/tab_end_on.gif);
background-repeat: no-repeat;
}

NOTE: tabs with "off" are same as tabs with "on" just different image

Here's the problems

As you can see the tab_thin_spacer and tab_thin_top sit on top of each other. The cells with are using the tab ons and offs are of dynamic widh determined by each page. However, the tab_thin_table is a set width.

I need tab_spacer and tab_top to always stretch the rest of the existing width of the table; whatever width is not taken up by the tab ons and offs

Thanks

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

How do you change the width of a scrollbar inn a CSS script? Also changing the height of the "up/down" buttons.

I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height : 31px;
display : block;
}

#menu1main a { /* Top drop down menu hover styles */
display : block;
color : #000000;
text-decoration : none; 
border : none;
background-repeat : no-repeat;
}

.menu1 .menu1list { /* Hide top drop down menu submenu */
display : none;
}

.menu1, .display { /* Top drop down menu top level styles */
float : left;
width : 110px;
text-align : center;
vertical-align : middle;
font-family : Comic Sans MS;
font-size : 10pt;
line-height : 31px;}

/* Top drop down menu submenu hover styles */
a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { 
background-image : url('image/menu_banner_1.jpg');
background-position : 12px 50% ;
}

a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
background-image : url('image/menu_banner_2.jpg');
background-position : 12px 50% ;
}

/* Top drop down menu submenu hover styles */
a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { 
display : block;
text-decoration : none; 
border : none;
color : #000000;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 130px;
}

a.menu1lv2:hover, a.menu1lv2:active { 
background-image : url('image/menu_cube_1.gif');
background-position : 0% 100% ;
background-repeat : no-repeat;
}

a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
font-weight : bold;
} 




The HTML for this is:
Code:

<div id="menu1main">

<div class="menu1" 
  onmouseover="this.className='display'"
    onmouseout="this.className='menu1'">
        <a class="menu1b1lv1" href="">Intro</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Title</a>
        <a class="menu1lv2" href="">Part 2 Title</a>
        <a class="menu1lv2" href="">Part 3 Title</a>
        </div></div>
<div class="menu1" 
  onmouseover="this.className='display'"
	  onmouseout="this.className='menu1'">
        <a class="menu1b2lv1" href="">Chapter 1</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Long Title</a>
        <a class="menu1lv2" href="">Part 2 Long Title</a>
        <a class="menu1lv2" href="">Part 3 Long Title</a>
        </div></div>
</div>

The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
 ul.top { /* Top drop down menu styles */
    display : block;
    padding : 0;
    margin : 0;
    border : none;
    font-family : Comic Sans MS;
    font-size : 10pt;
    text-align : center;
    vertical-align : middle;
}

#topnav li.topnav0 { /* Top drop down top level menu styles */
    position : relative;
    float : left;
    background-image : url('image/menu_banner_1.jpg');
    background-position : 50% 0% ;
    background-repeat : no-repeat;
    width : 110px;
    line-height : 31px;
}

#topnav li.topnav0 a { /* Top level link styles */
    color : #000000;
    text-decoration : none;
}
     
li.topnav0 a:hover { /* Top level hover styles */
    text-decoration : none;
    font-weight : bold;
}
     
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
    text-decoration : none;
    background-image : url('image/menu_cube_1.gif');
    background-position : 0 50% ;
    background-repeat : no-repeat;
}

li.topnav0 ul.topnav1 {/* Drop down box style */ 
    display : none;
    background : #FFFFFF;
    padding : 0;
    margin : 0;
    position : absolute;
    top : 100%;
    left : 0;
}

#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
    display : block;
    padding : 0;
    margin : 0;
    text-indent : 16px;
    text-align : left;
    font-size : 8pt;
    line-height : 20px;
    width : 250px;
}

#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
    display : block;
} 




And the HTML is as follow:
Code:

<div>
	     <ul class="top" id="topnav">
               <li class="topnav0"><div><a href="#">Home</a></div>
               </li>
               <li class="topnav0"><div><a href="#">Intro</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Title</a></li>
                         <li><a href="#">Part 2 Title</a></li>
                         <li><a href="#">Part 3 Title</a></li>
                    </ul>
               </li>               <li class="topnav0"><div><a href="#">Chapter 1</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Long Title</a></li>
                         <li><a href="#">Part 2 Long Title</a></li>
                         <li><a href="#">Part 3 Long Title</a></li>
                    </ul>
               </li>
          </ul>
</div>

The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.

Any help of making either method to work is great appreciated! Thank you very much!

After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice.

Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something.

Below represents what I *think* are the key parts of my .css file.
#wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages.

Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like.
Code:

#wholePage {
  font: 90%/1.1 trebuchet, arial, helvetica, serif; 
  width:96%; margin:0px auto; color:#333;
}
	
#contentLeft {
 float:left; width:180px; margin:0; padding:0 1em; 
 font-size:12px; border-right:1px solid #ddd;
}

#contentMain {
	 margin-left:200px; /* border-left:1px solid #ccc; */
	 margin-right:200px; /* border-right:1px solid #ccc; */
	 padding: 0 1em;
}

#contentRight {
	background: url(../images/bg_logoRt.png) repeat-y fixed top right;
 	float:right; width:180px; margin:0; padding:0 1em; font-size:12px; 
 	border-left:1px solid #ddd;
}
		
#footer {
	clear:both; margin:0; padding:0.5em; color:#333; 
	border-top:2px solid green;
}

Thank you very much for your valuable time.

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

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.

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

Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks!

Simon315

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, 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.