6 Replies Latest reply on Apr 26, 2006 10:57 PM by Newsgroup_User

    Design breaks - box model problem

    Level 7
      Hello all, again

      I've got an additional problem in that my CSS design breaks in IE6 but is
      okay in FF. I know it's got to be something to do with the box model but I
      can't for the life of me figure out what's wrong.

      My numbers add up - the main container is 819px, there are 4 divs, the first
      is 610 px wide (top left), the second 209 (top right), the third 610 (bottom
      left) and the fourth 206 (bottom right) - this one smaller for aesthetic
      reasons.

      The first div, has a 10px margin on the left but I've taken this off the
      total div width so the div width is 600px + 10px margin-left. This is where
      the problem is - when I reduce the div width to 590px, it displays fine in
      IE6 but is slightly out of whack in FF. I hope this is making sense....

      There's no doubt some glaring error here - I just can't see it.

      URL: www.patriotsarms.co.uk/headerMain.php

      Thanks again
      Judi


        • 1. Re: Design breaks - box model problem
          Level 7
          It works on IE7 Beta 2. Go figure. They must have fixed some of the CSS
          problems....

          I'm on my laptop now which only has FF and IE7 installed - is it still
          broken on IE6 or did I inadvertently manage to fix the problem?

          Incidently, anyone know if I can run IE6 and 7 concurrently?

          "Judith Kruger" <jakabout@yahoo.co.uk> wrote in message
          news:e2oj7f$g92$1@forums.macromedia.com...
          > Hello all, again
          >
          > I've got an additional problem in that my CSS design breaks in IE6 but is
          > okay in FF. I know it's got to be something to do with the box model but
          > I can't for the life of me figure out what's wrong.
          >
          > My numbers add up - the main container is 819px, there are 4 divs, the
          > first is 610 px wide (top left), the second 209 (top right), the third 610
          > (bottom left) and the fourth 206 (bottom right) - this one smaller for
          > aesthetic reasons.
          >
          > The first div, has a 10px margin on the left but I've taken this off the
          > total div width so the div width is 600px + 10px margin-left. This is
          > where the problem is - when I reduce the div width to 590px, it displays
          > fine in IE6 but is slightly out of whack in FF. I hope this is making
          > sense....
          >
          > There's no doubt some glaring error here - I just can't see it.
          >
          > URL: www.patriotsarms.co.uk/headerMain.php
          >
          > Thanks again
          > Judi
          >


          • 2. Re: Design breaks - box model problem
            Excavatorak
            >Incidently, anyone know if I can run IE6 and 7 concurrently?

            You can get vmware server for free at http://www.vmware.com/products/server/

            The way I understand it is you install xp on that along with ie7, then you can test your page with both browsers.
            Not sure it's worth all that... I think I'll just keep IE6 on my laptop.
            • 3. Re: Design breaks - box model problem
              Excavatorak Level 1
              #table_01 is 819px wide

              headlogo is 600px with 10px marginleft ... headlinks is 209px wide

              That adds up to 819 which is fine for most browsers but IE6 adds an extra 3px (only 3??? Pretty sure...) to each float...
              Try this CSS and see if it works for you:

              • 4. Re: Design breaks - box model problem
                Level 7
                Here's the problem in IE -

                DIV.headLogo_ {
                MARGIN-TOP: 8px;
                FLOAT: left;
                MARGIN-LEFT: 10px;


                Any time you have a margin on the same side as the float, IE doubles the
                margin. The solution is to make each such element display:inline. It will
                have no effect on other browsers, since it's a floated element anyhow, but
                it keeps IE from doing its nasty deed.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.dreamweavermx-templates.com - Template Triage!
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                ==================


                "Excavatorak" <stewart@nopeople.com> wrote in message
                news:e2oruo$r53$1@forums.macromedia.com...
                > #table_01 is 819px wide
                >
                > headlogo is 600px with 10px marginleft ... headlinks is 209px wide
                >
                > That adds up to 819 which is fine for most browsers but IE6 adds an extra
                > 3px
                > (only 3??? Pretty sure...) to each float...
                > Try this CSS and see if it works for you:
                >
                >
                >
                > div.Table_01 {
                > width:819px;
                > height:287px;
                > }
                >
                > div.headLogo_ {
                > width:500px;
                > height:44px;
                > margin-left:10px;
                > margin-top:8px;
                > float: left;
                > }
                >
                > div.headLinks_ {
                > float:right;
                > width:209px;
                > height:52px;
                > text-align:center;
                >
                > }
                >


                • 5. Re: Design breaks - box model problem
                  Level 7
                  I believe Murray answered your question. I just wanted to point out that
                  you need to declare a background color to your pages - I'm seeing my
                  browsers' hotpink background instead of your intended white ;-)

                  --
                  Nadia
                  Adobe� Community Expert : Dreamweaver
                  --------------------------------------------
                  http://www.csstemplates.com.au - CSS Templates | Free Templates
                  --------------------------------------------
                  http://www.DreamweaverResources.com - Dropdown Menu Templates|Tutorials
                  http://www.macromedia.com/devnet/dreamweaver/css.html - CSS Tutorials
                  -------------------------------------------------


                  "Judith Kruger" <jakabout@yahoo.co.uk> wrote in message
                  news:e2oj7f$g92$1@forums.macromedia.com...
                  > Hello all, again
                  >
                  > I've got an additional problem in that my CSS design breaks in IE6 but is
                  > okay in FF. I know it's got to be something to do with the box model but
                  > I can't for the life of me figure out what's wrong.
                  >
                  > My numbers add up - the main container is 819px, there are 4 divs, the
                  > first is 610 px wide (top left), the second 209 (top right), the third 610
                  > (bottom left) and the fourth 206 (bottom right) - this one smaller for
                  > aesthetic reasons.
                  >
                  > The first div, has a 10px margin on the left but I've taken this off the
                  > total div width so the div width is 600px + 10px margin-left. This is
                  > where the problem is - when I reduce the div width to 590px, it displays
                  > fine in IE6 but is slightly out of whack in FF. I hope this is making
                  > sense....
                  >
                  > There's no doubt some glaring error here - I just can't see it.
                  >
                  > URL: www.patriotsarms.co.uk/headerMain.php
                  >
                  > Thanks again
                  > Judi
                  >


                  • 6. Re: Design breaks - box model problem
                    Level 7
                    Thanks all

                    Murray: Your solution worked perfectly. So quick and simple. Oh dear.

                    >The solution is to make each such element display:inline.

                    Nadia: You must get some pretty interesting colour combinations..... )
                    Thanks for pointing that out.

                    >I just wanted to point out that you need to declare a background color to
                    >your pages - I'm seeing my
                    browsers' hotpink background instead of your intended white ;-)

                    Excavatorak: Thanks for your suggestions - would have worked as well, I am
                    sure.

                    Cheers
                    Judi


                    "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                    news:e2p5td$8l4$1@forums.macromedia.com...
                    > Here's the problem in IE -
                    >
                    > DIV.headLogo_ {
                    > MARGIN-TOP: 8px;
                    > FLOAT: left;
                    > MARGIN-LEFT: 10px;
                    >
                    >
                    > Any time you have a margin on the same side as the float, IE doubles the
                    > margin. The solution is to make each such element display:inline. It
                    > will have no effect on other browsers, since it's a floated element
                    > anyhow, but it keeps IE from doing its nasty deed.
                    >
                    > --
                    > Murray --- ICQ 71997575
                    > Adobe Community Expert
                    > (If you *MUST* email me, don't LAUGH when you do so!)
                    > ==================
                    > http://www.dreamweavermx-templates.com - Template Triage!
                    > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    > ==================
                    >
                    >
                    > "Excavatorak" <stewart@nopeople.com> wrote in message
                    > news:e2oruo$r53$1@forums.macromedia.com...
                    >> #table_01 is 819px wide
                    >>
                    >> headlogo is 600px with 10px marginleft ... headlinks is 209px wide
                    >>
                    >> That adds up to 819 which is fine for most browsers but IE6 adds an extra
                    >> 3px
                    >> (only 3??? Pretty sure...) to each float...
                    >> Try this CSS and see if it works for you:
                    >>
                    >>
                    >>
                    >> div.Table_01 {
                    >> width:819px;
                    >> height:287px;
                    >> }
                    >>
                    >> div.headLogo_ {
                    >> width:500px;
                    >> height:44px;
                    >> margin-left:10px;
                    >> margin-top:8px;
                    >> float: left;
                    >> }
                    >>
                    >> div.headLinks_ {
                    >> float:right;
                    >> width:209px;
                    >> height:52px;
                    >> text-align:center;
                    >>
                    >> }
                    >>
                    >
                    >