Forum Moderators: not2easy
I have a question about a CSS page layout problem and Mozilla
The page renders fine in IE and Safari, but when I look at it in Mozilla the left menu <div> has a gap from the header <div>. This happens on Mac and PC Mozilla...
Any idea on how to make it stick correctly?
Thanks in advance...
Eric
Here is the code (removed some bits for clarity)....
<html>
<head>
<style type="text/css">
<!--
.header {
width: 100%;
}
.head_text {
color: #FFFFFF;
font-size: xx-large;
}
.head_bot {
width: 100%;
background-color: #D2CEE5;
margin-top: 3px;
vertical-align: top;
}
.qmenu {
font-size: x-small;
color: #1E0A7B;
font-weight: bold;
}
.xsmallt {
color: #0A067B;
font-size: x-small;
margin: 0px;
padding: 0px;
}
.menu
{
float: left;
width: 15em;
margin-right: 5px;
}
.menu .main_menu
{
list-style: none;
margin: 0 0 0 30;
}
.menu .main_menu li
{
display: block;
font-size: small;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #D2CEE5;
border-bottom-color: #D2CEE5;
padding-right: 2px;
}
.bmenu {
font-weight: bold;
}
.main_body {
padding: 5px 5px 5px 5px;
margin-left: 5px;
}
body,td,th {
color: #000000;
}
body {
width: 96%;
background-color: #FFFFFF;
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #D2CEE5;
}
-->
</style>
</head>
<body>
<div class="header"><span class="head_text"><img src="images_2k4/shim.gif" width="30">PROSPECTIVE STUDENTS</span></div>
<div class="head_bot">Some stuff here...</div>
<div class="menu">
<ul class="main_menu">
<li CLASS="bmenu"><br>PROSPECTIVE STUDENTS</li>
<li CLASS="bmenu">CURRENT STUDENTS</li>
<li class="bmenu"><br>NEWSDESK</li>
<li class="bmenu">CALENDAR</li>
<li><span class="bmenu">HOME</span> </li>
</ul>
</div>
<div class="main_body">
Put some info here
<p> </p>
<p> </p>
</body>
</html>
[edited by: SuzyUK at 6:40 am (utc) on Dec. 7, 2004]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
I think you need to have a look at the default margins on the "main_menu" <ul>.
IE is incorrectly collapsing the default margin outside the floated menu div. If you explicitly set top margins on the ul you will seee the same gap in IE..
.menu .main_menu
{
list-style: none;
margin: 20px 0 0 30px;
}
Apart from IE's little quirk, different browsers handle the default padding and margins on the <ul> differently so my suggestion would be to zero both the padding and margin and then use margin for your left, right and bottom spacing, but make sure the top margin is zero.. e.g.
.menu .main_menu
{
list-style: none;
margin: 0 5px 20px 30px;
padding: 0;
}
Suzy
Thanks a bunch.
Eric
