AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

CSS - Table Cell Width Expanding
Full Excel VBA Course - Beginner to Expert

Table Cell Width Expanding

 View Content
I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width.

I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image?

<em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em>


Here's my code and my stylesheet:

<div id="table">
<table width="725" border="0" cellpadding="5" cellspacing="0" class="table">
<tr>
<td width="1">&nbsp;</td>
<td class="cell1" width="130"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
<p>Bla bla bla</p></td>
<td class="cell2" width="124"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
</td>
<td class="cell3" width="246"></td>
<td class="cell4" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla<br />
<br />
Bla bla bla</p></td>
</tr>
<tr>
<td class="tdblue">&nbsp;</td>
<td class="cell5"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell6"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell7"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell8"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="cell9"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell10"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla.</p></td>
<td class="cell11"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td>
<td class="cell12" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla </p></td>
</tr>
</table>

Here's my stylesheet:

table {
width: 760px;
margin: auto;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 150%;
text-align: left;
text-decoration: none;
letter-spacing: .5px;
}

table td {
vertical-align: top;
}

td.cell1 {
background: white;
padding: 5;
width: 130px;
}

td.cell2 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell3 {
background: #ffffff;
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
spacing: 0;
padding: 0;
width: 246px;
}

td.cell4 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

td.cell5 {
background: #DFE5F0;
padding: 5;
width: 130px;
}

td.cell6 {
background: white;
padding: 5;
width: 124px;
}

td.cell7 {
background: #DFE5F0;
padding: 5;
width: 246px;
}

td.cell8 {
background: white;
padding: 5;
width: 174px;
}

td.cell9 {
background: white;
padding: 5;
width: 130px;
}

td.cell10 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell11 {
background: white;
padding: 5;
width: 246px;
}

td.cell12 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

.tdblue {
background: #DFE5F0;
}

.tdtan {
background: #F7F4EE;
}
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Table Cell Width Changing
Cellpadding On A Variable Width Div/table Cell
Div Width Not Expanding To Fit Width Of Child Div - Ie7
Ie Expanding Width Of Div!!
Div Width Expanding?
Sub Navigation Width Not Expanding
Issue With Tables, Table Cell Borders And No Data In Cell
Div Expanding Past Fixed Width
Issues With <div> Expanding To Width Of Content
Css Overflow, Div Expanding To Width Of Content
Css: Table Cell Spacing And Cell Border Problems
Menu Tabs Expanding To Fill Page Width
Help With A Cell Table/cell Border In Css Code
Cell Responding To Dynamic Width Of Row-partners.
Extend Table Width To Container Div's Width
Table Column Width Determined By Css, But Not Row Width?!?!
Set Border On Table Cell Without Changing The Size Of The Table Row
Expanding Cells In Table With Long Strings.
Inserted Text In Table Makes The Table Width Increase.help Me Stop It
Using Css In A Table Cell


Learn VBA & Macros for Excel in 1 Week!


Table Cell Width Changing

 Similar Tutorials View Content
I have a table with two rows. It has some very basic CSS - borders, padding, etc. In FF and Chrome it works exactly like I expect, but, big surprise, IE7 is causing me some problems. I haven't tested with any other IE versions.

The first table row is a header with a CSS background image and some text. The second row is a basic content row. If I put just one text character in the cell everything is fine. If I put enough text in the cell that it wraps to the second line that makes the second row display about 4-6 pixels WIDER than the top row.

Any ideas? I can send the source if you like, but it's a lot to take in.

Thanks!

Cellpadding On A Variable Width Div/table Cell

 Similar Tutorials View Content
Hey guys,

I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides.

This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot.

Here's the page:
http://aoi2.keysandwings.com/about.php

Here's the HTML:

Code:
<div class="relativetitle"">
  <table class="titletable">
    <tr>
      <td align="center" valign="middle">About</td>
   </tr>
  </table>
</div>



And here's the CSS:

Code:
.relativetitle {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 682px;
  height: 30px;
  color: white;
  background: transparent;
  font-size: larger;
  text-align: left
}

.titletable {
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background: black
}


Div Width Not Expanding To Fit Width Of Child Div - Ie7

 Similar Tutorials View Content
I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6.

Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further.

Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size.

Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 
</head>
  <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
      <form id="frmMain" runat="server"> 
          <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">        
                      <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
                  <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                  </div> 
          </div>
      </form>
  </body>
</html>


Ie Expanding Width Of Div!!

 Similar Tutorials View Content
going bonkers, I have tried everything to find out why on earth the background goes all the way to the right when this page is viewed in IE..

Black Background Not Stoping!!

Div Width Expanding?

 Similar Tutorials View Content
Hi there

I have a container DIV that nests 4 DIVs one on top of the next (logo, navigation, content and footer, all the same widths).

If there is a single paragraph (or small amount) of text in the content DIV of the page, the page looks fine.

However, if there is a large amount of text in the content DIV of the page, the width gets pushed out slightly. IE5 is fine. Firefox and Opera are the problem.

Note: I have left the height of the content DIV blank as it will be of varied size. When I set a height of say, 500px, the page looks fine (but because a background colour is needed for the DIV, it doesn't appear as I intended it to).

Any ideas to why this is happening?

Thanks in advance :-)

-Solange.

Sub Navigation Width Not Expanding

 Similar Tutorials View Content
Hi guys,

I'm trying to sort out the top level menu. It's supposed to allow a hover effect, where a sub menu then appears.
This secondary nav then spans across in an inline fashion.

The link to the site is: http://yoursitetest.co.uk/index2.php

However it seems to have some kind of 'width' set on the parent which the sub menu cannot expand past.

This is some of the code i think is relevant: (Rest of nav cut due to repeating nature)
Code:
<ul id="navigation">

			        <li class="main" style="position:absolute; font-size:11px; z-index:90; left:0px;"><a href="#" class="co">Home</a>

        	<ul style="display:none; z-index:100; height:28px;">

            	<li style="background-image:url(images/sm-l.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

                    <li><a href="#" style="background-color:#EEE;">asa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                    <li><a href="#" style="background-color:#EEE;">aa</a></li>

                <li style="background-image:url(images/sm-r.png); background-repeat:no-repeat; width:15px; height:30px;"></li>

            </ul>

        </li>
</ul>



CSS:
Code:
ul#navigation li.main {
	display:inline-block;
	list-style:none;
	position:relative;
	background-image:url(../images/tab_off.png);
	background-repeat:none;
	width:109px;
	height:8px;
	padding:10px;
}

ul#navigation li.main a {
	color:#FFF;
}

ul#navigation li.main:hover {
	background-image:url(../images/tab_on.png);
	background-repeat:none;
}

ul#navigation li ul {
	position:absolute;
	left:-50px;
	top:20px;
}

ul#navigation li ul li {
	display:inline-block;
	list-style:none;
}



Hope someone can help,
Regards,
Joe.

Issue With Tables, Table Cell Borders And No Data In Cell

 Similar Tutorials View Content
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!

Div Expanding Past Fixed Width

 Similar Tutorials View Content
Well, this would be the first time I actually am starting to use full DIVs to code a website, usually use tables. Anyways, I have most bugs fixed out since I do somewhat know how to code in DIVs - the question is though, on one of the "right" side content area things I have, the content part extending right over the DIV, and even the container. I also gave both with fixed widths, no idea why this is happening. Anyone have any ideas?

http://www.futuregamers.net
http://www.futuregamers.net/style.css

Issues With <div> Expanding To Width Of Content

 Similar Tutorials View Content
I have a page whose outer-most container has a fixed width. On some pages, there is a table whose width I cannot set to be fixed because its contents (more specifically the number of <td>s) are dynamic.

My problem is that when the table has so many <td>s that its width is forced to be greater than its parent <div>'s fixed width, the other page elements are not rendered as desired.

Here is a simple illiustration of what I'm talking about. The text on the page explAins my issues (although it should be evident from loooking at it in a browser).

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">

	body	{
		font-family: Arial, Helvetica, sans-serif;
	}
	
	#outer	{
		width: 950px;
		min-width: 950px;
		background-color: #fc0;
	}
	
	#hdr	{
		background-color: #66c;
		height: 50px;
		padding: 10px;
		color: #fff;
		margin-bottom: 25px;
	}
	
	table#data1	{
		background-color: #eee;
		margin: 10px;
	}
	
	table#data1 td	{
		font-weight: bold;
	}
	
</style>
</head>

<body>
	<div id="outer">
		<div id="hdr">
			This box should span the entire width of its orange container box even if the orange box's width exceeedes the width of the browser window due to the content it contains.
		</div>
		<table id="data1" border="1">
			<tr>
				<td colspan="24"><p>This table has a lot of TDs which causes its width to go beyond both the 900px assigned to its containg DIV as well as the width of my browser window. My desired behaviours a </p>
				<ol>
					<li>the containing element would expand to the width of the table (meaning that the orange background will be displayed behind the content of the grey table)</li>
					<li>the DIV with the blue background at the top would also expand to the width of its parent container (the DIV with the orange background)</li>
				</ol>
				<p>Neither of these are happening in Mozilla and only #1 is happening in IE.</p>
				<p>I'm sure that Mozilla is displaying properly per the CSS spec, but there must be a way to acheive what I'm trying to do.</p></td>

			</tr>
			<tr>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
				<td>aaaaaaaaaaaaaaaaaaaaaaaa</td>
				<td>bbbbbbbbbbbbbbbbbbbbbbbb</td>
			</tr>
		</table>
	</div>
</body>
</html>



I'm not saying my code is correct and that the browsers are not displaying it properly. I know I'm doing something wrong, I just can't figure out what.

Any suggestions?

Css Overflow, Div Expanding To Width Of Content

 Similar Tutorials View Content
Dear all,

IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content.

My code:
Code:
<div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;">
<div style="width:4000px;height:1000px;overflow:auto;background-image:url(img/calendarBackground.gif);position:relative">
<div style="background-color:#FFFFCC;position:absolute;top:76px;left:150px;width:1000px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:151px;left:300px;width:750px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px;width:100px;height:74px;">Test</div>
</div>
</div>



I found a couple more threads similar to this but none with a solution.

any help most appreciated. Mark

Css: Table Cell Spacing And Cell Border Problems

 Similar Tutorials View Content
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?

Menu Tabs Expanding To Fill Page Width

 Similar Tutorials View Content
I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss....

Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width.

?????????/

Help With A Cell Table/cell Border In Css Code

 Similar Tutorials View Content
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

Cell Responding To Dynamic Width Of Row-partners.

 Similar Tutorials View Content
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

Extend Table Width To Container Div's Width

 Similar Tutorials View Content
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...

Table Column Width Determined By Css, But Not Row Width?!?!

 Similar Tutorials View Content
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

Set Border On Table Cell Without Changing The Size Of The Table Row

 Similar Tutorials View Content
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.

Expanding Cells In Table With Long Strings.

 Similar Tutorials View Content
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

Inserted Text In Table Makes The Table Width Increase.help Me Stop It

 Similar Tutorials View Content
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

Using Css In A Table Cell

 Similar Tutorials View Content
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.
Privacy