CSS - Problem: Echo A Table Format

I'm working on this site: www.wirelessguy.net

I have this coded into my css file for the table in the iFrame:
Code:

table#welcome
{
	border:1px dotted red;/*testing out table*/
	height:100%;
	width:100%;
}

The html looks like this for the table:
Code:

<table id="welcome">
	<tr>
    	<th id="welcome">Welcome to the American Communications Web Site</th>
    </tr>
</table>

The table will not fill up the iframe, and it's not lining up in the middle. Anyone have any ideas?

I have a CSS defined table that is giving me a problem in IE.

In Firefox, the table cells have no space between them, but I can't get rid of the space between cells in IE. It's only a couple of pixels between each cell but this is messing up the look of the page.

[code]

CSS

#tabnav
{
position : absolute;
left: 28px;
top: 7px;
}

#tabnav tr td
{
position: relative;
float: left;
margin: 0px;
padding: 1px;
border-collapse: collapse;
border-style: solid;
border-width: 1px;
border-color: black;
width: 100px;
height: 35px;
text-align: center;
vertical-align: middle;
}

[code]

Hi
I've been converting my site to start using CSS and am currently working on a transistional layout. It works perfectly in Firefox, but IE 6 has other ideas. At the moment its a fairly simple table, with a Logo at the top and nav bar, content, and then a footer. I want this to fill 100% of the height of the screen (which its doing), how ever there is a mysterious gap under the nav bar , where by the cell decides not to size to the 151px i have told it to do. Instead it creates a hefty gap (i've colour this gray for clarity). I'm not sure if it's something to do with the way I have handled the Nav bar using a list. The link is http://www.cartagteam.co.uk/xhtml2.php to the page with the problem.
Thanks

I have managed to make a work around for the nasty old table, but I am having a problem with my text's vertical align in the header part of the code. You can see what it is doing he www.crxgames.com/spade/portal/profile.php?mode=view
Here is the css:
Code:

/*CSS: FAKING THE TABLE :)*/
.css_table {
	border: 1px solid #2555B4;
	background-color: #FFFFFF;
	margin: 0px;
}
.css_table ul {
	margin: 0px; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; LIST-STYLE-TYPE: none;
}
.css_table li {
margin-left: 0px;
}
.css_table ul li {
	margin-left: 0px;
 
}
.css_table_header {
	background-color: #4382C0;
	background-image: url(images/cellpic_th.gif);
	height: 24px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
}
.css_table_footer{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-top-color: #8BA5BE;
	border-right-color: #8BA5BE;
	border-bottom-color: #8BA5BE;
	border-left-color: #8BA5BE;
	
	background-color: #ECE9D8;
	background-image: url(images/cellpic_td.gif);
	background-position: bottom;
	background-repeat: repeat-x;
	
	height: 24px;
	padding-bottom: 0px;
	padding-top: 0px;
}

and here is the html
Code:

	<div class="css_table">
	<div class="css_table_header"> Boo! Did it work?</div>
		<ul>
		<li>sadf</li>
		<li>asdfasdf</li>
		</ul>
	<div class="css_table_footer">&nbsp;</div>
	</div>

Does anyone know how to fix this?

Hi all!

I am stuck with writing my first CSS style based website.
First you should know that I'm using a external CSS script.

What do I have?
I have a page with a background image.
Then I need text right? Well I need to align the text, to do so, I created this (for the index page):

Code:

<div id="content">
	<div id="colOne">
		<p></p>
	</div>

	<div id="colTwo">
		<p></p>
	</div>
</div>

To style it with CSS, I wrote this in my external STYLE.CSS script:
Code:

#colOne {
	float: left;
	width: 500px;
}

#colTwo {
	float: right;
	width: 184px;
}

This all works, I have 2 'tables' almost next to each other.

Well now you know how my script works, it may help you find a solution for my question:

-----
Because my background has light and dark colours, I want to create a 50% invisible background for my table, so the text is more visible and I am still able to see the background.

I found out, that I have to use a image and use this code:
Code:

<div style="width:250px;margin:0 auto;">  
<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">
<img src="image.gif"></span> </div>

Let say image.gif is a black image100*100, when you apply this code, you will be able to look trough the image.

so I thought I could use it onto my tables, take a small black image, make it the background, let it repeat it so the whole table would be black, and then apply the code... but I don't know how, because the script is not written for a external CSS script, and I don't know how to use a image as a table background.

Can anyone please tell me how to do this?
I prefer that you complete my script(A)

Thanks for helping me out,

Stef

I have a table and whatever background i put in it it only shows a part of the background at the bottom of the table. if i put another table in the excisting one and then put a background in the new one then it works , But this way it ruins the layout .

<tr>
<td colspan="4" background="images/Untitled-3.s_12.gif" bgcolor="#FFFFFF"></td>
</tr>

by removing the bgcolor i get the same result..


CSS is simple and includes :

