2 Replies Latest reply on Aug 4, 2008 5:48 PM by Newsgroup_User

    CSS width problem

    matthew stuart Level 2
      I love tables. I say they are needed to be 800 pixels with 10 px padding and they work in any browser, but not CSS, oh no!

      So, that's my problem. I have a div which I need to be 800 pixels wide with 10 px padding. In IE it displays as I expect it to, but in Safari and Firefox it displays with an extra 20 pixels width. With a width of 780 and 10 padding it displays correctly in Safari and Firefox, but comes up 20 pixels short in IE.

      Here's my style:

      #outerWrapper #contentWrapper #content {
      background-color: #ebebeb;
      margin: 0;
      padding: 10px;
      position: absolute;
      top: 362px;
      width: 780px;
      }

      So this displays OK in Safari and Firefox, but short in IE. What is the best way to fix this? Should I just use tables? ;-)

      I have a lot of pain trying to get to grips with CSS and I am in a new world of pain yet again.

      Heres the other style mentioned in the style above just incase my problem lies here:

      #outerWrapper {
      max-width: 800px;
      min-width: 800px;
      text-align: left; /* Redefines the text alignment defined by the body element. */
      width: 800px;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
      }

        • 1. Re: CSS width problem
          Level 7
          "matthew stuart" <webforumsuser@macromedia.com> wrote in message
          news:g786np$s4a$1@forums.macromedia.com...
          >I love tables. I say they are needed to be 800 pixels with 10 px padding
          >and
          > they work in any browser, but not CSS, oh no!
          >
          > So, that's my problem. I have a div which I need to be 800 pixels wide
          > with 10
          > px padding. In IE it displays as I expect it to, but in Safari and Firefox
          > it
          > displays with an extra 20 pixels width. With a width of 780 and 10 padding
          > it
          > displays correctly in Safari and Firefox, but comes up 20 pixels short in
          > IE.
          >
          > Here's my style:
          >
          > #outerWrapper #contentWrapper #content {
          > background-color: #ebebeb;
          > margin: 0;
          > padding: 10px;
          > position: absolute;
          > top: 362px;
          > width: 780px;
          > }
          >
          > So this displays OK in Safari and Firefox, but short in IE. What is the
          > best
          > way to fix this? Should I just use tables? ;-)

          Safari and Firefox are right, but IE is wrong here. Google "box model" to
          understand the box construct (border, padding and width/height add up).
          My guess is that you're sending IE into quirks mode ("bad" doctype, xml
          prolog, html comment before the DTD declaration, etc.) and IE 6 into quirks
          mode behaves like IE 5 (see "broken box model").

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

          • 2. Re: CSS width problem
            Level 7
            .oO(matthew stuart)

            >I love tables. I say they are needed to be 800 pixels with 10 px padding and
            >they work in any browser, but not CSS, oh no!
            >
            > So, that's my problem. I have a div which I need to be 800 pixels wide with 10
            >px padding.

            This will cause a horizontal scrollbar on systems that only have 800px
            screen width available. If this is for a fixed-width layout, go for
            760px as your target width. Better would be a flexible layout, though.

            >In IE it displays as I expect it to, but in Safari and Firefox it
            >displays with an extra 20 pixels width. With a width of 780 and 10 padding it
            >displays correctly in Safari and Firefox, but comes up 20 pixels short in IE.

            It's an old and known box model bug in IE.

            > Here's my style:
            >
            > #outerWrapper #contentWrapper #content {
            > background-color: #ebebeb;
            > margin: 0;
            > padding: 10px;
            > position: absolute;
            > top: 362px;
            > width: 780px;
            > }
            >
            > So this displays OK in Safari and Firefox, but short in IE. What is the best
            >way to fix this? Should I just use tables? ;-)

            No. You should let IE render the pages in standards mode instead of
            quirks mode, then you'll get the same results like in modern browsers.

            Make sure that

            * the markup is valid
            * you use a complete document type declaration including a URL and
            * there's nothing before the DOCTYPE line.

            > I have a lot of pain trying to get to grips with CSS and I am in a new world
            >of pain yet again.
            >
            > Heres the other style mentioned in the style above just incase my problem lies
            >here:
            >
            > #outerWrapper {
            > max-width: 800px;
            > min-width: 800px;

            What's this for? IE 6 doesn't support these properties and setting them
            to the same value is kinda pointless.

            > text-align: left; /* Redefines the text alignment defined by the body
            >element. */

            Another ugly hack. Centering a block-level element is done with setting
            its left and right margin to 'auto', that's all. No text-align needed.

            > width: 800px;
            > margin-top: 0;
            > margin-right: auto;
            > margin-bottom: 0;
            > margin-left: auto;
            > }

            The entire block from above should be just this:

            #outerWrapper {
            margin: 0 auto;
            width: 800px; /* or less, as said before */
            }

            Micha