SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: IE6 troubles

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 troubles

    Hello,

    I'm having trouble with a new design I'm trying to complete. I wondered if someone here might be able to help me understand what's happening? I know IE6 has funky ways of displaying things, but for me it's always a guessing game to figure out what exactly what will work. I would love for someone to tell my why IE6 is doing what it's doing on the following page so I can understand how to eliminate the problem.

    thewebdesignloft.com/new/index.htm

    I've finally gotten it to work (I think) in FF, Opera, and IE7. IE6, however, is a different story. Now I must say that in order to make it work in FF and Opera, I had to add overflow:hidden; to two containers. I'm not sure if that was the right thing to do. Here's the relevant CSS:

    /*HEADER*/

    #mastHead { /*this is the large green area*/
    width: 100%;
    height: 250px;
    background: #65aa69;
    overflow: hidden;
    }

    #header { /*this is just supposed to be like a white band across the mastHead*/
    width: 100%;
    height: 130px;
    background: #fff;
    margin-top: 5px;
    border-top: 5px solid #acfaa4;
    }

    #headContainer { /*I added this so the logo and Get Started would have a containing div since they are both floating*/
    width: 760px;
    margin: 0 auto;
    overflow: hidden;
    }

    #logo {
    width: 286px;
    height: 125px;
    margin: 0 auto;
    float: left;
    padding: 0;
    }

    #getStarted {
    width: 300px;
    float: right;
    text-align: right;
    margin: 0;
    font-family: georgia, 'times new roman', serif;
    color: #069;
    font-size: 1.8em;
    padding: 0;
    }

    #byLineContainer { /*this is the white italics at the bottom of the green*/
    width: 760px;
    margin: 30px auto 0 auto;
    }

    #byLine {
    width: 600px;
    float: left;
    color: #fff;
    text-align: left;
    font-size: 2em;
    font-family: georgia, 'times new roman', serif;
    font-style: italic;
    clear: both;
    }


    I've been accused of being "div happy" before, and I'm sure that's true even now. But do you see why IE6 is doing that? Why is it?? And how do I fix it?

    I will be ever so grateful for any help!
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add overflow: hidden to #header as well.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I tried that, but then the navigation disappears in all browsers. But then it got me to thinking....why would there even be an overflow on the #header? There shouldn't. And then I saw it. My dumb mistake. I had accidentally placed the navigation inside that div. I moved the end of #header to the proper place and now all is well.

    Thanks for the nudge.
    Susan
    Auxano Creative (formerly The WebDesign Loft)


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
  •