CSS - Table Padding Doesn't Show Up In Ie

Hi everyone...new here and I hope you can help! Thanks is advance!

I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site:

romanceplaybook
I can't post the entire URL because I'm a new registrant. But just put dot com at the end.

Not that the page background is white. It should be repeating the image bkgd.jpg

Here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Hey everyone,

I am making a design for my own pleasure, and for some reason IE7 does not even show the menu. Here is 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" xml:lang="en" lang="en">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta http-equiv="Content-Style-Type" content="text/css" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
     <title>Untitled - Design 1</title>
     <style type="text/css">
	 /* <![CDATA[ */
body {
	background-color: #DDDDDD;
	color: #000000;
	text-align: center; /* IE5/Win hack, why do I bother with IE5/Win? */
	font-family: verdana, tahoma, sans-serif;
	font-size: 10pt;
	margin: 0;
	padding: 15px;
}

a img,a {
	border: 0;
}
a,a:link {
	color: #000000;
	text-decoration: underline;
}
a:visited {
	color: #000000;
	text-decoration: underline;
}
a:hover {
	color: #0096ff;
	text-decoration: none;
}
#container {
	margin: 0 auto;
	width: 79%;
	height: auto;
	text-align: left;
}
#outer {
	background-image: url( bg_top.gif );
	background-repeat: no-repeat;
	height: 86px;
	padding: 15px;
}
#inner {
	margin-top: -16px;
	background-image: url(body_bg.gif);
	background-repeat: repeat-y;
	background-position: top left;
	padding: 15px;
}
#leftmenu {
	float: left;
	width: 202px;
}
#leftmenu p {
	border-left: 1px solid #0099cc;
	border-right: 1px solid #0099cc;
	text-align: center;
	/* Blah, damn whitespaces */
	margin-top: -15px;
	margin-bottom: -5px;
}
#leftmenu h1 {
	height: 35px;
	background-image: url( header_top.gif );
	background-repeat: no-repeat;
	font-size: 15pt;
	color: #FFFFFF;
}
#menulast {
	background-image: url( menu_bottom.gif );
	background-repeat: no-repeat;
	background-position: top left;
	height: 18px;
	width: 202px;
}
.cleareasy {
	clear: both; /* Good bye gullotine bug :) */
}
/* ]]> */
</style>
</head>
<body>
  <div id="container">
   <div id="outer">
   asdfsdaf<br />
   asdfsdaf<br />
   asdfsdaf<br />
   </div>
   <div id="inner">
    <div id="leftmenu">
	 <h1>asdfasdf</h1>
	 <p>
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	  asdf<br />
	 </p>
	 <div id="menulast"></div>
	</div>
	<div class="cleareasy"></div>
   </div>
  </div>
 </body>
</html>

And also IE5 shows spacings, which other browsers don't because of the negative margins I have said, anyway to do get rid of those?

I don't have much experience using CSS, but I flatter myself that I can at least code a sheet which is readable by my HTML pages.

I've uploaded a stylesheet for my page at http://noblecarrots.com/index.php at http://noblecarrots.com/stylesheet.css rather than coding CSS in the HTML itself as I had done previously. The problem is that, during the transition, all of my styling has vanished. See for yourself - my links all check out, my CSS validates, and everything else seems fine, but you're still staring at Times New Roman and whitespace on my homepage.

If this turns out to be down to a typo or something similar, then I apologize in advance. I can only imagine how much of that kind of canooli you get on this forum.

Oh, and in case it makes things easier, here's my CSS. I think you'll agree it's just fine:

Code:

body {
	font-family: Garamond, Georgia, serif;
	background-color: #c9c299;
	color: #41383C;
	width: 30em;
	text-align: justify;
	margin: auto;
	}
img:link {
	border: none;
	}
a:link {
	color: #41383C;
	text-decoration: none;
	font-weight: bold;
	}
a:visited {
	color: #41383C;
	text-decoration: none;
	font-weight: bold;
	}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	}
a:active {
	color: #41383C;
	}
.logo {
	width: 16em;
	float: left;
	margin: auto;
	position: relative; top: 0px;
	}
.about {
	width: 13em;
	font-size: 0.9em;
	float: right;
	margin: auto;
	position: relative; top: 15px;
	text-align: left;
	}
.briefs {
	position: relative;
	text-align: justify;
	line-height: 100%;
	margin: auto;
	}
.quote {
	width: 25em;
	text-align: justify;
	line-height: 100%;
	}
ul {
	width: 22em;
	text-align: justify;
	line-height: 125%;
	}
.star {
	text-align: center;
	line-height: 100%;
	word-spacing: 2em;
	font-size: 2em;
	font-family: "MS Gothic";
	}
.footer {
	width: 40em;
	font-size: 0.9em;
	}
.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
	font-weight: bold;
	}
h2 {
	font-size: 3.75em;
	line-height: 5%;
	}
h3 {
	font-size: 1.25em;
	}

