HTML Forum

**afcbob** · 07-28-2006, 04:11 AM

Ok am learning to design a site and have this one here but it looks ok in IE, but there is white space under the logo on firefox how do i sort this in firefox.

**sameer** · 07-28-2006, 04:57 AM

Code:

div.header,div.footer
{
padding:0.5em;
color:white;
background-color:#000055;
clear:left;
}

it should be

Code:

div.header
{
padding:0em 0.5em, 0.5em,0.5em;
color:white;
background-color:#000055;
clear:left;
}
div.footer
{
padding:0.5em;
color:white;
background-color:#000055;
clear:left;
}

If it doesnt work try placing borders around the Div
so that you can know what is expanding/overlapping
u can remove the borders after you fix the code.

**afcbob** · 07-28-2006, 06:34 AM

Ok tried that but still not working. I have now put a red borer around the logo header and menu. and you please see why its still not working right.

**sameer** · 08:18 AM

here is the corrected html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.O Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Marine Fish</title>





<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="index_files/style.css"></head><body>

<div class="container">
    <div class="logo"><img src="index_files/logo.jpg" height="90" alt="logo" width="100%"></div>
    <div class="header">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Marine Life</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Links</a></li>
    </ul>

    </div>
    <div class="left"><h3 class="red">Latest News</h3>
    <p>New Site will be added lots more soon.</p>
    <p>Will be adding images of my tank soon.</p>
    <p>Please vist a very good forum at www.marineifshuk.co.uk</p>
    </div>

    <border="1"></border="1"><div class="content">
    <h2 class="header">Photo Of The Month</h2>
    <p>We
will display a photo here that we think is worth our photo of the
month. Your image does not have to be the most beautiful tank but
something that stands out.</p>
    <p class="small"><img src="index_files/crabsmall.jpg" alt="crabs fighting"><br>Crabs Fighting</p>
    <p>If you think you have a photo of the month please send it to us by email.</p>
    </div>
    <div class="footer">Copyright 2006 by Marine Fish Designed by Robert Nelson.</div>
</div>

</body></html>

the css

Code:

div.container
{
position:absolute;
left:150px;
width:70%;
margin:0px;
border: 1px solid #000055;
}

div.logo
{
height:91px;
}

p.small
{
text-align:center;
font-size:small;
}

div.header
{

color:white;
background-color:#000055;

}

div.footer
{
padding:0.5em;
color:white;
background-color:#000055;
clear:left;
}


h2.header
{
text-align: center;
}

h3.red
{
color:red;
padding:0;
margin:0;
}

div.left
{
font-size:small;
float:left;
width:150px;
hight:300px;
margin:0;
padding:2em;


}

div.content
{
margin-left:190px;
hight:300px;
border-left: 1px solid #000055;
padding:1em;
}

ul
{
text-align:right;
padding:0;
margin:0;
list-style-type:none;
}

a
{
width:6em;
text-decoration:none;
color:white;
background-color:#000055;
padding:0px 15.5px;
border-left:1px solid white;
}

a:hover {background-color:#000088}
li {display:inline}

it NOW works both in IE and FF

**LadynRed** · 10:18 AM

Ok, the only thing that has to be fixed is to remove this:

<p class="small"></p> -- it is above your <ul> for your menu.

Also remove this:

<border="1"><div class="content">

There is no such thing.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!