body {
background-image: url(images/bg.gif);
}
.style4 {color: #000000}
.style5 {
color: #FF0000;
font-weight: bold;
}
.style6 {font-size: 10px}
-->


Regards ,
Kevin


sorry for posting this in HTML forum also.

Hi again,

Can anyone let me know if they have encountered this problem before. Its caused me around 12hrs of headaches so far.. The problem is that in Firefox this works perfectly, but in IE7 i cannot get it to be 100% of the browser window, it always takes 100% of the gif image. A good test is with a browser window of 800x600

If I change class test to fixed width for example width:614; instead of width:100%; then it seems to work perfectly again.

Many thanks in advance.

G.


-----SNIP


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style>
.test {
z-index:1;
width:100%;
overflow: auto;
}


</style>
</HEAD>
<BODY>




<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="(URL address blocked: See forum rules)" width="169"></td>
<td width="100%">

<div class="test">


<table><tr><td><img src="(URL address blocked: See forum rules)"></td></tr></table>

</div>

</td>
<td><img src="(URL address blocked: See forum rules)" width="169"></td>
</tr>
</table>




</BODY>
</HTML>

-------

I see my images have been removed, the two outer cells are just a 169 wide spacer

The inner image was 850 wide, just add any image of this size to try.

Thanks again.

G

Hi,
I am having problem with the following table.
It displays red border (#ff0000) around table in Internet explorer.
In Firefox red border does not show at all. It is just #ccc.
What can I do to have red border displayed in Firefox too?

Code:

<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>

<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>

<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>


.maintable {
line-height: 2.5em;

border: 1px solid #ff0000;
border-collapse: collapse;
}

.maintable th, .maintable td { padding: 0 5px; }

.maintable th {
border: 1px solid #ccc;
}

.maintable td {
border: 1px solid #ccc;
}

Thank you

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?

Why does this look right in IE and not in FF3?
My cells should have spacing between them.

http://www.coleman-designs.com/portfolio.html

I've used my standard reset.css and controlled the elements I need.
Code:

------------------HTML---------------------------
            <table border="0" cellspacing="10" cellpadding="0" class="portgal">
              <tr>
                <td><a href="images/portfolio/portfolio1.jpg" rel="lightbox"><img src="images/portfolio/portfolio1_thumb.jpg" align="absmiddle"/></a></td>
                <td><a href="images/portfolio/portfolio2.jpg" rel="lightbox"><img src="images/portfolio/portfolio2_thumb.jpg"/></a></td>
                <td><a href="images/portfolio/portfolio3.jpg" rel="lightbox"><img src="images/portfolio/portfolio3_thumb.jpg"/></a></td>
              </tr>

              <tr>
                <td><a href="images/portfolio/portfolio4.jpg" rel="lightbox"><img src="images/portfolio/portfolio4_thumb.jpg"/></a></td>

                <!-- <td>&nbsp;</td>
                <td>&nbsp;</td> -->
              </tr>
            </table>

----------------CSS-----------
table {
	border-collapse: separate;
}

.portgal td { background:none; border:solid; border-width:5px; border-color:#FFF; height: 160px; width: 180px;}
.portgal { margin-left:-29px; }

just getting into the css world for real, and im using it for the borders of a table:
border:1px solid #000000;
except this only does the outside border of the table, and not the borders for the rows/columns
do i need to have another .cell in my css to get each one to work?

Hi
I have a table which i want to have cellpadding of 6. when i view it in ie it works perfectly, but when i view it in firefox it adds about 12 and makes the padding huge. any ideas whats wrong? i've found that firefox seems to screw alot of css things up.

heres the code im using:
Code:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0" bordercolor="#111111" width="100%" id="AutoNumber1" background="network_bg.jpg">
<tr>
<td width="100%">
<table border="0" cellpadding="6" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber2" align="right" width="947">
<tr>
<td>&nbsp;</td>
<td> 

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.

i have table in which i display bunch of query results. i use
<table width="80%" ....background="something.gif">

when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high?

thanks for the help in advance

I have a problem with applying a style for tableborders that is needed at the client I work at.

The client works with IE6 / IE7 only.

In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS.

The "house-style" in this company for using tables is set to the following:

- The outer borders for the table are not visible
- The border under the top-row is orange (#F60)
- The borders under all other rows are grey (#808080)
- The vertical borders are all orange (#F60)

An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) :

URL

Anyone with suggestions on how to tackle this?

I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Table with css</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
html,body{text-align:center;} 

* {margin:0;padding:0;} 

html{font-size: 75%;} 

body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla caption,.tbla,.tbla th,.tbla td{ 
border-color:#0099cc; 
border-style:solid; 
font-size:1em; 
} 
.tbla{border-collapse:collapse;} 

.tbla th,.tbla td{padding:.5em;} 

.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;} 

.tbla th{text-align:center;font-weight:600;font-style:italic;} 

.tbla{border-width:1px 0 1px 1px;width:100%;} 
.tbla td{border-width:1px 1px 0 0;font-style:normal;} 
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla col{width:33.3%;} 
.tbla .a{background:#ffccff;text-align:right;} 
.tbla .b{background:#99ccff;text-align:left;} 
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;} 

head+body .tbla tr td {background:#ffccff;text-align:right;} 
head+body .tbla tr td + td {background:#99ccff;text-align:left;} 
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;} 

.x{width:64em;margin:1em auto;} 

.tbla th:first-letter {color:#fe7807;} 
.tbla th{text-transform:capitalize;} 

</style> 
</head> 
<body> 

<div class="x"> 

<table cellspacing="0" summary="aa" class="tbla"> 
<caption>table</caption> 
<col class="a" /><col class="b" /><col class="c" /> 
<thead> 
<tr> 
<th>one</th> 
<th>two</th> 
<th>three</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one x</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
  <td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>FF needs a Div to center ?</td> 
<td>it detaches the </td> 
<td>caption ?</td> 
</tr> 
</tbody> 
</table> 

</div> 

</body> 
</html>