Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML cellpadding does not work with the CSS sheet

Status
Not open for further replies.

jmcg

Technical User
Jun 30, 2000
223
GB
I have a page using CSS, there is no CSS controlling tables however when I use cellpadding in the <table> tag it is not doing anything. Both cellspacing and border are working but not cellpadding.
Is there something obvious I am doing wrong? This is in IE 6,as it is for internal use I do not need to worry about cross browser.
If I remove the CSS link the table appears with the padding.

Code for the table
Code:
<table cellpadding="5" cellspacing="2" border="1">
and the style sheet
Code:
/* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: blue;}
a:active {color: blue;}
a:visited {color: blue;}
a:hover {color: #C60;}

body {
	background: #CCD6CC;
	color: #444;
	font: normal 62.5% "Trebuchet MS",sans-serif;
	text-align:center
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em "Trebuchet MS",sans-serif;
}

h2 {
	font: normal 1.2em "Trebuchet MS",sans-serif;
}

/* misc */
.clearer {clear: both;}

/* structure */
.container {
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 750px;
	text-align:left
}

/* header */
.top {		
	padding: 20px 0 0;
}

/* title */
.header {
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	width: 750px;
	text-align:left;
}

.small {
	font: normal 0.8em "Trebuchet MS",sans-serif;
}

.cLeft{
	display: inline;
	margin: 0;
	float:left;
	padding: 2px;
	width: 50%;
}
.cRight{
	display: inline;
	margin: 0;
	float:right;
	padding: 2px;
	width: 50%;
}

.cLarge{
	background: #FFF;
	display: inline;
	font-size: 1.0em;
	margin: 0;
	padding: 2px;
	width: 200px;
}
.cNorm{
	background: #FFF;
	display: inline;
	font-size: 1.0em;
	margin: 0;
	padding: 2px;
	width: 100px;
}
.cSmall{
	background: #FFF;
	display: inline;
	font-size: 1.0em;
	margin: 0;
	padding: 2px;
	width: 10px;
}
.cGen{
	background: #FFF;
	display: inline;
	font-size: 1.0em;
	margin: 0;
	padding: 2px;
}

h4{
	margin-left:200px;
	font: normal 1.5em "Trebuchet MS",sans-serif;
	margin-top:-140px;
}



/* main */
.main {
	border-top: 4px solid #FFF;
}

/* side navigation */
.sidenav {
	float: right;
	width: 100px;
	background-color: #FFFF80;
	height: 500px;
}
.sidenav h2 {
	color: #5A5A43;
	font-size: 1em;
	font-weight: bold;
	margin: 0;
	padding: 2px 0 2px 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid White;
}
.sidenav li {
	border-bottom: 1px solid White;
}

.sidenav li a {
	font-size: 1em;
	color: #554;
	display: block;
	padding: 2px 0 2px 12px;
	text-decoration: none;
}
.sidenav li a:visited {
	font-size: 1em;
	color: #554;
	display: block;
	padding: 2px 0 2px 12px;
	text-decoration: none;
}
.sidenav li a:active {
	font-size: 1em;
	color: #554;
	display: block;
	padding: 2px 0 2px 12px;
	text-decoration: none;
}
.sidenav li a:hover {
	background: #F0F0EB;
	color: #654;	
}

.current {
	background-color: White;
}

/* content */
.content {
	float: left;
	margin: 10px 0;
	padding: 0 16px;
	width: 630px;
}

.content p {font-family: "Trebuchet MS",sans-serif;}

.man {
	font-family: "Trebuchet MS",sans-serif; 
	font-size: 0.8em;
}

/* footer */
.footer {
	background: url(images/bgfooter.gif) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
 
At the beginning of your stylesheet you specify this:
Code:
* {
    margin: 0;
    padding: 0;
}
which means that all elements on the page will have margin 0 and padding 0. Cellpadding equals padding applied to the td element. Since CSS always takes priority over html attributes, your td element will have padding 0 (as per the CSS instruction) instead of whatever you're specifying via cellpadding. Cellspacing and border are not defined anywhere in your CSS, thus the values from the attributes are respected.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Thanks vragabond works fine now!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top