Menu
i have a web page in which it is made up of the following: At the top i have a php include file (top menu), then i have a <div> (where inside this div i have the contents of the page), and then i have another php include file (bottom menu).
Inside the <div> i have a <ul> with some <li>s in it. Eventually, i need to display the <li> next to each other rather than under each other … so i used the property float: left;
However, my problem is that this <ul> is being displayed outside my <div> and on top of my bottom menu in Mozilla browser while in IE is being displayed correctly. Hereunder is the code for both my webpage and the css styles in question … any suggestion on this is greatly appreciated:
main page code:
[Code]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Malta Postage Stamps</title>
<link rel=”stylesheet” type=”text/css” href=”../main.css” >
<script language=”JavaScript” type=”text/JavaScript” src=”../imagescript.js”></script>
<meta name=”Description” content=”Maltese Postage Stamps” >
<meta name=”Keywords” content=”malta, maltese, philately, stamps, postage, collection, sell” >
</head>
<body>
<?php include (“../menus/topmenu.php”); ?>
<div class=”mainpage”>
<h2>MALTA STAMPS</h2>
<ul class=”stamps”>
<li class=”stamps”><a href=”../images/actual/malta/mlt0001.jpg” windowheight=”332″ windowwidth=”542″ imageheight=”307″ imagewidth=”517″ imagedescription=”mlt0001″>
<img src=”../images/thumbs/malta/mlt0001.jpg” width=”168″ height=”100″ alt=”mlt0001″>
</a><br>MLT0001
</li>
<li class=”stamps”><a href=”../images/actual/malta/mlt0002.jpg” windowheight=”335″ windowwidth=”542″ imageheight=”310″ imagewidth=”517″ imagedescription=”mlt0002″>
<img src=”../images/thumbs/malta/mlt0002.jpg” width=”167″ height=”100″ alt=”mlt0002″>
</a><br>MLT0002
</li>
<li class=”stamps”><a href=”../images/actual/malta/mlt0003.jpg” windowheight=”353″ windowwidth=”581″ imageheight=”328″ imagewidth=”556″ imagedescription=”mlt0003″>
<img src=”../images/thumbs/malta/mlt0003.jpg” width=”170″ height=”100″ alt=”mlt0003″>
</a><br>MLT0003
</li>
</ul>
</div>
<script type=”text/javascript”>
parsePage();
</script>
<?php include (“../menus/bottommenu.php”); ?>
</body>
</html>
Styles:
[Code]
div.mainpage
{
background-color: #f5f5dc;
border: solid 2px #a52a2a;
text-align: justify;
}
ul.stamps
{
width: 80%;
margin-left: 10px;
margin-bottom: 0;
padding: 5px;
}
li.stamps
{
list-style-type: none;
float: left;
padding-right: 5px;
text-align: center;
}
Thank You