6 Replies Latest reply on Aug 16, 2007 1:21 PM by Newsgroup_User

    margin / padding problem with firefox/opera/nn

    Level 7
      Hi all, have been round in circles with this one all morning...

      http://www.redsea.co.nz/santa/fluid_test2.html

      I'm trying to have this design fluid - so:
      i have a repeating bg image on the body tag
      #wrapper has a fixed left corner image as bg
      #header has a fixed right corner image as bg

      All that works fine till i put in the text and style it. If the text is
      unstyled all the images stay flush to the top as i want them to. When i
      style the text it produces a margin and the images move down as you can see
      in ff / nn / opera. It works ok in IE.

      I need the text to be about 100px down from the top and preferable be H1.
      I've tried zeroing margins and padding on everything but so far no luck.

      The only thing i haven't done is put the text in another div and put a
      margin on that but i'd prefer not to if i don't have to........... Am i
      missing the obvious? I can't believe i'm stuck on margins....

      tia

      Karen

        • 1. Re: margin / padding problem with firefox/opera/nn
          Level 7
          KarenJ wrote:
          > Hi all, have been round in circles with this one all morning...
          >
          > http://www.redsea.co.nz/santa/fluid_test2.html
          >
          > I'm trying to have this design fluid - so:
          > i have a repeating bg image on the body tag
          > #wrapper has a fixed left corner image as bg
          > #header has a fixed right corner image as bg
          >
          > All that works fine till i put in the text and style it. If the text is
          > unstyled all the images stay flush to the top as i want them to. When i
          > style the text it produces a margin and the images move down as you can
          > see in ff / nn / opera. It works ok in IE.

          add margin: 0; padding: 0; to your #header h1, as below.

          #header h1{
          color: #FFFFFF;
          font-size: 230%;
          font-weight: bold;
          margin: 0;
          padding: 0;
          }

          Change your padding as below:

          #header {
          margin: 0;
          padding: 100px 0 0 0;
          background: url(images/common/temp/header_top_right.jpg)
          no-repeat right;
          height: 200px;
          }







          • 2. Re: margin / padding problem with firefox/opera/nn
            Level 7
            Osgood wrote:


            > add margin: 0; padding: 0; to your #header h1, as below.
            >
            > #header h1{
            > color: #FFFFFF;
            > font-size: 230%;
            > font-weight: bold;
            > margin: 0;
            > padding: 0;
            > }
            >
            > Change your padding as below:
            >
            > #header {
            > margin: 0;
            > padding: 100px 0 0 0;
            > background: url(images/common/temp/header_top_right.jpg) no-repeat
            > right;
            > height: 200px;
            > }

            Actually it's one of those tricky ones where margins are not collapsing.
            Change your css to as below:


            #header {
            background: url(images/header_top_right.jpg) no-repeat right;
            height: 200px;

            }
            #header h1{
            color: #FFFFFF;
            font-size: 230%;
            font-weight: bold;
            margin: 0;
            padding: 100px 0 0 0;
            }

            • 3. Re: margin / padding problem with firefox/opera/nn
              Level 7
              Osgood wrote:


              > Actually it's one of those tricky ones where margins are not collapsing.
              > Change your css to as below:
              >
              >
              > #header {
              > background: url(images/header_top_right.jpg) no-repeat right;
              > height: 200px;
              >
              > }
              > #header h1{
              > color: #FFFFFF;
              > font-size: 230%;
              > font-weight: bold;
              > margin: 0;
              > padding: 100px 0 0 0;
              > }

              But make sure the path to your #header background image is the same as
              your original css. I just changed it to a more simpler path for testing
              purposes.

              That should now solve your problem.


              • 4. Re: margin / padding problem with firefox/opera/nn
                Level 7
                Osgood - that works beautifully, thank you so much, but I don't understand
                why the other ways I tried did not work.... is it an easy explanation?


                cheers,

                Karen

                "Osgood" <notavailable@thisaddress.com> wrote in message
                news:fa0rlm$lvb$2@forums.macromedia.com...
                > Osgood wrote:
                >
                >
                >> Actually it's one of those tricky ones where margins are not collapsing.
                >> Change your css to as below:
                >>
                >>
                >> #header {
                >> background: url(images/header_top_right.jpg) no-repeat right;
                >> height: 200px;
                >> }
                >> #header h1{
                >> color: #FFFFFF;
                >> font-size: 230%;
                >> font-weight: bold;
                >> margin: 0;
                >> padding: 100px 0 0 0;
                >> }
                >
                > But make sure the path to your #header background image is the same as
                > your original css. I just changed it to a more simpler path for testing
                > purposes.
                >
                > That should now solve your problem.
                >
                >

                • 5. Re: margin / padding problem with firefox/opera/nn
                  Level 7
                  KarenJ wrote:

                  > Osgood - that works beautifully, thank you so much, but I don't
                  > understand why the other ways I tried did not work.... is it an easy
                  > explanation?

                  I can't really expalin it simply as I'm not that techincally minded.
                  What happens in some senarios is that the margin either doesnt collapse
                  as you may expect or it does when you don't expect it to.

                  My solution is just to look at the situation and find a way around it.
                  There are always a couple of alternative ways, you just have to know the
                  correct combination.

                  I suspect what was happening is that in your frustratoon is you were
                  forgetting which combination you had tried and never got to the correct
                  one. Just don't panic because the more you panic the less likely you'll
                  be thinking straight.

                  • 6. Re: margin / padding problem with firefox/opera/nn
                    Level 7
                    Thanks Osgood - I certainly spent a long time getting it wrong :-)


                    Karen


                    "Osgood" <notavailable@thisaddress.com> wrote in message
                    news:fa14vb$4b6$1@forums.macromedia.com...
                    > KarenJ wrote:
                    >
                    >> Osgood - that works beautifully, thank you so much, but I don't
                    >> understand why the other ways I tried did not work.... is it an easy
                    >> explanation?
                    >
                    > I can't really expalin it simply as I'm not that techincally minded. What
                    > happens in some senarios is that the margin either doesnt collapse as you
                    > may expect or it does when you don't expect it to.
                    >
                    > My solution is just to look at the situation and find a way around it.
                    > There are always a couple of alternative ways, you just have to know the
                    > correct combination.
                    >
                    > I suspect what was happening is that in your frustratoon is you were
                    > forgetting which combination you had tried and never got to the correct
                    > one. Just don't panic because the more you panic the less likely you'll be
                    > thinking straight.
                    >