I can't get the css to show the top border http://www.****copz.com
Code:

 #navlist
 		{
 			padding: 3px 0;
 			margin-left: 0;
 			border-bottom: 1px solid #000;
 			font: bold 12px Verdana, sans-serif;
 		}
 		
 		#navlist li
 		{
 			list-style: none;
 			margin: 0;
 			display: inline;
 		}
 		
 		#navlist li a
 		{
 			padding: 3px 0.5em;
 			margin-left: 3px;
 			border: 1px solid #000;
 			border-bottom: none;
 			background: #FF5555;
 			text-decoration: none;
 		}
 		
 		#navlist li a:link { color: #000; }
 		#navlist li a:visited { 
 		color: #000;
 		background: #0033FF; }
 		
 		#navlist li a:hover
 		{
 			color: #000;
 			background: #7575FF;
 			border-color: #227;
 		}
 		
 		#navlist li a#current
 		{
 			background: white;
 			border-bottom: 1px solid white;
 			border-top: 1px solid #000;
 		}
 	
 a:link { 
 color: #000; 
 text-decoration: none;}
 a:visited { color: #0033FF; 
 text-decoration: none; }
 A:active{
 color: #0000ff; 
 text-decoration: none;}
 A:hover{
 color: #FF0000; 
 text-decoration: none; 
 background-color: #ffffff;}

Hey everyone,

I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7.
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>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <title></title>
   <style type="text/css">/* <![CDATA[ */
/* globals */
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #0E1211;
 color: #FFFFFF;
 font-family: tahoma, verdana, arial;
 font-size: 1em;
 background-image: url( background1.gif );
 background-repeat: no-repeat;
}
a img {
 border: 0;
}
a, a:link, a:visited, a:hover, a:visited {
 color: #EC5568;
 text-decoration: none;
}
a:focus {
 outline: none;
}
a:hover {
 text-decoration: none;
}
#container {
 padding: 10px;
}
#menu {
 float: left;
 width: 20%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: center;
}
#menu li {
 display: block;
 line-height: 200%;
 list-style-type: none;
}
#menu a {
 padding: 5px;
 padding-right: 80px;
 padding-left: 80px;
 background-color: #333333;
}
#menu a:hover {
 background-color: #000000;
}
#menu h2 {
 text-align: left;
 padding-left: 15px;
 font-size: 16px;
}
#main {
 margin-left: 1%;
 padding: 1%;
 float: right;
 width: 77%;
 opacity: .6; /* All others */
 -moz-opacity: .6; /* Gecko browsers */
 filter: alpha( Opacity: 50 );
 background-color: #666666;
 text-align: justify;
}
	/* ]]> */</style>
  </head>
  <body>
   <div id="container">
    <div id="menu">
     <h2>asdf</h2>
     <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
     </ul>
    </div>
    <div id="main">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor.

Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris. 
    </div>
   </div>
  </body>
 </html>

Screen shot for FF.
Screen shot for IE7.

Any ideas on why this is happening? IE has been going weird when ever I use background images

problem solved - it seemed that the inside box was too close to the outer one, so i gave it some padding and the border-line now shows. weird is, that it is now a little bigger than the other element, but i can live with 2px ... for now

hi folks,

i really dislike IE

i make the design for my webstore ... still i only want to use floats (no tables or other positioning) ... i am slowly advancing ... right now i am pretty much stopped in my tracks, because IE does not display the right side of 2 of my boxes (those are very similar in layout).
the boxes concerning have an outer DIV and an inner DIV. the outer has a specified width in px and overflow:hidden (which has helped keeping the width). the content is other DIVs and text.
note that a similar box with a UL in it does indeed display the thin borderline all the way around ..... and this is what drives me nuts.
LINK
concerning boxes are the shopping cart on the top right and the mailing list box on the bottom left
note that the similar costructed box with the navigational menue in it above the mailinglist box does display the borderline ....

oh, and in firefox everything is fine of course
on a side note .... in IE; hovering over any hover item results in the bdy text losing its background color?! i am not even challenging that one yet
it would be great if someone could help me out here

Code:

this is for the shopping cart box:

#header_right { 
color: black; 
font-size: 80%; 
background-color: white; 
margin-top: 0.5em; 
margin-right: 1.5em; 
padding-left: 10px; 
width: 150px; 
height: auto; 
overflow: hidden; 
float: right; 
}

#header_right_content { 
color: #fff; 
background-color: #f8f2dc; 
padding-top: 0.5em; 
padding-bottom: 0.6em; 
height: auto; 
border: solid 1px gray; 
}

Hello! I am learning CSS on my own which is an authentic crusade
So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand.
I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me?
Quote:
http:// nicetobehere-btemplates.blogspot.com/

And since the code is too big to post here you can download it from here
Quote:
http:// btemplates.com/2009/01/16/nice-to-be-here/


I will apreciate very much if you can help me with this!!

I applied the following class to the default (selected) <option> tag. Shows up great in Mozilla, doesn't apply in IE. Where I'm I missing the boat? Any tips appreciated.

