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!

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

CSS dissapears when I add DOCTYPE 1

Status
Not open for further replies.
bobrivers2003

bobrivers2003

Technical User
Oct 28, 2005
96
GB
I have a simple html login form using css, but when i add

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
to the top of the page some of the css dissapears. WHy is this?

Any help would be greatly appreciated

<html>
<head>
<script src="scripts/popWin.js" type="text/javascript"></script>
<link href="stylesheets/loginStyle.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="mainTable">
<tr class="header">
<td colspan="2">Request Tracker Login</td>
</tr>
<tr><td><br><form name="login" action="userAuth.php" method="post">
<table class="login">
<tr class="dark"><td colspan="2"><br>Please login below using your given username and password:<br><br></td></tr>
<tr class="dark"><td>UserName:</td><td><input class="textField" type="text" value="" name="uname"></td></tr>
<tr class="dark"><td>Password:</td><td><input type="password" class="textField" value="" name="pword"></td></tr>
<tr class="dark"><td colspan="2" align="right">Remember Me<input type="checkbox" name="remcheck"><a href="remhelp.php" onClick="NewWindow(this.href, this.target, 330, 210, 'yes', ''); return false;"><img src="images/qm.gif" border="0" alt="Remember Me Settings"></a></td></tr>
<tr class="dark"><td align="right" colspan="2"><br><input type="submit" value="Login"></td></tr>
</table>
</form>
</td><td>
<table class="innerTable">
<tr><td><br><br><ul>
<li> Welcome to the request submission login page<br><br><li> Only authorized users are allowed access<br>
<br><li>If you are experiencing any problems with your login account, Please contact a member of the
<a href="help.php" onClick="NewWindow(this.href, this.target, 675, 250, 'yes', ''); return false;">DevArch</a> team.<br>
<br>
<li>Admin login please click <a href="adminLogin.php">here</a>.</ul>.
</td></tr>
</table>
</td></tr>
<tr class="footer"><td colspan="2">&copy;2005 Accenture</td></tr>
</table>
</body>
</html>

<html>
<head>
<script src="scripts/popWin.js" type="text/javascript"></script>
<link href="stylesheets/loginStyle.css" rel="stylesheet" type="text/css">
</head>

<body>
<table class="mainTable">
<tr class="header">
<td colspan="2">Request Tracker Login</td>
</tr>
<tr><td><br><form name="login" action="userAuth.php" method="post">
<table class="login">
<tr class="dark"><td colspan="2"><br>Please login below using your given username and password:<br><br></td></tr>
<tr class="dark"><td>UserName:</td><td><input class="textField" type="text" value="" name="uname"></td></tr>
<tr class="dark"><td>Password:</td><td><input type="password" class="textField" value="" name="pword"></td></tr>
<tr class="dark"><td colspan="2" align="right">Remember Me<input type="checkbox" name="remcheck"><a href="remhelp.php" onClick="NewWindow(this.href, this.target, 330, 210, 'yes', ''); return false;"><img src="images/qm.gif" border="0" alt="Remember Me Settings"></a></td></tr>
<tr class="dark"><td align="right" colspan="2"><br><input type="submit" value="Login"></td></tr>
</table>
</form>
</td><td>
<table class="innerTable">
<tr><td><br><br><ul>
<li> Welcome to the request submission login page<br><br><li> Only authorized users are allowed access<br>
<br><li>If you are experiencing any problems with your login account, Please contact a member of the
<a href="admin.php" onClick="NewWindow(this.href, this.target, 675, 250, 'yes', ''); return false;">DevArch</a> team.<br>
<br>
<li>Admin login please click <a href="adminLogin.php">here</a>.</ul>.
</td></tr>
</table>
</td></tr>
<tr class="footer"><td colspan="2">&copy;2005</td></tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
I would assume you're accidentally posting two instances of your html code. In order to help you out, we would need to see your css code too. Does this happen on all browsers or just one (IE)?
 
Upvote 0 Downvote
Don't know why I added twice. Sorry.

This does occur for both IE and firefox.

Its the tr.header and tr.footer that don't appear.


css



table.login {

border-color:black;
border-style:solid;
border-width:1pt;
padding:0pt;
border-spacing:0pt;
background:FFFFFF;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 12px;
width: auto;
height: auto;
margin-left:auto;
margin-right:auto;
color:858585;
border-collapse: collapse;


}

tr.dark {

font-family: Verdana,Arial, Helvetica, sans-serif;
font-weight: none;
text-align:left;
}

table.mainTable {

padding:0pt;
border-spacing:0pt;
background:FFFFFF;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 12px;
width: 400px;
margin-left:auto;
margin-right:auto;
color:858585;
}

tr.header {

font-family: Verdana,Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
text-align:left;
color:ffffff;
background-color:75A1D0;

}

tr.footer {

font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:center;
color:ffffff;
background-color:75A1D0;


}

table.innerTable {

padding:0pt;
border-spacing:0pt;
background:FFFFFF;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 12px;
width: 400px;
margin-left:auto;
margin-right:auto;
color:030303;
}

body {
text-align:center;
}

a {
color: 0000CD;
}
a:visited {
color: 0000CD;
}
a:hover {
color: 858585;
}
 
Upvote 0 Downvote
None of your colors and backgrounds are applied in FF or IE when in standards mode because you have no hash in front of them, which is necessary. It looks like that in quirks mode this does not matter and the colors are applied nonetheless, but stricter standards mode ignores them. Just add the hash character (#) in front of all the color values and you'll be fine (example):
Code: 
tr.footer {
  font-family: Verdana,Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  color: [red][b]#[/b][/red]ffffff;
  background-color: [red][b]#[/b][/red]75A1D0;
}
 
Upvote 0 Downvote
Who would of thought that something so simple could also be so satisfying!!

Thank you very much for your help :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
785
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
622
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
663
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top