CSS - Setting Width On Table Captions In Ie

Hi,

I'm trying to create horizontal navigation with drop-down menus using strictly CSS. I've followed the tutorial located at: http://www.htmldog.com/articles/suckerfish/dropdowns/ but instead of having text for the main navigation, I'm using a transparent PNG and having text for strictly the drop-down section. To create the background of the navigation, I'm simply changing the background: property since the PNG images are transparent.

My problem is that the navigation isn't lining up correctly. It's irratic. Each PNG has absolutely no white space in front of or after it, so it's not that. It simply isn't lining up how it should. I wanted it to be right next to each other and I could simply adjust the width inbetween each one with the margin: property, but I can't get it working.

The page can be found he

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/css/xcage.css

Could someone take a look at the source and CSS and try to tell me what I'm doing wrong? If it comes down to it, I'll even pay someone $10 via PayPal to fix the problem and create working code for me - in CSS.

Thanks.

I'm wondering what's the word is called for setting the image width and height in CSS

Code:

img.test
{
    <<What's the keyword??>>: 10 px;
}

Thanks,
FletchSOD

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

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

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

Hi

I have been asked to supply :

examples of in-content images with and without captions should
be included with the relevant style attributes

What does this mean i did not know an image could have a caption applied to it?

Code:

table.community {
 	
		background-color:#FFFFFF; 
		font-size:11px;
		font-family:Arial, Helvetica, sans-serif;
		color:#414141;
		table-layout: fixed;
		width: 548px;
		margin: 1px;

}

<table class='community_field'>

The table is ignoring the width..doesn't stretch the width designated. Percentage doesn't work either..

Hi

Is it possible to give a table widths style the ability to have a minimum and maximum width?

eg,

it has to be 10px to 30px in width? so if content doesnt fill it enough, it will be 10px but if there is loads of content it will only goto 30px in width ?

im trying to make a table have a max width (so it can shrink of the browser window shrinks or the user has a smaller screen resolution)

Code:

<STYLE type="text/css">
     #max800 { max-width: 800px; text-align: left;}
     #max750 { max-width: 750px; text-align: left;}
</STYLE>

thats the css in the header section of my document (which is a .php document but this part is not in <?php ?> tags

on a table if i put <table id="max800">

it does not fallow the max width propety i am trying ot give it (or the text align for that matter)

instead it shrinks to the smallest possible width like it would nomrally do

what am i doing wrong?

This code results in a DIV box with 1 pixle borders, with tabs at the top.
Code:

<html>
<head>
	<title>Untitled</title>
	<style type="text/css" media="screen">
		/* Top Tab Menu */
		#navlist
		{
			border-bottom: 1px solid #ccc;
			margin: 0;
			padding-bottom: 19px;
			padding-left: 10px;
		}		
		#navlist ul, #navlist li
		{
			display: inline;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}		
		#navlist a:link, #navlist a:visited
		{
			background: #E8EBF0;
			border: 1px solid #ccc;
			color: #666;
			float: left;
			font-weight: normal;
			line-height: 14px;
			margin-right: 8px;
			padding: 2px 10px 2px 10px;
			text-decoration: none;
		}		
		#navlist a:link#current, #navlist a:visited#current
		{
			background: #fff;
			border-bottom: 1px solid #fff;
			color: #000;
		}		
		#navlist a:hover 
		{ 
			color: #666;
			background: #fff;
		}		
		/* Big Box Below Tabs */	
		#content_box {
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}		
		body {
			margin: 10px;
		}
	</style>
	<title>Test</title>
</head>
<body>
	<div id="navcontainer">
	<ul id="navlist">
	<li id="active"><a href="#" id="current">Test One</a></li>
	<li><a href="#">Test two</a></li>
	<li><a href="#">Test three</a></li>
	<li><a href="#">Test four</a></li>
	<li><a href="#">Test five</a></li>
	</ul>
	</div>
	<div id="content_box">
		<table width="100%" border="0" cellpadding="5">
			<tr>
				<td>		 
				 	Test<br />Test<br />Test
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

In it, is a table with 100% width which will hold row data from a database.

It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this.

I'm not understading how to have the non fixed width DIV contain a non fixed width table.

See the real thing at Siliconsatan.com/example.php

See a close up image below.

Hello,

I have not used CSS very much, so this may be a fairly simple problem.

I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing:
Code:

<table class="masterTable">

and
Code:

<td class="masterCell">

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;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Styling HTML select elements</title>
	<style type="text/css">
		select {
			width: 100%;
		}
	</style>
</head>
<body>
<table>
	<tbody>
		<tr>
			<td>Test</td>
		</tr>
		<tr>
			<td>
				<select>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>
</body>

This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off.

Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS?

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!