Navigation Problem

Code valid but it's all out of place

[Jeigh]

I've been coding my site and the layout was working fine in IE but in Firefox the left navigation menu is all screwed up and jumbled together. Example:

IE:
____________
Account
____________

*log in form*

____________
Links
____________
Link
Link
Link
Link
____________
Stats
____________
Site stats here

Then in FF it's all jumbled up, somthing like

____________Account
____________
*log in form*____________
Links
____________

____________
Stats
____________
Site stats here

I've validated my CSS and XHTML and everything is fine so I'm really baffled as to why I'm having this problem, heres the code that relates to that section:

HTML:

<div id="left">
<div align="left">

<ul>
<li><div class="tile">Account</div></li>
<li>
<?
if($session->logged_in){
echo "<b>Logged In</b><br />";
echo "Welcome <b>$session->username</b>, you are logged in. <br />"
."<a href=\"userinfo.php?user=$session->username\">My Account</a><br /> "
."<a href=\"useredit.php\">Edit Account</a><br /> "
."<a href=\"profile.php?user=$session->username\">My Profile</a><br /> ";
if($session->isAdmin()){
echo "<a href=\"admin/admin.php\">Admin Center</a><br /> ";
}
echo "<a href=\"process.php\">Logout</a><br />
";
}
else{
?>

<?

if($form->num_errors > 0){
echo "<font size=\"2\" color=\"#ff0000\">".$form->num_errors." error(s) found</font>";
}
?>
<form action="process.php" method="post">
<table align="left" border="0" cellspacing="0" cellpadding="1">
<tr><td><font size="2"><b>Login</b></font></td></tr><tr><td><font size="2">Username:</font><input type="text" name="user" maxlength="30" value="<? echo $form->value("user");?>" style="width:50%" /></td></tr><tr><td><? echo $form->error("user");?></td></tr>
<tr><td><font size="2">Password:</font><input type="password" name="pass" maxlength="30" value="<? echo $form->value("pass");?>" style="width:50%" /></td></tr><tr><td><? echo $form->error("pass");?></td></tr>
<tr><td colspan="2" align="left"><input type="checkbox" name="remember" <? if($form->value("remember")!= ""){ echo "checked"; }?> />
<font size="2">Remember Me</font>
<input type="hidden" name="sublogin" value="1" />
<input type="submit" name="submit" value="Login" /></td></tr>
<tr><td colspan="2" align="left"><a href="forgotpass.php">Forgot Password?</a></td></tr><tr><td align="right"></td></tr>
<tr><td colspan="2" align="left"><font size="2">Not registered?</font><a href="register.php">Sign-Up!</a></td></tr>
</table>
</form>
</li>
</ul>
<?
}
?>
<ul>
<li><div class="tile">Quick Links</div></li>
<li><a href="#" class="quicklinks">Market</a></li>
<li><a href="#" class="quicklinks">Forum</a></li>
<li><a href="#" class="quicklinks">News</a></li>
<li><a href="#" class="quicklinks">Custom</a></li>
<li><a href="#" class="quicklinks">Misc.</a></li>
</ul>

<ul>
<li><div class="tile">Main Site Stats</div></li>
<li>
<?
echo "<b>Member Total:</b> ".$database->getNumMembers()."<br />";
echo "There are $database->num_active_users registered members and ";
echo "$database->num_active_guests guests viewing the main site.<br /><br />";
?>
</li>
</ul>
</div>
</div>

CSS:

#left
{
float:left;
width:198px;
min-height:600px;
background-color:#757575;
}

a.quicklinks:link
{
display:block;
vertical-align:middle;
font-size:13px;
border-left:10px solid #383838;
border-bottom:1px groove;
background-color:#424242;
padding-left:10px;
height:20px;
width:178px;
}

a.quicklinks:hover
{
display:block;
vertical-align:middle;
font-size:13px;
color:#fff;
background-color:#7aacbd;
border-left:10px solid #5d8390;
border-bottom:1px groove;
padding-left:10px;
height:20px;
width:178px;
}

