CSS - Table Not Centering In Firefox

Can anyone please tell me why cant i see a table centered by using this style sheet? All other elements are centered except form the tables tmemselves.

Code:

/* style.css */

body {
	background-image: url(/data/images/night.gif);
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
}

#page {
	position: relative;
	width: 100%;
	height: auto;
}

#select_form {
	margin-top:1 5px;
	font-size: 3ex;
	color: lime;
	text-align: center;
}

#DivText {
	overflow: auto;
	background-image: url(/data/images/kenzo.jpg);
	border: 4px Ridge Magenta;
	width: 850px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	color: LightSkyBlue;
	text-align: left;
	font-family: Times;
	font-size: 18px;
}

#user_form {
	position: relative;
	margin-top: 60px;
}

#info {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
}

#links {
	text-align: center;
	color: lime;
}

#links a {
	color: lime;
}

#links p {
	font: 12px bold;
	text-align: right;
	margin-bottom: 10px;
}




table.user_form {
	background-image: url(/data/images/swirl.jpg);
 	width: 55%;
  	color: lime;
	font: 18px times;
	text-align: center;
	border: 5px inset blue;
	border-collapse: collapse;
}

table.info {
	background-image : url(/data/images/blue.jpg);
 	width: 90%;
  	color: lime;
	font: 18px comic;
	text-align: center;
	border: 3px inset red;
	border-collapse: collapse;
}

table.tip {
	background-image : url(/data/images/brick.jpg);
 	width: 20%;
 	color: lime;
	font: 18px comic;
	text-align: center;
	border: 3px inset magenta;
	border-collapse: collapse;
}

table.games {
	background-image : url(/data/images/swirl.jpg);
 	width: 80%;
  	color: yellow;
  	font: 18px comic;
  	text-align: center;
	border: 3px inset magenta;
	border-collapse: collapse;
}




table {
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
}


Tr {
	text-align: center;
	border: 2px inset blue;
}


td {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 5px;
	padding-left: 5px;
	border: 1px inset yellow;
}


span {
	text-align: center;
}


h3 {
 	margin-top: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}




span.yellow {
 	font: 18px comic;
	color: yellow;
}




td.pink {
 	font: 18px comic;
	color: pink;
}


td.lime {
 	font: 18px comic;
	color: lime;
}


td.yellow {
 	font: 18px comic;
	color: yellow;
}


td.cyan {
 	font: 18px comic;
	color: cyan;
}


td.white {
 	font: 18px comic;
	color: white;
}


td.aquamarine {
 	font: 18px comic;
	color: aquamarine;
}




h3.pink {
 	font: 18px comic;
	color: pink;
}


h3.lime {
 	font: 18px comic;
	color: lime;
}


h3.yellow {
 	font: 18px comic;
	color: yellow;
}


h3.cyan {
 	font: 18px comic;
	color: cyan;
}


h3.white {
 	font: 18px comic;
	color: white;
}


h3.aquamarine {
 	font: 18px comic;
	color: aquamarine;
}

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi,

Im having a problem centering a DIV table exactly how i want it too.

I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600.

ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600

I have included/attached a image to kinda give a better idea.

Okay, I have a table and I can center it using css, and I can turn on the outside border, but I cannot seem to turn on the row borders. How do I do this.

I tried.style="border:5px outset #a0a0a0; margin-left:auto;margin-right:auto; margin-top:15%;"

which works for the outside border and centering, but to turn on the inside cell row borders I had to use border="3" and then I am unable to center the table on the page no matter what I do. How do I center this table properly using css with both outside border and the row border turned on.

I seem to have had success creating a cross-platform method for centering tables.

#centeredTable {

display:table;
width: auto;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

You can view an example he
http://jim.centerfuse.net/css/table...ed-example.html

IE ignores display:table and doesn't successfully interpret margin: auto, but text-align: center seems to take care of centering the table in IE.
Tested in Opera 7, IE 6, IE 5.5, Mozilla 1.5.
(I have the top margin in there just to move it away from my header a bit.)
It does require that you set a width on your table, or it will simply fill the entire page, though you could get around that with a container DIV (like this: http://jim.centerfuse.net/css/table...able_width.html ).

I thought others might be interested in seeing this, since it seems to be a common problem. I had originally developed a slightly more complicated way of doing what I need to do, but this seems to work just as well.
My main concerns are that future versions of IE will break this code because of added support for display:table and margin:auto, or that the specs for display:table; will change in the future, since it seems to be entirely unsupported in some browsers (namely IE).

Comments/Flames welcome

-Jim Keller

I know this is probably soooo not kosher, but this is where I'm at ...

I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen.

I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose.

Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it.

Here's the css code:

Code:

/* star rating */

.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
 
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
 
ul.rating li{
display:inline
}
 
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
 
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
 
.rating a:active {
background-position:top;
}

and here's the HTML code (in php format):

Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns.

Cheers.

Julian

i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie.....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ranid Photo Gallery</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff">

<div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;">
<h1>Ranid Frog Photos</h1>

<p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0>
<tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr>

</table></p>

<h5>:<a href="gallery.html">Back to the Gallery</a>:</h5>

</body>
</html>

My style sheet
Code:

  body {
    color: #000000;
    background-color: #ffffff;
    font-family: Georgia, "Times New Roman",
          Times, serif; 
}
}
  h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
  h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5 
{ 
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6 
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
    color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left } 
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
	COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
	COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
	COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
	COLOR: #2C31FF; TEXT-DECORATION: underline
}

