Hi,
Here are most of the fixes although I think that mozilla looks better with gap under the header.
Moz seems to be inheritting the margin of a child element so the only solution I can think of is to drag the image back. (There may well be another cause but I couldn't see it immediately).
The welocme box sticking out is because of all the negative margins. In ie it doesn't show anything outside its parent (unless you had a position:relative on it) but other browsers have pulled the element as directed by the margins.
The other 2 problems are that you have not cleared floats.
Heres the code:
Code:
html>body #l-col img {margin-top:-2px}
#subhdr {
background:#B8C5D4;
padding:10px 10px 5px 25px;
color: #FFFFFF;
text-align:left;
font-weight:bold;
font-size:18px;
}
#ftr {
clear:both;
background:#B3C1D2;
color: #333333;
border:solid #4E5872;
border-width:1px 0 0 0;
margin:0;
font-weight:bold;
}
.clearer {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
Completely replace your original elements of the same name with mine above.
You will also need to add an element to the html in exactly the place specified (exactly!!).
Add this bold part in the coorect location:
Code:
statements. <br />
<br />
</div>
</div>
<div class="clearer"></div>
</div>
<!--------------------- Footer --------------------->
<div id="ftr" align="center">
If you follow the instructions above carefully then your page should display correctly Although I think that the image looked better in moz with theuniform gap at the top of both columns.
Paul