a.quicklinks:active
{
display:block;
vertical-align:middle;
font-size:13px;
color:#fff;
background-color:#7aacbd;
border-left:10px solid #383838;
border-bottom:1px groove;
padding-left:10px;
height:20px;
width:178px;
}

a.quicklinks:visited
{
display:block;
vertical-align:middle;
font-size:13px;
background-color:#424242;
border-left:10px solid #383838;
border-bottom:1px groove;
padding-left:10px;
height:20px;
width:178px;
}

div.tile
{
height:21px;
background-color:#333;
background-image:url(images/catheaderp2.gif);
background-repeat:repeat-x;
padding-left:10px;
vertical-align:middle;
}

Any help will be greatly appreciated. Thanks.

[edited by: Jeigh at 7:19 am (utc) on June 4, 2007]

[Jeigh]

Any ideas?

[Robin_reala]

Hi Jeigh, sorry for not responding earlier. Could you post some sample output HTML from the system, not the server-side code you've added?

[SuzyUK]

Jeigh, humble apologies, I saw this earlier yesterday and thought it would do better over here but never got back to it

I ran the code and saw that it appeared as you described not only in FF (where you originally posted), but also in IE and Opera which is why I thought it best moved here..

My first finding, although it didn't fix it totally, was that the

align="left"

on the table caused the biggest problem, removing it caused the table to to go back under the rest of the lists in the left, is that what you want?

align when used on a table is the equivalent of float so I think the whole thing could be fixed if the lists themselves were given a width to fill the the left column. I'm thinking the table must have some room available to "float into".. but that's the bit I didn't check properly

There are some more problems connected to widths on links, again could be fixed by setting the width on the lists and display block on the links, but if you can produce some generated code as Robin asks, and try removing the align left from the table then let us know if there are still other problems (it could be your <ul> CSS which is not shown might take care of the secondary problems?)

Suzy

[edited by: SuzyUK at 7:52 am (utc) on June 7, 2007]

[Jeigh]

Thanks for the responses guys, I've got to leave soon and will be going away for a couple of days so I don't have time to try out your suggestions but I'll definetely try when I get back and let you know if it worked.

This is the source code from my website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="/path/to/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>text</title>
</head>
<body>

<div align="center">

<div id="container">

<div align="left">
<div id="links">

<ul>
<li><a href="#" class="links">Home</a></li>
<li><a href="#" class="links">Market</a></li>
<li><a href="#" class="links">Services</a></li>
<li><a href="#" class="links">Forum</a></li>
<li><a href="#" class="links">Contact</a></li>
</ul>

</div>
</div>

<div id="banner">
</div>

<div class="tile">
</div>

<div id="bar">
<div align="center">
*google ads*
</div>
</div>

<div id="left">
<div align="left">

<ul>
<li><div class="tile">Account</div></li>
<li>

<form action="process.php" method="post"><input type="hidden" name="PHPSESSID" value="sid" />
<table align="left" border="0" cellspacing="0" cellpadding="1">
<tr><td><font size="2"><b>Login</b></font></td></tr><tr><td><font size="2">Username:</font><input type="text" name="user" maxlength="30" value="" style="width:50%" /></td></tr><tr><td></td></tr>
<tr><td><font size="2">Password:</font><input type="password" name="pass" maxlength="30" value="" style="width:50%" /></td></tr><tr><td></td></tr>
<tr><td colspan="2" align="left"><input type="checkbox" name="remember" />
<font size="2">Remember Me</font>
<input type="hidden" name="sublogin" value="1" />
<input type="submit" name="submit" value="Login" /></td></tr>
<tr><td colspan="2" align="left"><a href="forgotpass.php?PHPSESSID=sid">Forgot Password?</a></td></tr><tr><td align="right"></td></tr>
<tr><td colspan="2" align="left"><font size="2">Not registered?</font><a href="register.php?PHPSESSID=sid">Sign-Up!</a></td></tr>
</table>
</form>
</li>
</ul>
<ul>
<li><div class="tile">Quick Links</div></li>
<li><a href="#" class="quicklinks">Market</a></li>
<li><a href="#" class="quicklinks">Forum</a></li>
<li><a href="#" class="quicklinks">News</a></li>
<li><a href="#" class="quicklinks">Custom</a></li>
<li><a href="#" class="quicklinks">Misc.</a></li>
</ul>