.form
{font-weight: normal;
font-size: 14px;
text-align: center;
border-bottom: 1px solid #999999;}

I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white.

The following is the code I'm using in the body selector.. not much places where something could be going wrong.

css Code:
Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }

  

  


 body {


     margin: 0px;


     padding: 0px;


     background-color: #333333;


 } 

The link to the page is he http://montanlaw.com

I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips?

Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to.

Thanks in advance for any help,
chip19

is it possible to add table padding in the same way it is applied to divisions etc given the following code

Code:

<table class="forums">
   <tr>
      <td></td>
   </tr>
</table>

<div class="forums"></div>

Code:

.forums
{
   padding: 10px;
}

Using the above gets to different sizes as the padding it not applied to the table.

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

I have a table. It's a nice table, presenting its data in a clean, semantic manner. Great, so I wanted it to be a pretty table too. And I did that (problematic lines commented out for comparison):
Table with some CSS (Link no longer active).

Then I thought about function again. I wanted a scrolling table (Note that this was never meant to work in the obsolete IE). I added "height: 100px; overflow: auto;" to the tbody's CSS. That's when I ran into problems:
Table with only two lines of CSS added (Link no longer active).

Problems: There is a horizontal scrollbar. It appears to be making up for the space that the vertical scrollbar takes up. My nice cell borders are no longer in the tbody, but instead stick out of the table, overlapping anything that comes after. Interestingly enough, although the height declaration is required in order to show scrollbars, if I only add the overflow style, I still get that nasty border chaos. I am using Firefox.

Any ideas on how to fix/overcome/avoid these problems? This is really bugging me.

I'd like to create a table that'll scroll so I can control the on-screen size and have buttons visible below the rows, and so on. I found an example, that appears to have the CSS to make it work in IE (at least that's what the comment say), but although it looks fine in Firefox, I can't get it to work at all in IE 8.

Can someone take a look and tell me if there's some simple change that needed, of if this just plain is NOT going to work in IE, or what? I put the whole thing in here, so if you grab it and dump it in an html file, it should run...

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>

<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com         */
/* http://creativecommons.org/licenses/by-sa/2.0/    */

/* begin some basic styling here                     */
body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow: auto;
	width: 756px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 756px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 740px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 200px
}

html>body thead.fixedHeader th + th {
	width: 240px
}

html>body thead.fixedHeader th + th + th {
	width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}

html>body tbody.scrollContent td + td {
	width: 240px
}

html>body tbody.scrollContent td + td + td {
	width: 300px
}
-->
</style>
</head>
<body>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th><a href="#">Header 1</a></th>
		<th><a href="#">Header 2</a></th>
		<th><a href="#">Header 3</a></th>
	</tr>
</thead>

<tbody class="scrollContent">
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
<tr><td>AndRepeat1</td><td>AndRepeat2</td><td>AndRepeat3</td></tr>
<tr><td>CellContent1</td><td>CellContent2</td><td>CellContent3</td></tr>
<tr><td>MoreCellContent1</td><td>MoreCellContent2</td><td>MoreCellContent3</td></tr>
<tr><td>EvenMoreCellContent1</td><td>EvenMoreCellContent2</td><td>EvenMoreCellContent3</td></tr>
</tbody>
</table>

</div>

<div><br /></div>

  </body>
</html>

Hello,

Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px.

ie.

Code:

<style>

#menubox {
   float:left;
   margin-left:15px;
   margin-bottom:7px;
}

.main_cell {
   padding:15px;
}

</style>

<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
  <tr>
  <td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
  </tr>
</table>
</body>

Thanks, Rey

Hey everyone,

I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something.
html4strict Code:
Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html>

  

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">


 <html>


  <head>


   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


   <meta http-equiv="Content-Style-Type" content="text/css">


   <meta http-equiv="Content-Script-Type" content="text/javascript">


   <title></title>


   <style type="text/css">


   body {


    background-color: #082567;


    color: #FFFFFF;


    margin: 0;


    padding: 0;


    font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;


    font-size: 12px;


    text-align: justify;


   }


   #top-menu {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg );


    background-repeat: repeat-x;


    height: 130px;


   }


   #top-menu h1 {


    float: left;


    font-weight: bold;


    letter-spacing: -3px;


    font-size: 31px;


    padding: 5px;


   }


   #menu {


    float: right;


    list-style-type: none;


    text-align: center;


   }


   #menu li {


    display: inline;


   }


   #menu a {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg );


    background-repeat: repeat-x;


    color: #FFFFFF;


    padding: 50px;


   }


   #menu a:hover {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg );


    background-repeat: repeat-x;


   }


   </style>


  </head>


  <body>


   <div id="top-menu">


    <h1>ryon.hunter</h1>


    <div id="menu">


     <ul>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


     </ul>


    </div>


   </div>


  </body>


 </html> 

I validated it and it validates fine, any suggestions?