Table border not displaying

[mickapoo]

I have a table with a form inside of it. I'm trying to get the table so that it has a yellow background with a dotted border. The background is displaying, so is the correct color and font, but the dotted border is not showing up.

I used this code in my stylesheet:
table.yellow_form {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #FFFFCC;
margin: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-style: dashed;
border-width: 1px;
border-color: #333333;

width: 450px;
text-align: center;

}


and then this is the code for my page:

<table class="yellow_form">
<tr><td colspan=2><center><div align="center">Get The First Credit Repair Secret 100% Free!</div>
<div align="center">This Powerful Secret Alone can BOOST YOUR SCORE BY 100+ POINTS</div></center></td></tr>
<tr><td>First Name:</td><td><input type="text" name="name" value="" size="20"></td></tr>
<tr><td>Email:</td><td><input type="text" name="from" value="" size="20"></td></tr>
<tr><td colspan=2><center><div align="center">(Be sure to check your bulk/spam folder</div>
<div align="center">if you don't see it right away)</div></center></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr>
</table>

Thank you in advance for your help!

[Fang]

Border shows correctly. What other css are you using?

[mickapoo]

Border shows correctly. What other css are you using?

I have attached my css files as they are rather long. I had to change the file extension to .txt as css files aren't permitted to be attached.

Thank you for your help,
Mickapoo

[Fang]

The border is still there (in IE), but the background color is too dark to see it.
IE: the border background color is that of it's parent(transparent border background).
Fx,Opera & Safari: the border background color is of the element's content area.

If you give the parent element a light color you can see the dashed border.

[mickapoo]

I made the background color of the dotted line white, but that didn't work. Is that the one that was too dark to see the line? I didn't want to change any other element because the rest of the page is white. I'm sorry, I really don't know what I'm doing!

This is what I entered:
table.yellow_form {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;

margin: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-style: dashed;
border-width: 1px;
border-color: #000000;
background-color: #ffffff;
width: 450px;
text-align: center;

and this is my table with the form inside of it:
<center>
<form method="post" action="http://www.aweber.com/scripts/addlead.pl" target="_new">
<input type="hidden" name="meta_web_form_id" value="1309432470">
<input type="hidden" name="meta_split_id" value="">
<input type="hidden" name="unit" value="ugcreditrepair">
<input type="hidden" name="redirect" value="http://www.aweber.com/form/thankyou_vo.html" id="redirect_0a268d393ce5cde0f774970e09951700">
<input type="hidden" name="meta_redirect_onlist" value="">
<input type="hidden" name="meta_adtracking" value="">
<input type="hidden" name="meta_message" value="1">
<input type="hidden" name="meta_required" value="from">
<input type="hidden" name="meta_forward_vars" value="0">
<table class="yellow_form">
<tr><td colspan=2><center><div align="center">Get The First Credit Repair Secret <font face="wp_bogus_font">100% Free!</font></div>
<div align="center">This Powerful Secret Alone can</div>
<div align="center"><font color="#ff0000"></font><font face="wp_bogus_font">BOOST YOUR SCORE BY 100+ POINTS</font></div></center></td></tr>
<tr><td>First Name:</td><td><input type="text" name="name" value="" size="20"></td></tr>
<tr><td>Email:</td><td><input type="text" name="from" value="" size="20"></td></tr>
<tr><td colspan=2><center><div align="center">(Be sure to check your bulk/spam folder</div>
<div align="center">if you don't see it right away)</div></center></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr>
</table>
</form></span>
</div>
</center>

[Fang]

Use conditional comments (http://msdn.microsoft.com/en-us/library/ms537512.aspx) for IE:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

body {
background: #072B5F;
font: 12px Arial;
color: #274961;
}

#main {
width: 770px;
text-align: left;
}

#header {
padding-top: 0px;
background: #072B5F;
}

#content {
background: #FFFFFF;
padding: 5px 30px 30px 30px;
}

#footer {
padding-top: 10px;
padding-bottom: 10px;
font: 11px Tahoma;
color: #c1c1c1;
}

#topdvdr0 {
display: none;
}
#topdvdr1 {
display: none;
}

table.yellow_form {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #FFFFCC;
margin: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-style: dashed;
border-width: 1px;
border-color: #333333;

width: 450px;
text-align: center;

}
</style>

<!--[if IE]>
<style type="text/css">
table.yellow_form {border-color: #ffc;}
</style>
<![endif]-->

</head>

<body>
<table class="yellow_form" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan=2><center><div align="center">Get The First Credit Repair Secret 100% Free!</div>
<div align="center">This Powerful Secret Alone can BOOST YOUR SCORE BY 100+ POINTS</div></center></td></tr>
<tr><td>First Name:</td><td><input type="text" name="name" value="" size="20"></td></tr>
<tr><td>Email:</td><td><input type="text" name="from" value="" size="20"></td></tr>
<tr><td colspan=2><center><div align="center">(Be sure to check your bulk/spam folder</div>
<div align="center">if you don't see it right away)</div></center></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr>
</table>
</body>
</html>

[mickapoo]

Can I put this in the stylesheet so I don't have to update it easily? I've never worked with 4 separate stylesheets before. Do I need to put it in one certain css file, or do I need to put it in all of them?

Thank you!

[Fang]

Not in the style sheet. It must go in the head.

[mickapoo]

*sigh*...It's still not working. I put it in the head, and took the table.yellow_form out of all the stylesheets.

[Fang]

table.yellow_form only needs to be in 1 of the style sheets, leave it in! The conditional comment ( [if IE] ) overrides the border color for IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="StyleSheet" href="defaults.css" type="text/css">
<link rel="StyleSheet" href="layout.css" type="text/css">
<link rel="StyleSheet" href="style.css" type="text/css">
<link rel="StyleSheet" href="system.css" type="text/css">

</style>
<!--[if IE]>
<style type="text/css">
table.yellow_form {border-color: #ffc;}
</style>
<![endif]-->

</head>
<body>

<table class="yellow_form">
<tr><td colspan=2><center><div align="center">Get The First Credit Repair Secret 100% Free!</div>
<div align="center">This Powerful Secret Alone can BOOST YOUR SCORE BY 100+ POINTS</div></center></td></tr>
<tr><td>First Name:</td><td><input type="text" name="name" value="" size="20"></td></tr>
<tr><td>Email:</td><td><input type="text" name="from" value="" size="20"></td></tr>
<tr><td colspan=2><center><div align="center">(Be sure to check your bulk/spam folder</div>
<div align="center">if you don't see it right away)</div></center></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr>
</table>

</body>
</html>

[mickapoo]

Ok, I put it back in the style.css file. It's still not working.

Here is my page:
www.hybriddesign.net/CR/index3.shtml

Thank you for all of your help.

[Fang]

In style.css remove the following:
table *{
border:0px solid red !important;
}

and you don't require the conditional comment as the background color of the parent is light.

[mickapoo]

Perfect. Thank you so much.