<ul>
<li><div class="tile">Main Site Stats</div></li>
<li>
<b>Member Total:</b> 9<br />There are 0 registered members and 1 guests viewing the main site.<br /><br /></li>
</ul>
</div>
</div>
<div id="middle">
<div align="left">
<ul style="background-color:#5a5a5a">
<li><div class="tile">Welcome!</div></li>
<li><div style="margin-left:10px; margin-right:10px; font-size:13px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque fermentum, felis eget ornare fringilla, velit erat suscipit dui, nec porta nisi nisl at lectus. Nulla viverra tristique ipsum. Maecenas imperdiet eros quis risus. Donec sapien nulla, mollis nec, fermentum et, rhoncus posuere, mauris. Aenean aliquam. Maecenas placerat nisl in mi. Cras consequat mollis mi. Fusce purus. Sed nulla. Mauris tincidunt ornare purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at quam. Ut interdum metus interdum orci.

Mauris pellentesque, risus ac auctor rhoncus, lacus urna euismod eros, nec convallis tortor nulla quis sem. Sed consectetuer risus. Proin at dolor in justo tincidunt rhoncus. Etiam dapibus porttitor urna. Etiam at augue. Sed libero libero, laoreet a, fermentum ut, porttitor vitae, metus. Nulla facilisi. Mauris gravida pede eget diam. Vivamus a dolor eget leo tincidunt pharetra. Integer lobortis, quam ac luctus adipiscing, metus ipsum posuere ligula, at viverra dolor purus eu tellus.
</div>
</li>

<li><div class="tile">Latest News</div></li>
<li><div style="margin-left:10px; margin-right:10px; font-size:13px">
Mauris pellentesque, risus ac auctor rhoncus, lacus urna euismod eros, nec convallis tortor nulla quis sem. Sed consectetuer risus. Proin at dolor in justo tincidunt rhoncus. Etiam dapibus porttitor urna. Etiam at augue. Sed libero libero, laoreet a, fermentum ut, porttitor vitae, metus. Nulla facilisi. Mauris gravida pede eget diam. Vivamus a dolor eget leo tincidunt pharetra. Integer lobortis, quam ac luctus adipiscing, metus ipsum posuere ligula, at viverra dolor purus eu tellus.
</div>
</li>
</ul>
</div>
</div>

<div id="right">
<ul>
<li><div class="tile">Newsletter</div></li>
<li>
<div align="left">
<font size="2px"><p>text</p>
Email:<br /></font>
<form method="post" action="mailinglist/thanks.php"><input type="hidden" name="PHPSESSID" value="sid" />
<input type="text" name="Email" size="20">
<input type="submit" Value="Subscribe"></form>
</div>
</li>
</ul>

<ul>
<li><div class="tile">Weekly Poll</div></li>
</ul>
</div>

<div id="footer">
<font size="1">
text
</font>
</div>

</div>
</div>

</body>
</html>

[edited by: Jeigh at 12:53 pm (utc) on June 7, 2007]

[Jeigh]

Havn't had much luck so far but here's the CSS for <ul> and <li> aswell:

ul
{
background-color:#757575;
width:100%;
padding:0px;
margin:0px;
list-style:none;
list-style-type:none;
}

li
{
display:inline;
}

[Jeigh]

I've made a little progress, I changed the display inline on the li into a class so only the top uses it and not the nav. Now its not all messed up and ontop of each other but the one of the things isn't showing up which is the quick links.

So two out of three are working now :P