Need help with header problem


i'm designing webpage , i'm having bit of problem float drop issue ie6 , ie7. fine in ff , ie8. nav portion wants drop. i've set wrapper , still doesn't seem fix problem. can point out in code problem , how fix this.

 

 

css

 

@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: 250px;
}

#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 margins of first element in footer avoid possibility of margin collapse - space between divs */
    padding: 0px 0; /* padding on element create space, the margin have, without margin collapse issue */
    background-color: #999;
}

 

#wrapper {
    width: 100%;
    height: 250px;
}

 

#maincontent {
    padding-left: 260px;
   
}

 

 

html

 

<!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="wrapper">
    <div id="header-container">
        <div id="header">
            <div id="logo">
      <img src="logo.png" />
      </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>
    <div id="maincontent">
    <h1> main content </h1>
    <p>under main content    </p>
    <h2>sub main heading</h2>
    <p>sub main heading content</p>
    </div>
    <!-- end #maincontent -->
    <!-- clearing element should follow #maincontent div in order force #container div contain child floats --><br class="clearfloat" />
<!-- end #container -->
<div id="footer">
    <p>copyright</p>
  <!-- end #footer --></div>
</body>
</html>

i'm not advanced user means it's harder me work out what's happening without seeing page up.  if have on server, link helpful.  whilst wait expert chip in have go @ putting:

 

overflow: hidden;

 

in css rule for

 

#header-container

 

and/or

 

#header

 

fingers crossed!

 

martin



More discussions in Dreamweaver support forum


adobe

Comments

Popular posts from this blog

Flip address is out of range arduino uno r3

Arduino Uno not uploading

Indesign and MathType fonts