SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member mecubetri's Avatar
    Join Date
    Dec 2004
    Location
    kansas city, MO
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    header disappears in IE

    I'm pretty new to CSS and not real sure why my page displays perfectly in Mozilla, but in IE doesn't have my header or my navigation....

    www.coreyandjustinwedding.com/indSetup.htm
    www.coreyandjustinwedding.com/styles/fixedwidth.css

    <html>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <img src="../images/header.png" alt="wedding bells" width="880" height="215" />
    </div>
    <div id="content">
    <h1>This is the Content</h1>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    <p>content...content...content...content...</p>
    </div>
    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="" title="mainPage">Main</a></li>
    <li><a href="" title="rsvpPage">RSVP</a></li>
    <li><a href="" title="bridesmaidPage">For Bridesmaids</a></li>
    <li><a href="" title="photoPage">Photo Gallery</a></li>
    <li><a href="" title="registryPage">Registry</a></li>
    </ul>
    </div>
    <div id="footer">
    This is the FOOTER
    </div>
    </div>
    </body>
    </html>

    /* CSS Document */

    body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    text-align: center;
    }

    #wrapper {
    position: relative;
    text-align: left;
    width: 880px;
    margin-right: auto;
    margin-left: auto;
    padding: 122px 0 0 0;
    border-left: 2px solid #6B8DAD;
    border-right: 2px solid #6B8DAD;
    border-bottom: 2px solid #6B8DAD;
    }

    #header {
    position: absolute;
    top: 1px;
    left: 1px;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    height: 215px;
    width: 880px;
    background-image: none;
    overflow: visible;
    visibility: visible;
    z-index: auto;
    clear: both;
    }

    #content {
    margin-left: 25px;
    padding: 100px 225px 0 0;
    width: 880px;
    float: left;
    }

    #content p {
    font-size: 80%;
    line-height: 1.8em;
    padding-left: 2em;
    }

    #content h1 {
    font: normal 180% Georgia, "Times New Roman", Times, serif;
    color: #6B8DAD;
    background-color: transparent;
    }

    #content h2 {
    font-size: 120%;
    color: #90A9C1;
    background-color: transparent;
    border-bottom: 1px solid #6B8DAD;
    }

    #navcontainer {
    position: absolute;
    width: 450;
    top: 184px;
    left: 71px;
    float: left;
    margin: 10px 0 0 30px;
    padding: 0;
    height: 20px;
    visibility: visible;
    z-index: auto;
    overflow: visible;


    }

    #navcontainer ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #navcontainer ul li a {
    background: #fff;
    width: 85px;
    height: 20px;
    border-top: 1px solid #698BAB;
    border-left: 1px solid #698BAB;
    border-bottom: 1px solid #698BAB;
    border-right: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: #698BAB;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }

    #navcontainer ul li a:hover {
    color: #C9D5E1;
    background: #698BAB;
    }

    #navcontainer a:active {
    background: #C9D5E1;
    color: #698BAB;
    }

    #navcontainer li#active a {
    background: #C9D5E1;
    border: 1px solid #698BAB;
    color: #fff;
    }

    #footer {
    padding: 5px;
    font-size: 70%;
    color: #FFFFFF;
    background-color: #698BAB;
    clear: both;
    text-align: center;
    vertical-align: middle;



    }

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am in IE and see the header and navigation just fine.

  3. #3
    SitePoint Member mecubetri's Avatar
    Join Date
    Dec 2004
    Location
    kansas city, MO
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to anyone trying to figure this out.....

    I fixed the problem and forgot to post the answer!

    For anyone who is curious the problem was in the #content.

    float: left; had to be removed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •