Forum Moderators: not2easy
Hoping someone may have some ideas....
Below is the html and CSS:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<TITLE>Court Rentals </TITLE>
<meta name="description" content="snip" />
<meta name="keywords" content="snip" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="start" href="http://www.example.com/" title="Home" />
<link rel="StyleSheet" type="text/css" href="http://www.example.com/widget.css"/>
<script type="text/javascript" src="widget.js"></script>
</head>
<body>
<div id="headerboxholder">
<div id="headerboxleft">
INSERT LOGO HERE
<!--width of site going to be 800px -->
<!-- logo should be inserte here <img src="http://www.example.com/images/logo%20no%20flame.jpg" name="headerlogo" alt="http://www.example.com" onmouseover="document.headerlogo.src='http://www.example.com/images/logo%20with%20flame.jpg'" onmouseout="document.headerlogo.src='http://www.example.com/images/logo%20no%20flame.jpg'" border = "0" height="100"
style="margin-left: 80px" > -->
</div>
<div id="headerboxmiddle">
ADVERTISING HERE
<!--PLACE ADVERTISING HERE $$$$$ -->
</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 type="text" name="user" maxlength="30" size="15" value=""></td>
<td><input type="password" name="pass" maxlength="30" size="15" 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><div id="errormsg"></div></td>
<td><div id="errormsg"></div></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="home.php" class="topmenubarlink">HOME</li>
<li><a href="bookwidget.php" class="topmenubarlink">BOOK widget</li>
<li><a href="widgetinfo.php" class="topmenubarlink">widget INFO</li>
<li><a href="addyourwidget.php" class="topmenubarlink">ADD YOUR widget</li>
<li><a href="advertise.php" class="topmenubarlink">ADVERTISE</li>
<li><a href="about.php" class="topmenubarlink">ABOUT</li>
<li><a href="contact.php" class="topmenubarlink">CONTACT</li>
</ul>
<div class="clearer"></div>
</div>
<!--
<div id="admintopmenubar">
<ul id="admintopmenubarlist">
<li><a href="home.php" class="topmenubarlink">HOME</li>
<li><a href="bookwidget.php" class="topmenubarlink">BOOK widget</li>
<li><a href="widgetinfo.php" class="topmenubarlink">widget INFO</li>
<li><a href="addyourwidget.php" class="topmenubarlink">ADD YOUR widget</li>
<li><a href="advertise.php" class="topmenubarlink">ADVERTISE</li>
<li><a href="about.php" class="topmenubarlink">ABOUT</li>
<li><a href="contact.php" class="topmenubarlink">CONTACT</li>
</ul>
</div>
-->
<div class="clearer"></div>
</div>
<!--end of header section -->
<div id="signupcontainer">
<div id="signupform">
<form action="process.php" method="POST">
<table align="left" border="0" cellspacing="0" cellpadding="3">
<TR><TD>Username:</TD><TD><input type="text" name="user" maxlength="30" value=""></TD>
<TD></TD></TR>
<TR><TD>Password:</TD><TD><input type="password" name="pass" maxlength="30" value=""></TD>
<TD></TD></TR>
<TR><TD>Email:</TD><TD><input type="text" name="email" maxlength="50" value=""></TD>
<TD></TD></TR>
<TR><TD colspan="2" align="right">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Join!"></TD></TR>
<TR><TD colspan="2" align="left"><a href="main.php">Back to Main</a></TD></TR>
</table>
</form>
<div class="clearer"></div>
</div>
<div class="clearer"></div>
</div>
</body>
</html>
CSS:
body{
background-color: white;
margin: 0 auto;
padding: 0px 0px;
width: 1000px;
}
DIV.clearer
{
clear: both;
height: 1px;
}
#headerboxholder {
background-color: black;
border: 0px;
margin: 0px 0px;
padding: 0px 0px;
height: 100px;
width: 1000px;
color: white;
font-size: 11px;
font-weight: bold;
}
a.headerbox:link {
color: white; text-decoration: none;}
a.headerbox:visited {
color: white; text-decoration: none;}
a.headerbox:hover {
color: white; text-decoration: underline;}
a.nav:active {
color: white; text-decoration: underline;}
#headerboxleft {
height: 100px;
width: 200px;
float: left;
margin: 0px 0px;
padding: 0px 0px;
}
#headerboxmiddle {
height: 100px;
width: 400px;
float: left;
margin: 0px 0px;
padding: 0px 0px;
}
#headerboxright {
height: 100px;
width: 400px;
float: left;
margin: 0px 0px;
padding: 0px 0px;
}
#prelogheadoptions {
margin: 5px 0px 0px 0px;
width: 430px;
height: 100px;
padding: 0px 0px 0px 0px;
}
#postlogheadoptions{
margin: 10px 0px 0px 0px;
width: 430px;
height: 100px;
padding: 0px 0px 0px 0px;
}
#errormsg {
color: #FF3212;
}
#welcometext {
font-size: 13px;
}
#topmenubar {
background-color: #03037D;
margin: 0px;
height: 40px;
width: 1000px;
padding: 0px;
border: 0px;
float: left;
}
#normaltopmenubar {
padding-top: 0px;
float: left;
}
#topmenubarlist{
float: left;
margin: 0px;
width: 1000px;
padding-top: 10px;
}
#topmenubarlist LI
{
display: inline;
list-style-type: none;
}
#topmenubarlist LI A:link, #topmenubarlist LI A:visited
{
color: #F4F4F4;
margin: 0px 0 0px 45px;
padding: 5px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#topmenubarlist LI A:hover
{
color: #CCC;
}
#signupcontainer {
background-color: red;
border: 0px;
margin: 0px 0px;
padding: 0px 0px;
width: 1000px;
color: black;
font-size: 11px;
font-weight: bold;
}
#signupmsg {
float: left;
}
#signupform {
float:left;
}
[edited by: swa66 at 11:22 pm (utc) on Oct. 26, 2009]
[edit reason] No links, no specifics, please see ToS and Forum Charter [/edit]
Validate your markup!
[w3.org...]
1) in the <head>, you are using XHTML closing tags in a document with an HTML DTD. Not valid.
<meta name="keywords" content="specifics removed" />
2) You have a lot of garbage code in the CSS.
padding: 0px 0px 0px 0px;
Better is {padding: 0;}
The former will validate, but very much of it makes for a messy file.
3) All of the following:
a.headerbox:link {
color: white; text-decoration: none;}
a.headerbox:visited {
color: white; text-decoration: none;}
a.headerbox:hover {
color: white; text-decoration: underline;}
a.nav:active {
color: white; text-decoration: underline;}
Can be reduced to:
a.headerbox {
color: white; text-decoration: none;
}
4) An id can only be called one time per page! You have called <div id="errormsg"> twice. Change to a class if using more than once per page.
5) You are declaring margin: and padding: on a lot of containers that will have 0 by default. A lot of cutting can be done.
6) NONE of the <a> in the list are closed and this was probably the problem with IE7. Can't say for sure, because the first thing that I did was validate the page. IE7 was fine after that. Didn't even look at the problem to start with. The bigger issue is cleaner markup.
7) This - {width: 1000px;} - is going to have a lot of your users stuck with horizontal scrolling in order to use your page.
8) There is still cleanup left to be done, but I did a fair bit, validated, then tested, and links are fine.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<TITLE>Court Rentals </TITLE>
<meta name="description" content="specifics removed">
<meta name="keywords" content="specifics removed">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="start" href="http://www.example.com/main.php" title="Home">
<link rel="StyleSheet" type="text/css" href="http://www.example.com/widget.css">
<script type="text/javascript" src="widget.js"></script>
<style type="text/css" media="all">
body {
background-color: #fff;
margin: 0 auto;
padding: 0;
width: 1000px;
}
div.clearer
{
clear: both;
height: 1px;
}
#headerboxholder {
background-color: #000;
border: 0;
margin: 0;
padding: 0;
height: 100px;
width: 1000px;
color: #fff;
font-size: 11px;
font-weight: bold;
}
a.headerbox {
color: white; text-decoration: none;
}
#headerboxleft {
height: 100px;
width: 200px;
float: left;
margin: 0;
padding: 0;
}
#headerboxmiddle {
height: 100px;
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#headerboxright {
height: 100px;
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#prelogheadoptions {
margin: 5px 0 0 0;
width: 430px;
height: 100px;
padding: 0;
}
#postlogheadoptions{
margin: 10px 0 0 0;
width: 430px;
height: 100px;
padding: 0;
}
.errormsg {
color: #ff3212;
}
#welcometext {
font-size: 13px;
}
#topmenubar {
background-color: #03037d;
margin: 0px;
height: 40px;
width: 1000px;
padding: 0;
border: 0;
float: left;
}
#normaltopmenubar {
padding-top: 0;
float: left;
}
#topmenubarlist{
float: left;
margin: 0;
width: 1000px;
padding-top: 10px;
}
#topmenubarlist li
{
display: inline;
list-style-type: none;
}
#topmenubarlist li a:link, #topmenubarlist li a:visited
{
color: #f4f4f4;
margin: 0 0 0 45px;
padding: 5px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#topmenubarlist li a:hover
{
color: #ccc;
}
#signupcontainer {
background-color: red;
border: 0;
margin: 0;
padding: 0;
width: 1000px;
color: #fff;
font-size: 11px;
font-weight: bold;
}
#signupmsg {
float: left;
}
#signupform {
float:left;
}
</style>
</head>
<body>
<div id="headerboxholder">
<div id="headerboxleft">
INSERT LOGO HERE
<!--width of site going to be 800px -->
<!-- logo should be inserte here <img src="http://www.example.com/images/logo%20no%20flame.jpg" name="headerlogo" alt="http://www.example.com" onmouseover="document.headerlogo.src='http://www.example.com/images/logo%20with%20flame.jpg'" onmouseout="document.headerlogo.src='http://www.example.com/images/logo%20no%20flame.jpg'" border = "0" height="100"
style="margin-left: 80px" > -->
</div>
<div id="headerboxmiddle">
ADVERTISING HERE
<!--PLACE ADVERTISING HERE $$$$$ -->
</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 type="text" name="user" maxlength="30" size="15" value=""></td>
<td><input type="password" name="pass" maxlength="30" size="15" 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><div class="errormsg"></div></td>
<td><div class="errormsg"></div></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="home.php" class="topmenubarlink">HOME</a></li>
<li><a href="bookwidget.php" class="topmenubarlink">BOOK widget</a></li>
<li><a href="widgetinfo.php" class="topmenubarlink">widget INFO</a></li>
<li><a href="addyourwidget.php" class="topmenubarlink">ADD YOUR widget</a></li>
<li><a href="advertise.php" class="topmenubarlink">ADVERTISE</a></li>
<li><a href="about.php" class="topmenubarlink">ABOUT</a></li>
<li><a href="contact.php" class="topmenubarlink">CONTACT</a></li>
</ul>
<div class="clearer"></div>
</div>
<!--##########
<div id="admintopmenubar">
<ul id="admintopmenubarlist">
<li><a href="home.php" class="topmenubarlink">HOME</a></li>
<li><a href="bookwidget.php" class="topmenubarlink">BOOK widget</a></li>
<li><a href="widgetinfo.php" class="topmenubarlink">widget INFO</a></li>
<li><a href="addyourwidget.php" class="topmenubarlink">ADD YOUR widget</a></li>
<li><a href="advertise.php" class="topmenubarlink">ADVERTISE</a></li>
<li><a href="about.php" class="topmenubarlink">ABOUT</a></li>
<li><a href="contact.php" class="topmenubarlink">CONTACT</a></li>
</ul>
</div>
-->
<div class="clearer"></div>
</div>
<!--end of header section -->
<div id="signupcontainer">
<div id="signupform">
<form action="process.php" method="POST">
<table align="left" border="0" cellspacing="0" cellpadding="3">
<TR><TD>Username:</TD><TD><input type="text" name="user" maxlength="30" value=""></TD>
<TD></TD></TR>
<TR><TD>Password:</TD><TD><input type="password" name="pass" maxlength="30" value=""></TD>
<TD></TD></TR>
<TR><TD>Email:</TD><TD><input type="text" name="email" maxlength="50" value=""></TD>
<TD></TD></TR>
<TR><TD colspan="2" align="right">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Join!"></TD></TR>
<TR><TD colspan="2" align="left"><a href="main.php">Back to Main</a></TD></TR>
</table>
</form>
<div class="clearer"></div>
</div>
<div class="clearer"></div>
</div>
<!--##########
Have three sections on a page (header, middle menu, content). The middle menu has 7 links displayed in an UL horizontally (using inline) across the page. For some reason the final link (contact us) is also being applied to the content section in IE (so if user clicks anywhere in the content section, they would be brought to the content link). In Mozilla everything works fine, but in IE7.0 I am having this problem.
-->
</body>
</html>
[edited by: swa66 at 11:27 pm (utc) on Oct. 26, 2009]
[edit reason] clean up of quoted material [/edit]
As you can probably tell, I'm a beginner at this and trying to figure it all out as I go.
Few quick questions for you if you dont mind:
1) what is easiest way to validate markup when using php files? I have quanta plus now and works well if straight html but when using php it doesnt seem to be as helpful.
2) how did u convert all the links to widget links? is there a quick program to do that or does it need to be done manually?
3) In your item 3 you suggest a solution to the headerbox id, although, I believe if that solution is implemented then I will not get underline when the link is hovered/being clicked. Is this correct?
4) What would you suggest instead of a fixed width. Set to 100%? And then instead of making the width columns in heading section 200px, 400px, 400px, make them 20%, 40%, 40%? Thoguht about doing that but thought it may make the page look very small in mobile browser. Think I need to define the widths as am using floating divs in css... but not sure about the best way to go about it. Would appreciate your input
Thanks again, immensely helpful.
1) The W3C validator should validate .php pages with no problem if output is served as text/html, which you seem to be doing.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
I know nothing of "quanta plus", so can't help you there. I believe that Opera has a PHP validation feature. Also, a search for - PHP validator - will bring up a lot of resources to check out. I test PHP by turning on all errors. Besides, with PHP if it works it's probably fine. If it isn't exactly correct, it probably won't work at all, and it's almost always just a missing semi-colon, brace, or some such.
2) Don't understand what you are wanting to do here. Sounds manual, since each link will probably be unique.
3) Yes, I misread and assumed that you were fully repeating each declaration with the class. I stand corrected. You do have the option of eliminating the specificity of :link, which would then allow you to drop the extra {color: white;}. Optional.
a.headerbox {
color: white; text-decoration: none;}
a.headerbox:visited {
text-decoration: none;}
a.headerbox:hover {
text-decoration: underline;}
4) Removing the five {width: 1000px;} will likely have little or no influence on the rendering of the page. They are 'extra' declarations. #headerboxleft,
#headerboxmiddle, #headerboxright - at 200px, 400px, and 400px, pretty much locks in the 1000px minimum rendered width. The 1000px width will be disaster in any mobile browser, so playing with improvements can do no harm. Yes, I would use percentages. Widths are not required, but will trigger a warning when validating CSS. Percentages will be fine
I would also consider a mobile specific stylesheet. I want a very linear rendering of content.
You should not have posted identifiable links or information. Personal links or site identifying information is strictly banned. That is not automatic. You should remove links and identifying information before or while making the post. Use www.example.com for links. A new user, you are probably not familiar with the TOS yet. Some rules are firmer than others, and this is the firmest of them all. No personal links or identifiers.
I should have, and would have, stripped that out of my example when responding, but, truth be told, I didn't even look at the content and was completely unaware that the meta tag that I grabbed to use as a sample had identifying information. I had no clue what was in the tag and never even looked at it. My only interest was that the XHTML closing tags were throwing validation errors with your HTML DTD.
Same with when I cleaned up your markup and reposted. I never even looked at the <head> beyond the issue mentioned, thus, I carried your error into my post.
So - swa66 had to come behind both posts and make the deletions.
Thx
