www.webdeveloper.com
Results 1 to 13 of 13

Thread: Table border not displaying

  1. #1
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154

    Table border not displaying

    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:
    Code:
    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:

    Code:
    <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!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Border shows correctly. What other css are you using?

  3. #3
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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
    Attached Files Attached Files

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    Last edited by Fang; 10-24-2008 at 09:17 AM.

  5. #5
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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:
    Code:
    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:
    Code:
    <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>

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use conditional comments for IE:
    Code:
    <!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&#37; 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>

  7. #7
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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!

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Not in the style sheet. It must go in the head.

  9. #9
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    *sigh*...It's still not working. I put it in the head, and took the table.yellow_form out of all the stylesheets.

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    Code:
    <!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&#37; 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>
    Last edited by Fang; 10-24-2008 at 10:14 AM.

  11. #11
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    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.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    In style.css remove the following:
    Code:
    table *{
    	border:0px solid red !important;
    }
    and you don't require the conditional comment as the background color of the parent is light.
    Last edited by Fang; 10-24-2008 at 10:42 AM.

  13. #13
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    Perfect. Thank you so much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles