5 Replies Latest reply on Nov 9, 2008 6:13 AM by lynnegeek

    CSS

    lynnegeek
      Would someone mind checking this site I'm building . My 3 boxes at the bottom look fine in IE7 and FF but not in IE6. I'd like to have them centered across the wrapper evenly and show up like that in all 3 browsers. Right now IE6 moves the 3rd one below the first 2.

      Any feedback would be greatly appreciated.

      Click here for my site.

      Lynne
        • 1. Re: CSS
          jon@cmiwebstudio Level 3
          IE6 is the worst browser ever released. And because It has many bugs and flat out disregards for w3c standards in some cases, you need to write code targeted at just IE6.
          • 2. Re: CSS
            jon@cmiwebstudio Level 3
            <!--[if IE 6]>
            <link href="ie6_hacks.css" rel="stylesheet" type="text/css"> <![endif]-->
            • 3. Re: CSS
              Rockyjd
              Hi Lynne,

              Sorry to tell you but I'm using FF3 on a Mac and the third box is not inline with the other two but sitting below the first one.

              It must have a something to do with your CSS positioning of the boxes.
              If you paste the CSS here, someone should be able to help you.

              Good luck.
              • 4. Re: CSS
                CaryD Level 2
                Try this styling:

                #leftbluebox {
                float: left;
                background: url(../images/bluebox.jpg);
                background-repeat:no-repeat;
                margin: 2em .5em 0 1.5em;
                width: 235px;
                height: 245px;
                display: inline;
                }

                #middlebluebox {
                float: left;
                background: url(../images/bluebox_success.jpg);
                background-repeat:no-repeat;
                margin: 2em .5em 0 1em;
                width: 235px;
                height: 245px;
                }

                #rightbluebox {
                float:left;
                background: url(../images/bluebox.jpg);
                background-repeat:no-repeat;
                margin: 2em 0 0 1em;
                width: 235px;
                height: 245px;
                }

                I changed some of the margins and made the first one display:inline as it had a left margin, which is the direction it's floating.

                http://www.positioniseverything.net/explorer/doubled-margin.html


                • 5. Re: CSS
                  lynnegeek Level 1
                  CaryD
                  You are a genius! Thanks...it worked perfectly. Also thanks for the link explaining the problem.

                  Lynne