HTML Forum

**digits** · 04-10-2009, 12:36 AM

Ok I'm new here to the forums so hello everybody. Also a bit new to the whole coding scene so my problem is as follows. I'm trying to build a simple website and everything looks good in firefox, but in ie 6/7 the nav part of the code wants to push itself down extending down the blue portion of the header area and my links ( home, about us, etc ). Now in ie8 it doesn't do it but there is a color difference which is odd because the color code I used is the exact same as it was in photoshop. I tried the wrap command but it didn't seem to work, I don't know if I'm missing something else or not.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css">
<title>The Country Store - Home</title>
</head>
 
<body>
<div id="header-container">
        <div id="header">
            <div id="logo">
            <a href="#"><img src="logo.png" /></a>
          </div>
            <div id="slogan">
            <a href="#"></a>
            </div>
            <div id="nav">
            <ul>
                <li><a href="#"><img src="home.png" alt="home" /></a></li>
                <li><a href="#"><img src="aboutus.png" alt="about" /></a></li>
                <li><a href="#"><img src="contactus.png" alt="services" /></a></li>
                <li><a href="#"><img src="products.png" alt="products" /></a></li>
                <li><a href="#"><img src="employees.png" alt="employees" /></a></li>
            </ul>
            </div>
        </div>
    </div>
    <div id="mainContent">
    <h1> Main Content </h1>
    <p>under main content</p>
    <h2>sub main heading</h2>
    <p>sub main heading content</p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
<div id="footer">
    <p>copyright</p>
  <!-- end #footer --></div>
</body>
</html>

and here is my css documents code

Code:

@charset "utf-8";
/* CSS Document */
 
body {
    margin: 0px;
    padding: 0px;
}

#header-container {
    width: 100%;
    height: 204px;
    background-color: #0071b2;
}
 
#header {
    background-image: url(header.png);
    background-repeat: no-repeat;
    width: 1024px;
    height: 204px;
    margin: auto;
}
 
#logo{
    float: left;
    padding-top: 15px;
    padding-left: 160px;
}
 
#slogan {
    float: right;
    padding-right: 170px;
    padding-top: 35px;
}
 
img {
    border: none;
}
 
#nav {
    height: 76px;
    width: 1024px;
    padding-top: 162px;
    padding-left: 48px;
}
 
#nav ul
{
    text-align: left;
    margin: auto;
    width: 1024px;
}
 
#nav ul li
{
    display: inline;
    padding: 0px;
    margin: 0px;
}

#footer {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

And the images,

http://i41.tinypic.com/24vmhe1.jpg

http://i40.tinypic.com/qppf1s.jpg

Thanks in advance for all the help

-Frank

**serandfae** · 04-10-2009, 10:13 AM

Define a width for the elements you're floating, for starters. Those floats are to be cleared immediately after whatever's floating around them has. I see a rule name for a <br /> further down, too, that's not defined in the CSS rules.

tim

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!