IE6 Box Padding Problem

[srv007]

Hi All,
I have been trying to get this to work in IE6 but with one strand of hair still in my head I thought i should ask someone smarter than myself.

The code below works in Firebird and Safari for me but I tried it on IE6 Win and it all works except i get no padding inside the box. I know IE6 has some box problems but I cannot find the solution.

Thanks for any help.

SRV

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

table#hotnews
{
margin: 15px 0px 15px 0px;
padding: 10px 10px 10px 10px;
background-color: #CCC;
border-color: #717171;
border-width: 1px;
border-style: dotted;
}

#hotnews h4
{
text-align: left;
vertical-align: top;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
}

#hotnews input {
background: #fff;
font: 10px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #333;
color: #000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#hotnews form { display: inline; }

[SuzyUK]

Hi srv007 - Welcome to WebmasterWorld :)

it will help us if you also post a stripped version of the section of HTML to which you are applying this

you have an ID there for a <table> so which "box" is not applying the padding?

the <table>, a <td>, the <form>?
all elements are "boxes" ;)

thanks

Suzy

[srv007]

Thanks...here tis

<table width=498 id=hotnews>
<tr>
<form method="post" action="../page.php">
<td>
<h4>Heading Goes Here</h4>
Drop Down Menu Goes Here&nbsp;&nbsp;<input type="submit" name="submit" value="Submit"></td></form>
<td>
</tr>
</table>

So the table is getting the CSS applied to it and works fine except in IE6 which doesn;t show the padding.

Thanks
SRV

[dcrombie]

You might want to try adding display: block - ie.

table#hotnews {
display: block;
margin: 15px 0px;
padding: 10px;
background-color: #CCC;
border: 1px dotted #717171;
}

[DrDoc]

Are you using a full and valid doctype [w3.org]?

[SuzyUK]

thanks srv007

Ok the problem is that in HTML the "cellpadding and/or cellspacing are applied as attributes to the <table> element

e.g. try this
<table width="498" id="hotnews" cellpadding="10" border="1">

which is what I presume you want..

the CSS way is to add padding directly to the table cell - the <td> element

then put the line of HTML back to
<table width="498" id="hotnews">

and add this to the CSS:
table#hotnews td {padding: 10px; border: 1px solid #777;}

this produces the required effect

and you'll see from the position of the border on both instances that it's the same ;)

Suzy

[srv007]

Thansk Suzy....that worked 100%. Amazing that that code worked in Mozilla, Firebird and Safari wihtout a problem and good ole IE6 choked.

Just one thing is that I needed to keep the margin setting on the table itself for it to work and then style the <td> with the rest of the code.

Anyway thanks again, your help is much appreciated.

SRV