8 Replies Latest reply on Aug 30, 2008 6:49 PM by Newsgroup_User

    2 column problem in IE7

    BruceMCE Level 1
      My page works fine in Opera, but not in IE7. It's just a 2 column layout, but the right column drops down below the left column. The page is located here: http://www.mistchild.com/nyc/08/index08.htm
      Here's the CSS
      body {
      margin:0;
      background-color:#000;
      font-size:62.5%;
      text-align:center;
      min-width:800px;
      }
      #wrapper {
      margin:0 auto;
      width:800px;
      text-align: left;
      }
      #banner {
      width:800px;
      height:190px;
      background-image:url(../images/site/header1.png);
      background-repeat:no-repeat;
      position:relative;
      float:left;
      }
      .leftcontent {
      margin:10px;
      width:490px;
      /*height:500px;
      padding:0px 5px 5px 5px;*/
      border:#CCC 3px solid;
      background-image:url(../images/site/blacktransparency.png);
      background-repeat:repeat;
      position:relative;
      float:left;
      }

      .rightcontent, .tourinfo {
      width:250px;
      margin:10px;
      border:#CCC 3px solid;
      background-image:url(../images/site/blacktransparency.png);
      background-repeat:repeat;
      position:relative;
      float:right;
      }
      .tourinfo {
      overflow:scroll;
      height:500px;
      }
        • 1. Re: 2 column problem in IE7
          Level 7
          IE is famous for adding margins.
          Try narrowing the width of one of your non-wrapper containers


          "BruceMCE" <webforumsuser@macromedia.com> wrote in message
          news:g9cgql$l1r$1@forums.macromedia.com...
          > My page works fine in Opera, but not in IE7. It's just a 2 column layout,
          > but
          > the right column drops down below the left column. The page is located
          > here:
          > http://www.mistchild.com/nyc/08/index08.htm
          > Here's the CSS
          > body {
          > margin:0;
          > background-color:#000;
          > font-size:62.5%;
          > text-align:center;
          > min-width:800px;
          > }
          > #wrapper {
          > margin:0 auto;
          > width:800px;
          > text-align: left;
          > }
          > #banner {
          > width:800px;
          > height:190px;
          > background-image:url(../images/site/header1.png);
          > background-repeat:no-repeat;
          > position:relative;
          > float:left;
          > }
          > .leftcontent {
          > margin:10px;
          > width:490px;
          > /*height:500px;
          > padding:0px 5px 5px 5px;*/
          > border:#CCC 3px solid;
          > background-image:url(../images/site/blacktransparency.png);
          > background-repeat:repeat;
          > position:relative;
          > float:left;
          > }
          >
          > .rightcontent, .tourinfo {
          > width:250px;
          > margin:10px;
          > border:#CCC 3px solid;
          > background-image:url(../images/site/blacktransparency.png);
          > background-repeat:repeat;
          > position:relative;
          > float:right;
          > }
          > .tourinfo {
          > overflow:scroll;
          > height:500px;
          > }
          >


          • 2. Re: 2 column problem in IE7
            Level 7
            "BruceMCE" <webforumsuser@macromedia.com> wrote in message
            news:g9cgql$l1r$1@forums.macromedia.com...
            > My page works fine in Opera, but not in IE7. It's just a 2 column layout,
            > but
            > the right column drops down below the left column. The page is located
            > here:
            > http://www.mistchild.com/nyc/08/index08.htm
            > Here's the CSS
            > body {
            > margin:0;
            > background-color:#000;
            > font-size:62.5%;
            > text-align:center;
            > min-width:800px;
            > }
            > #wrapper {
            > margin:0 auto;
            > width:800px;
            > text-align: left;
            > }
            > #banner {
            > width:800px;
            > height:190px;
            > background-image:url(../images/site/header1.png);
            > background-repeat:no-repeat;
            > position:relative;
            > float:left;
            > }
            > .leftcontent {
            > margin:10px;
            > width:490px;
            > /*height:500px;
            > padding:0px 5px 5px 5px;*/
            > border:#CCC 3px solid;
            > background-image:url(../images/site/blacktransparency.png);
            > background-repeat:repeat;
            > position:relative;
            > float:left;
            > }
            >
            > .rightcontent, .tourinfo {
            > width:250px;
            > margin:10px;
            > border:#CCC 3px solid;
            > background-image:url(../images/site/blacktransparency.png);
            > background-repeat:repeat;
            > position:relative;
            > float:right;
            > }
            > .tourinfo {
            > overflow:scroll;
            > height:500px;
            > }

            Add "position:relative" to #wrapper and see how it goes

            --
            Thierry
            Articles and Tutorials: http://www.TJKDesign.com/go/?0
            --
            http://developer.yahoo.com/ helps you build applications and mashups

            • 3. Re: 2 column problem in IE7
              BruceMCE Level 1
              Thanks, I've tried both suggestions, and neither works. Any other ideas?
              • 4. Re: 2 column problem in IE7
                Level 7
                Hi.
                First of all fix the 197 validating errors:
                http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mistchild.com%2Fnyc%2F08%2Fin dex08.htm

                In your css file delete float:left in your #container.

                Create in your css file a clear property somethig like this:

                .clearit {
                clear:both;
                }

                And then apply it in your page just at the end of your right content and
                before of the closing container div. Like this:

                </div>
                <div class="clearit"></div>
                </div><!--end container div-->

                Also you have an error with the units you are using for your fonts, the
                correct is em not ems.

                Hope this help you.

                "BruceMCE" <webforumsuser@macromedia.com> escribió en el mensaje de noticias
                news:g9cgql$l1r$1@forums.macromedia.com...
                > My page works fine in Opera, but not in IE7. It's just a 2 column layout,
                > but
                > the right column drops down below the left column. The page is located
                > here:
                > http://www.mistchild.com/nyc/08/index08.htm
                > Here's the CSS
                > body {
                > margin:0;
                > background-color:#000;
                > font-size:62.5%;
                > text-align:center;
                > min-width:800px;
                > }
                > #wrapper {
                > margin:0 auto;
                > width:800px;
                > text-align: left;
                > }
                > #banner {
                > width:800px;
                > height:190px;
                > background-image:url(../images/site/header1.png);
                > background-repeat:no-repeat;
                > position:relative;
                > float:left;
                > }
                > .leftcontent {
                > margin:10px;
                > width:490px;
                > /*height:500px;
                > padding:0px 5px 5px 5px;*/
                > border:#CCC 3px solid;
                > background-image:url(../images/site/blacktransparency.png);
                > background-repeat:repeat;
                > position:relative;
                > float:left;
                > }
                >
                > .rightcontent, .tourinfo {
                > width:250px;
                > margin:10px;
                > border:#CCC 3px solid;
                > background-image:url(../images/site/blacktransparency.png);
                > background-repeat:repeat;
                > position:relative;
                > float:right;
                > }
                > .tourinfo {
                > overflow:scroll;
                > height:500px;
                > }
                >

                • 5. Re: 2 column problem in IE7
                  Level 7
                  "BruceMCE" <webforumsuser@macromedia.com> wrote in message
                  news:g9ck7k$o9u$1@forums.macromedia.com...
                  > Thanks, I've tried both suggestions, and neither works. Any other ideas?

                  Your use of HTML comments is a problem. A pair of "--" is what denotes the
                  begining and the end of a comment, so you DO NOT want to use strings like
                  these in your code:

                  ----START CODE----- and ----END CODE---

                  as you do below:

                  <!--USE THE FOLLOWING CODE TO ADD MORE PRESS RELEASES
                  ----START CODE-----
                  <div class="AccordionPanel">
                  <div class="AccordionPanelTab">Label 4</div>

                  <div class="AccordionPanelContent">Content 2</div>
                  </div>
                  ----END CODE---
                  -->

                  As Miguel suggested you have many other issues, so it could be anything...


                  --
                  Thierry
                  Articles and Tutorials: http://www.TJKDesign.com/go/?0
                  --
                  http://developer.yahoo.com/ helps you build applications and mashups

                  • 6. Re: 2 column problem in IE7
                    BruceMCE Level 1
                    I fixed all of the errors and it passes the validator, but I'm still running into the same problem. Any other ideas?
                    • 7. 2 column problem in IE7
                      BruceMCE Level 1
                      Actually, I got the 2 column layout to work by eliminating the float command in the container div, but doing that bumped the div down the page, so it now appears just above the div with the news. The weird thing is that the container div is supposed to contain the content that now appears above it.....
                      Also, now in Opera, the banner div appears to be missing...
                      • 8. Re: 2 column problem in IE7
                        Level 7
                        "BruceMCE" <webforumsuser@macromedia.com> wrote in message
                        news:g9csgf$2ts$1@forums.macromedia.com...
                        > Actually, I got the 2 column layout to work by eliminating the float
                        > command in
                        > the container div, but doing that bumped the div down the page, so it now
                        > appears just above the div with the news. The weird thing is that the
                        > container
                        > div is supposed to contain the content that now appears above it.....

                        I'm not sure what you're saying, and I don't have time to look into the
                        whole construct, but if you say removing the float created a problem in IE,
                        then you may want to try this:

                        #container {zoom:1;}

                        That should bring the "news" box back into the main wrapper

                        --
                        Thierry
                        Articles and Tutorials: http://www.TJKDesign.com/go/?0
                        --
                        http://developer.yahoo.com/ helps you build applications and mashups