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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"../main.css" >
<script language="JavaScript" type="text/JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"../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=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0001.jpg" windowheight="332" windowwidth="542" imageheight="307" imagewidth="517" imagedescription="mlt0001">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/thumbs/malta/mlt0001.jpg" width="168" height="100" alt="mlt0001">
</a><br>MLT0001
</li>
<li class="stamps"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0002.jpg" windowheight="335" windowwidth="542" imageheight="310" imagewidth="517" imagedescription="mlt0002">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/thumbs/malta/mlt0002.jpg" width="167" height="100" alt="mlt0002">
</a><br>MLT0002
</li>
<li class="stamps"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0003.jpg" windowheight="353" windowwidth="581" imageheight="328" imagewidth="556" imagedescription="mlt0003">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../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:
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 YouAdd clear:both
</ul>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
parsePage();
</script><div style="clear:both;"></div>
yes that was the problem, actually i read about ithere (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->).
According to the above article, it seems that this behaviour in Mozilla happens when the div has a visible border and/or background (as was in my situation).
Thank You very much for your help ... problem sorted
Someone else ran into this same issue actually. I gave this guy a quick and dirty explanation of floats, which you may find useful too: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->
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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"../main.css" >
<script language="JavaScript" type="text/JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"../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=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0001.jpg" windowheight="332" windowwidth="542" imageheight="307" imagewidth="517" imagedescription="mlt0001">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/thumbs/malta/mlt0001.jpg" width="168" height="100" alt="mlt0001">
</a><br>MLT0001
</li>
<li class="stamps"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0002.jpg" windowheight="335" windowwidth="542" imageheight="310" imagewidth="517" imagedescription="mlt0002">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/thumbs/malta/mlt0002.jpg" width="167" height="100" alt="mlt0002">
</a><br>MLT0002
</li>
<li class="stamps"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../images/actual/malta/mlt0003.jpg" windowheight="353" windowwidth="581" imageheight="328" imagewidth="556" imagedescription="mlt0003">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../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:
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 YouAdd clear:both
</ul>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
parsePage();
</script><div style="clear:both;"></div>
yes that was the problem, actually i read about ithere (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->).
According to the above article, it seems that this behaviour in Mozilla happens when the div has a visible border and/or background (as was in my situation).
Thank You very much for your help ... problem sorted
Someone else ran into this same issue actually. I gave this guy a quick and dirty explanation of floats, which you may find useful too: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->