CSS - Css Border And Cellpadding Are Not Responding.

Hello all, I am encountering a minor bug working on a page, and it is driving me insane.

Anyway, I have a table organized as such:

<table height="100%" border="0" cellpadding="0" cellspacing="0">
.
.
.
</table>

Now, I wanted to convert this to use CSS so that it would be HTML 4.01 compliant. So, I used a CSS document outlined like so:

.maintable
{
padding: 0px;
border-spacing: 0px;
border: 0px;
height: 100%;
}

and then changed my main code to this:

<table class="maintable">
.
.
.
</table>

Anyway, the height and border seem to be "moving over" fine, but it is clear to me that the padding and spacing are not. In any browsers that I use, I get an output as if padding and spacing were set to default values...

I tried using the collapse method, that failed to.

I usually miss minor things, so what is my stupid error?

Thanks

Hi!

I'm wondering what would the Cellpadding & Cellspacing be in CSS??

THanks,
FletchSOD

Any advice ?

PHP Code:
 _results.setAttribute("style", "visibility : hidden;height : 1%;"); 







node.Height = int

isnt working either.

Thanks in advance.

So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it.

I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute?

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
}

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

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...

Hello!
What is the equivalent of the cellpadding="0" in CSS?
I use Code:

padding:0;

,but it seems that it doesn't work.
Any ideas?
Sincerely
Artashes

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

I would like to set up a table with a different border than the cells inside it. Here's my code:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?

How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space.

This is the coder I have so far. Nothing big:

Code:

.solid {
border: solid 1px #000000;
}

Thanks.

Hi,

I am trying to box around a text, but what happen is that when I setting up borders for it, it shows the box expand longer than the text. Is there a way to have the box just as big as the text (Well, slightly bigger, but just enough for the text)? I thought border-collapse:collapse would do it, but apperantly not.

This is the CSS code I am using:

PHP Code:
 div.submenu1 {
  position: relative; 
  left: 22px; 
  padding: 4px; 
  border-style: solid;
  border-width: 0px 1px 1px 1px; 
  border-color: #0000FF;
  border-collapse: collapse; 
  background-color: #3399FF
} 





And on the html it's:

PHP Code:
<div class='submenu1'>
<a href='somelink' class='submenu1'>somelink</a>
</div> 

I'm having trouble with image borders showing up in browsers-

From my style sheet:

img {
border: #FFFF91;
border-width: 5px;
}

It's weird- it works on my header image for each page, but not the rest of my images...

I tried to post the link, but I just registered today and this is my first post, so I can't...

Much, much thanks for any help!

claytablet

Hey on my website: http://www.chamillionairechat.com

I want there to be a border around the mainmenu and to look something like this:



And this is the css i'm using for the mainmenu:

Code:

.mainmenu { background-color:#FFFFFF; padding-bottom:5px; border:1px border-color:#21511F; }

So does anyone know what i'm doing wrong

Thanks