any ideas?

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

I noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work.

See code below:
Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
  min-height: 100%;
  max-height: 100%;
  height: auto !important;
  height: 100%;
  overflow: auto;
}
#divider {
	cursor: e-resize;
	width: 8px;;
	background-color: #444444;
	vertical-align: center;
	min-height: 100%;
	max-height: 100%;
	height: auto !important;
  	height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'

//this function gets the original div height
function setPos(e){
	//for handling events in ie vs. w3c
	curevent = (typeof event == 'undefined' ? e:event);
	//sets mouse flag as down
	mouseStatus = 'down';
	//gets position of click
	curPos = curevent.clientX;
	//accepts height of the div
	tempWidth = document.getElementById('leftMenu').style.width;
	//these lines split the width value from the 'px' units
	widthArray = tempWidth.split('px');
	curWidth = parseInt(widthArray[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
	if(mouseStatus=='down'){
		curevent = (typeof event == 'undefined' ? e:event);
		//get new mouse position
		newPos = curevent.clientX;
		//calculate movement in pixels
		var pxMove=parseInt(newPos-curPos);
		//determine new width
		var newWidth = parseInt(curWidth+pxMove);
		//conditional to set minimum width to 5
		newWidth = (newWidth < 10 ? 10:newWidth);
		//set the new width of the div
		document.getElementById('leftMenu').style.width = newWidth+'px';
	}
}

function toggleMenu(e) {
	e.stopPropagation();
	if (document.getElementById('leftMenu').style.display != 'none') {
		document.getElementById('leftMenu').style.display = 'none';
	} else {
		document.getElementById('leftMenu').style.display = '';
	}
}

//-->
</script>
</head>

<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
  <tr valign="top">
    <td id="leftMenu" style="width: 230px;">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </td>
    <td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
    <td id="mainContent">
      <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
        <p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
        <p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
        <p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
        <p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Can anyone suggest a solution?

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> 

Hello,
I use the following css code to define the style of some tables.
However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code:

table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
}
.darkRow td{
	background-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow td{
	background-color: #BFACBF;
	color: #4D3D4D;
	padding-left: 4px;
}

I create the tables something like this: Code:

<table class="listings">
<tr class="darkRow"><td>bla</td></tr>
<tr class="lightRow"><td>bla</td></tr>
</table>

Why does it display so much different in those 2 browsers?

Hello,

I was hoping somebody can help me. I have been playing around with the problem, but I can't seem to figure it out. It is regarding my navbar not aligning properly in firefox.

If you view this section of my site . com/musicians/

In IE it looks as it should, however in firefox it's way off on the right. I am using 2 stylesheets for this page;

. com/wp-content/themes/WP-Genius/style-music.css
. com/musicians/skins/Nova/Nova.css

If anybody can provide me some insight on how to fix this, that would be greatly appreciated

Thanks!

I use tables as little as possible, and as such have very little experience of them with CSS - and I'm having a weird problem.

I wanted to create a table that has blocks of rows with their own 2px solid border, but with a 1px dotted border between cells. There are other rows between these blocks with no border at all. I've posted a very cut-down version of the page, including just the relevant part of the style sheet, at <http://www.highway57.co.uk/tests/tabletest>.

Because of an IE issue (of course! - see below) I ended up resorting to a fairly clumsy method: in the blocks referred to above, all the cells start with a 1px dotted border all round, then there are classes for t, r, b and l that have the corresponding border reset to 2px solid. As there are only two columns, every cell has either one or two of these classes applied. I'm using border-collapse: collapse.

This works fine in IE6, IE7, Opera (Mac and Win), Safari, OmniWeb and even Netscape 7.2 (Mac), but in the other Gecko browsers I have - Firefox and Camino - the table sprouts a superfluous vertical scrollbar which scrolls exactly 1 pixel. Rogue horizontal scrollbars I've dealt with before (usually a width issue), but I can't understand why I should get this vertical one, and it's driving me nuts - nothing I try gets rid of it.

OK, so why am I doing it this clumsy way? Originally I put each of the bordered blocks of rows in its own tbody, and applied borders to tds, trs or tbodys as appropriate, but neither IE6 nor IE7 appears to support borders on trs and tbodys - can anyone verify this? Nevertheless, I still got the scrollbar problem in Firefox: apart from the IEs, the visible result was exactly the same.

Any clues would be gratefully received!

Hello,

I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear.

http://oharenoise.org/2010_news_releases-2.htm

Code:

-- HTML

<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>

-- CSS

/*  Dashboard */

#Dashboard {
	border: 1px solid #b5bfbf;
	padding: 2px;
}

/* Overview Table */

#Overview {
	width: 100%;
	border-collapse: collapse;
	height: 50px;
	background-image: url(../images/dashboard/overviewtable_bg.png);
	background-repeat: repeat-x;
}

#Overview td {
	padding-top: 8px;
	padding-left: 5px;
	border: 1px solid #b5bfbf;
	margin: 0;
}
#Overview td.Detail {
	width: 45px;
}
#Overview span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 2px;
}

so there is a DIV with a 2px padding on the inside.

But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right.

I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous.

I am not sure what the issue is?

edit:

screenshot:

http://ricebox.whiteazn.com/tabpadding.png