18 Replies Latest reply on May 15, 2006 9:33 AM by Newsgroup_User

    CSS Hunt - IE Extra Space

    Level 7
      I've searched and tried and tried to see what could be causing my error
      here, but to not avail.

      http://demo.mediachurch.com/test/header.php

      In IE only, it looks like my graphic is getting a 2 px right-margin on it,
      but I don't know how it could be. If you can take a peek and see what I'm
      missing, please let me know.

      (this is in ie, ff is working fine)
      My Content (wrapper) is set to a width of 757, 0 padding 2 px border for
      interior width of 754.

      My Quote (the green square) is set to 175px wide, with 2px padding, and a
      1px right-border for a width of 180.

      My Top Menu (Members, Choir, Youth) has a width of 573.

      Now - all of this works xbrowser, with some minor width adjustments (ff
      widths are not so wide). In IE, my figures add up so that the top menu fits
      nicely in the hole I've made for it.

      My Logo has a width of only 570, and the image is only 570, no margins or
      padding set. I have specified the image to have no margins or padding set,
      either. If you take this 570 and add it to the quote, you get 750, which
      should give me enough room for the image, with 3 px to spare. *HOWEVER*,
      when I increase the Logo to a width of 571, it falls below the quote. When
      it's beside the quote, I get the 2 pix difference. ARRRGH!

      I have the CSS split so that if you view source you'll see a conditional
      statement. Compiled, the CSS looks like this (FF gets fed different
      widths):

      /*This is the main "content" which will hold everything relevant to our site
      */
      .content {
      margin: 15px auto 0 auto;
      padding: 0;
      width: 757px;
      background: #fff;
      border: 2px solid #000;
      }

      /*
      This section holds the top elments like quote, logo and top menu.
      It has a background color in case of any overlap between browsers
      */
      .top {background: #fc0;}

      /*The quote section (ie, top left) is defined here */
      .quote {
      margin: 0;
      padding: 2px;
      float: left;
      width: 175px;
      height: 143px;
      background: #5B6A51;
      border-right: 1px solid #000;
      }

      /*The top menu is definted here */
      .menuTop {
      margin: 0;
      padding: 0;
      float: left;
      width: 573px;
      font-size: 10pt;
      color: #000;
      background: #607CA4;
      text-align: right;
      border-bottom: 1px solid #000;
      }

      .logo {
      margin: 0;
      padding: 0px;
      float: left;
      width: 570px;
      background: #FFF;
      }

      .logo img {margin: 0; padding: 0}


      --

      TIA,

      Jon


        • 1. Re: CSS Hunt - IE Extra Space
          Level 7
          div.logo is 572px wide, and the image is 570px wide?

          And why use a class for that rather than an ID - will you reuse .logo?

          And why is there a span in there?

          --
          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
          ==================


          "crash" <crash@bcdcdigital.com> wrote in message
          news:e42fhl$5o2$1@forums.macromedia.com...
          > I've searched and tried and tried to see what could be causing my error
          > here, but to not avail.
          >
          > http://demo.mediachurch.com/test/header.php
          >
          > In IE only, it looks like my graphic is getting a 2 px right-margin on it,
          > but I don't know how it could be. If you can take a peek and see what I'm
          > missing, please let me know.
          >
          > (this is in ie, ff is working fine)
          > My Content (wrapper) is set to a width of 757, 0 padding 2 px border for
          > interior width of 754.
          >
          > My Quote (the green square) is set to 175px wide, with 2px padding, and a
          > 1px right-border for a width of 180.
          >
          > My Top Menu (Members, Choir, Youth) has a width of 573.
          >
          > Now - all of this works xbrowser, with some minor width adjustments (ff
          > widths are not so wide). In IE, my figures add up so that the top menu
          > fits nicely in the hole I've made for it.
          >
          > My Logo has a width of only 570, and the image is only 570, no margins or
          > padding set. I have specified the image to have no margins or padding
          > set, either. If you take this 570 and add it to the quote, you get 750,
          > which should give me enough room for the image, with 3 px to spare.
          > *HOWEVER*, when I increase the Logo to a width of 571, it falls below the
          > quote. When it's beside the quote, I get the 2 pix difference. ARRRGH!
          >
          > I have the CSS split so that if you view source you'll see a conditional
          > statement. Compiled, the CSS looks like this (FF gets fed different
          > widths):
          >
          > /*This is the main "content" which will hold everything relevant to our
          > site */
          > .content {
          > margin: 15px auto 0 auto;
          > padding: 0;
          > width: 757px;
          > background: #fff;
          > border: 2px solid #000;
          > }
          >
          > /*
          > This section holds the top elments like quote, logo and top menu.
          > It has a background color in case of any overlap between browsers
          > */
          > .top {background: #fc0;}
          >
          > /*The quote section (ie, top left) is defined here */
          > .quote {
          > margin: 0;
          > padding: 2px;
          > float: left;
          > width: 175px;
          > height: 143px;
          > background: #5B6A51;
          > border-right: 1px solid #000;
          > }
          >
          > /*The top menu is definted here */
          > .menuTop {
          > margin: 0;
          > padding: 0;
          > float: left;
          > width: 573px;
          > font-size: 10pt;
          > color: #000;
          > background: #607CA4;
          > text-align: right;
          > border-bottom: 1px solid #000;
          > }
          >
          > .logo {
          > margin: 0;
          > padding: 0px;
          > float: left;
          > width: 570px;
          > background: #FFF;
          > }
          >
          > .logo img {margin: 0; padding: 0}
          >
          >
          > --
          >
          > TIA,
          >
          > Jon
          >


          • 2. Re: CSS Hunt - IE Extra Space
            Level 7
            Murray-

            Agreed on the class - I'm not reusing it. I have just setup everything with
            classes and need to go back and put in ID's for those items, really.

            div.logo is currently set at 570 wide - the 572 is only for FF - which works
            perfect. The 572 is set in the firefox css, the 570 is set in the ie style
            sheet.

            And where are you seeing the span? I don't show one in either the test
            header.php or my indexa.php file on the root.

            Thanks for taking a look, this is just driving me nuts.

            Jon

            > div.logo is 572px wide, and the image is 570px wide?
            >
            > And why use a class for that rather than an ID - will you reuse .logo?
            >
            > And why is there a span in there?
            >
            > --
            > Murray --- ICQ 71997575


            • 3. Re: CSS Hunt - IE Extra Space
              Level 7
              Quit trying to serve two stylesheets. There is no reason to do that.

              --
              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
              ==================


              "crash" <crash@bcdcdigital.com> wrote in message
              news:e42iaj$97i$1@forums.macromedia.com...
              > Murray-
              >
              > Agreed on the class - I'm not reusing it. I have just setup everything
              > with classes and need to go back and put in ID's for those items, really.
              >
              > div.logo is currently set at 570 wide - the 572 is only for FF - which
              > works perfect. The 572 is set in the firefox css, the 570 is set in the
              > ie style sheet.
              >
              > And where are you seeing the span? I don't show one in either the test
              > header.php or my indexa.php file on the root.
              >
              > Thanks for taking a look, this is just driving me nuts.
              >
              > Jon
              >
              >> div.logo is 572px wide, and the image is 570px wide?
              >>
              >> And why use a class for that rather than an ID - will you reuse .logo?
              >>
              >> And why is there a span in there?
              >>
              >> --
              >> Murray --- ICQ 71997575
              >
              >


              • 4. Re: CSS Hunt - IE Extra Space
                Level 7
                but but but - it works in FF!

                What else should I be doing? My second stylesheet only replaces values not
                fitting in IE that work in FF.

                What's a better solution? The top section needs slight differences between
                the two browsers to function, as well.

                see http://demo.mediachurch.com/indexa.php for examples of what the same
                style sheet looks like xbrowser.

                You should notice a 2 px yellow background showing where the image is not
                butting clearly up against the side of the box - why why why?


                > Quit trying to serve two stylesheets. There is no reason to do that.
                >
                > --
                > Murray --- ICQ 71997575


                • 5. Re: CSS Hunt - IE Extra Space
                  Level 7
                  mur? did ya give up?


                  • 6. Re: CSS Hunt - IE Extra Space
                    Level 7
                    sorry, getting impatient. i just looked at the time.


                    • 7. Re: CSS Hunt - IE Extra Space
                      Level 7
                      Sorry, Jon - had to go to a track meet, and just got back. I'll take
                      another look.

                      --
                      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
                      ==================


                      "crash" <crash@bcdcdigital.com> wrote in message
                      news:e42rtq$kup$1@forums.macromedia.com...
                      > sorry, getting impatient. i just looked at the time.
                      >


                      • 8. Re: CSS Hunt - IE Extra Space
                        Level 7
                        Murray *ACE* wrote:
                        > Sorry, Jon - had to go to a track meet, and just got back. I'll take
                        > another look.
                        >
                        How'd she do? :-)

                        --
                        Bonnie in California
                        kroko at
                        sbcglobal dot net
                        http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa
                        • 9. Re: CSS Hunt - IE Extra Space
                          Level 7
                          Last in her heat, but it was a PR for her - 12:51 for the 3200 meter. And
                          she was in the fast heat. This is the climax of her season, I think - I
                          don't believe she will qualify for districts in anything.... But, she's
                          very close. Look out next year! 8)

                          --
                          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
                          ==================


                          "Bonnie" <"kroko[Occam]"@sbcglobal.net> wrote in message
                          news:e437vi$54g$1@forums.macromedia.com...
                          > Murray *ACE* wrote:
                          >> Sorry, Jon - had to go to a track meet, and just got back. I'll take
                          >> another look.
                          >>
                          > How'd she do? :-)
                          >
                          > --
                          > Bonnie in California
                          > kroko at
                          > sbcglobal dot net
                          > http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa


                          • 10. Re: CSS Hunt - IE Extra Space
                            Level 7
                            > What's a better solution? The top section needs slight differences
                            > between the two browsers to function, as well.

                            Why? I don't think it does. Why would it?

                            --
                            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
                            ==================


                            "crash" <crash@bcdcdigital.com> wrote in message
                            news:e42j6i$a8l$1@forums.macromedia.com...
                            > but but but - it works in FF!
                            >
                            > What else should I be doing? My second stylesheet only replaces values
                            > not fitting in IE that work in FF.
                            >
                            > What's a better solution? The top section needs slight differences
                            > between the two browsers to function, as well.
                            >
                            > see http://demo.mediachurch.com/indexa.php for examples of what the same
                            > style sheet looks like xbrowser.
                            >
                            > You should notice a 2 px yellow background showing where the image is not
                            > butting clearly up against the side of the box - why why why?
                            >
                            >
                            >> Quit trying to serve two stylesheets. There is no reason to do that.
                            >>
                            >> --
                            >> Murray --- ICQ 71997575
                            >
                            >


                            • 11. Re: CSS Hunt - IE Extra Space
                              Level 7
                              Try this. Remove the IE stylesheet, and make the Calvary image 572px wide.

                              --
                              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
                              ==================


                              "Bonnie" <"kroko[Occam]"@sbcglobal.net> wrote in message
                              news:e437vi$54g$1@forums.macromedia.com...
                              > Murray *ACE* wrote:
                              >> Sorry, Jon - had to go to a track meet, and just got back. I'll take
                              >> another look.
                              >>
                              > How'd she do? :-)
                              >
                              > --
                              > Bonnie in California
                              > kroko at
                              > sbcglobal dot net
                              > http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa


                              • 12. Re: CSS Hunt - IE Extra Space
                                Level 7
                                Murray-

                                Sorry for being so impatient. I was getting a little squeezed towards the
                                end of the day.

                                The 572 image works. I'm still very frustrated as I can't seem to find
                                those 2 px. I'm sure I'm just not calculating my box model correctly, but
                                am pretty frustrated. At this point, I'm going to have to resize any images
                                that come in to a somewhat non-standard size, all because I can't find a
                                bug!

                                I'll take this workaround and keep at it. Thank you so much for taking a
                                look, it's just driving me c r a z y!

                                Jon


                                • 13. Re: CSS Hunt - IE Extra Space
                                  Level 7
                                  The top menu is in a div that is 572px wide. Try changing that to 570px.

                                  --
                                  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
                                  ==================


                                  "crash" <crash@bcdcdigital.com> wrote in message
                                  news:e4a4jp$ch0$1@forums.macromedia.com...
                                  > Murray-
                                  >
                                  > Sorry for being so impatient. I was getting a little squeezed towards the
                                  > end of the day.
                                  >
                                  > The 572 image works. I'm still very frustrated as I can't seem to find
                                  > those 2 px. I'm sure I'm just not calculating my box model correctly, but
                                  > am pretty frustrated. At this point, I'm going to have to resize any
                                  > images that come in to a somewhat non-standard size, all because I can't
                                  > find a bug!
                                  >
                                  > I'll take this workaround and keep at it. Thank you so much for taking a
                                  > look, it's just driving me c r a z y!
                                  >
                                  > Jon
                                  >


                                  • 14. Re: CSS Hunt - IE Extra Space
                                    Level 7
                                    Murray-

                                    You just got yourself a new shrine man. That was what I was looking for. I
                                    was so worried about my floats, about my borders and padding, etc. that I
                                    *completely* forgot to look at my menu.

                                    Wow - thank you so much sir. That was the dumb mistake I was looking for.

                                    YEAH! You've made my monday man. I *knew* I could do it w/o conditional
                                    statements. 8o)
                                    (well, and a little help)


                                    Thank you thank you thank you.

                                    Jon

                                    > The top menu is in a div that is 572px wide. Try changing that to 570px.
                                    >
                                    > --
                                    > Murray --- ICQ 71997575


                                    • 15. Re: CSS Hunt - IE Extra Space
                                      Level 7
                                      Light both of those candles, please. 8)

                                      Look back through the thread and note that I mentioned this one early on....

                                      --
                                      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
                                      ==================


                                      "crash" <crash@bcdcdigital.com> wrote in message
                                      news:e4a6vh$fl3$1@forums.macromedia.com...
                                      > Murray-
                                      >
                                      > You just got yourself a new shrine man. That was what I was looking for.
                                      > I was so worried about my floats, about my borders and padding, etc. that
                                      > I *completely* forgot to look at my menu.
                                      >
                                      > Wow - thank you so much sir. That was the dumb mistake I was looking for.
                                      >
                                      > YEAH! You've made my monday man. I *knew* I could do it w/o conditional
                                      > statements. 8o)
                                      > (well, and a little help)
                                      >
                                      >
                                      > Thank you thank you thank you.
                                      >
                                      > Jon
                                      >
                                      >> The top menu is in a div that is 572px wide. Try changing that to 570px.
                                      >>
                                      >> --
                                      >> Murray --- ICQ 71997575
                                      >
                                      >


                                      • 16. Re: CSS Hunt - IE Extra Space
                                        Level 7
                                        I don't see where you mentioned it - I must have just breezed through it
                                        twice. I do appreciate this very much, though. I knew it had to be a very
                                        silly mistake.

                                        Candles are lit, incense is burning, and I just sacrificed a lamb (OK, it
                                        was leg of lamb and it smells delicious!)

                                        Jon
                                        "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                        news:e4a776$g10$1@forums.macromedia.com...
                                        > Light both of those candles, please. 8)
                                        >
                                        > Look back through the thread and note that I mentioned this one early
                                        > on....
                                        >
                                        > --
                                        > 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
                                        > ==================
                                        >
                                        >
                                        > "crash" <crash@bcdcdigital.com> wrote in message
                                        > news:e4a6vh$fl3$1@forums.macromedia.com...
                                        >> Murray-
                                        >>
                                        >> You just got yourself a new shrine man. That was what I was looking for.
                                        >> I was so worried about my floats, about my borders and padding, etc. that
                                        >> I *completely* forgot to look at my menu.
                                        >>
                                        >> Wow - thank you so much sir. That was the dumb mistake I was looking
                                        >> for.
                                        >>
                                        >> YEAH! You've made my monday man. I *knew* I could do it w/o conditional
                                        >> statements. 8o)
                                        >> (well, and a little help)
                                        >>
                                        >>
                                        >> Thank you thank you thank you.
                                        >>
                                        >> Jon
                                        >>
                                        >>> The top menu is in a div that is 572px wide. Try changing that to
                                        >>> 570px.
                                        >>>
                                        >>> --
                                        >>> Murray --- ICQ 71997575
                                        >>
                                        >>
                                        >
                                        >


                                        • 17. Re: CSS Hunt - IE Extra Space
                                          Level 7
                                          I'll be there in 10 minutes! I love lamb (NOT mutton)! 8)

                                          --
                                          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
                                          ==================


                                          "crash" <crash@bcdcdigital.com> wrote in message
                                          news:e4a91b$ib7$1@forums.macromedia.com...
                                          >I don't see where you mentioned it - I must have just breezed through it
                                          >twice. I do appreciate this very much, though. I knew it had to be a very
                                          >silly mistake.
                                          >
                                          > Candles are lit, incense is burning, and I just sacrificed a lamb (OK, it
                                          > was leg of lamb and it smells delicious!)
                                          >
                                          > Jon
                                          > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                                          > news:e4a776$g10$1@forums.macromedia.com...
                                          >> Light both of those candles, please. 8)
                                          >>
                                          >> Look back through the thread and note that I mentioned this one early
                                          >> on....
                                          >>
                                          >> --
                                          >> 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
                                          >> ==================
                                          >>
                                          >>
                                          >> "crash" <crash@bcdcdigital.com> wrote in message
                                          >> news:e4a6vh$fl3$1@forums.macromedia.com...
                                          >>> Murray-
                                          >>>
                                          >>> You just got yourself a new shrine man. That was what I was looking
                                          >>> for. I was so worried about my floats, about my borders and padding,
                                          >>> etc. that I *completely* forgot to look at my menu.
                                          >>>
                                          >>> Wow - thank you so much sir. That was the dumb mistake I was looking
                                          >>> for.
                                          >>>
                                          >>> YEAH! You've made my monday man. I *knew* I could do it w/o
                                          >>> conditional statements. 8o)
                                          >>> (well, and a little help)
                                          >>>
                                          >>>
                                          >>> Thank you thank you thank you.
                                          >>>
                                          >>> Jon
                                          >>>
                                          >>>> The top menu is in a div that is 572px wide. Try changing that to
                                          >>>> 570px.
                                          >>>>
                                          >>>> --
                                          >>>> Murray --- ICQ 71997575
                                          >>>
                                          >>>
                                          >>
                                          >>
                                          >
                                          >


                                          • 18. Re: CSS Hunt - IE Extra Space
                                            Level 7
                                            Mint jelly, yams....maybe a brocolli souffl�.....mmmmmm