Forum Moderators: not2easy
What I have written currently works fine in Mozilla/firefox but is not working in IE(6.0). The checkbox ends up being indented abut 30px from left side of container and the text is about 40px away from the box. (although the second line of text is flush with left side of container [aligned left])
I have another checkbox input at the top of the page that is working fine. Seems to only not work when the input field is within the div with id = "signupform". No idea why (tried playing with margins, padding, etc. and no help).
Hoping someone may have an idea why....
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<TITLE>EXAMPLE </TITLE>
<meta name="description" content="Example" />
<meta name="keywords" content="Example" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="start" href="http://www.example.com/home.php" title="Home" />
<link rel="StyleSheet" type="text/css" href="http://www.example.com/example.css"/>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="headerboxholder">
<div id="headerboxleft">
</div>
<div id="headerboxmiddle">
</div>
<!--Contents of remaining header will depend on whether or not the user is logged in:
If not logged in, display username/password/sign up/remember me/forgot password options.
If logged in, display account options-->
<div id="headerboxright">
<form action="process.php" method="POST">
<div id="prelogheadoptions">
<table>
<tr>
<td><input type="checkbox" name="remember" >Keep me logged in</td>
<td><a href="forgotpass.php" target="_self" class="headerbox" title="Request Password Reset">Forgot Password?</a></td>
</tr>
<tr><td><input id="loginemail" onfocus="header_loginEmailFocus();" onblur="header_loginEmailBlur();" type="text" name="email" maxlength="30" value="Email">
<input id="loginemail_isDefault" type="hidden" value="1"></td>
<!-- loginpass uses code to work around fact that initially "password" must be displayed in plain text but then input field must change to password so that the password entered by user is hidden -->
<td>
<input type="text" id="fakepass" class="fake" value="Password" maxlength= "30" onfocus= "header_loginPassFocus();">
<input id="loginpass" type="password" name="pass" onblur="header_loginPassBlur();" maxlength="30" value="">
<input type="hidden" name="sublogin" value="1"></td><td><input type="submit" value="Login"></td>
</tr>
<tr>
<td></td><td colspan="2"><a href="signup.php" target="_self" class="headerbox" title="Register">Not registered? Sign-Up!</a></td>
</tr>
<tr>
<td><span class="errormsg"></span></td>
<td><span class="errormsg"></span></td><td></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<!--include topmenubar: Determine if regular visitor/guest menu or admin-->
<div id="topmenubar">
<div id="normaltopmenubar">
<ul id="topmenubarlist">
<li><a href="example.php" class="topmenubarlink">HOME</a></li>
<li><a href="example.php" class="topmenubarlink">BOOK COURT</a></li>
<li><a href="example.php" class="topmenubarlink">COURT INFO</a></li>
<li><a href="example.php" class="topmenubarlink">ADD YOUR COURT</a></li>
<li><a href="example.php" class="topmenubarlink">ADVERTISE</a></li>
<li><a href="example.php" class="topmenubarlink">ABOUT</a></li>
<li><a href="example.php" class="topmenubarlink">CONTACT</a></li>
</ul>
</div>
</div>
<div id="contentcontainer">
<!--end of header section -->
<div id="signupcontainer">
<div id="signupform">
<form action="process.php" method="POST">
<div id="signupformtable">
</div>
<div id="signupformcheckboxes">
<input type="checkbox" name="sendmail" checked>Yes, please send me promotional mail with special
announcements and offers
</div>
</form>
</div>
</div>
</div>
<div id="footer">
Footer. Place links here.
</div>
</body>
</html>
Applicable CSS:
body{
background-color: white;
margin: 0 auto;
padding: 0;
width: 1000px;
}
DIV.clearer
{
clear: both;
height: 1px;
}
#contentcontainer {
min-height: 100px;
float: left;
width: 1000px;
background-color: #DAFFFD;
color: black;
font-size: 12px;
}
#signupcontainer {
float: left;
border: 0px;
margin: 0;
padding: 0;
width: 1000px;
color: black;
font-size: 11px;
font-weight: bold;
}
#signupmsg {
float: left;
}
#signupform {
width: 380px;
float:left;
margin: 50px 0px 0px 100px;
}
#signupform input{
width: 160px;
}
#signupformtable{
width: 380px;
background-color:red;
float: left
}
#signupformcheckboxes{
margin: 0px;
padding: 0px;
width: 380px;
background-color: green;
float: bottom;
text-align: left;
}
#footer {
height: 100px;
float: left;
width: 1000px;
background-color: black;
color: white;
font-size: 10px;
}
#loginpass {
display: none;
width: 140px;
}
#fakepass {
display: block;
width: 140px;
}
#loginemail {
width: 140px;
}
We discussed the importance of validated markup in this thead.
[webmasterworld.com...]
.................................
The markup provided does not validate for HTML or CSS. Minor errors, but a bad habit.
On the HTML, using XHTML closing tags with HTML DTD.
Line 5, Column 44: NET-enabling start-tag requires SHORTTAG YES
.................................
On the CSS, invalid value.
#signupformcheckboxes Value Error : float
bottom is not a float value : bottom
.................................
The actual question is a separate issue.
[validator.w3.org...]
One question I have is why does it seem like no popular sites (walmart.com, cnn.com, espn.com, etc.) pass the validator. Seems like almost every site has multiple errors in it. Why do these sites not take the time to make their code compliant?
Also, any ideas on the question in my earlier post? after making those changes, still no help... im stumped!
Most sites aren't too big on Accessibility either. They won't put resources into catering to niche handicaps. I try to be as accessible as possible and have a lot of interest in that area. However, I don't blame anyone that doesn't. It is my understanding that it is a big deal in UK, but in USA few people (who pay the bills) want to hear about the issues, solutions, advantages, or any part of even single A compliance. I try for AAA. Lacking academic background on the subject, 'best practices' and 'best effort' have to suffice - but that still leaves me way ahead.
...............................
I barely support minimum rendering on IE6 anymore for my own sites and don't troubleshoot for it at all anymore outside of that; only 7 & 8. Just don't have time.
Plenty of IE6 supporters here quite capable of seeing you through the issue.
Took a look on IE 8.0 and the problem also exists in that version.
