12 Replies Latest reply on Dec 5, 2012 2:40 PM by Lonewolfblue

    Need help with bottom margin...

    Lonewolfblue Level 1

      I'm currently updating a site and don't know why this is doing what it is doing. I check the site in IE9, Opera, Firefox, Safari, and Chrome, and all looks good. It also looks good in IE 7. But in IE 8, there's no bottom margin at all. Any ideas on what is going on? Here's where the temporary site is...

       

      http://www.wenatcheekennelclub.com/test/

       

      Thanks for any info.... It's just IE 8 that does this. Does the same in Browser Lab as well when IE 8 is selected for the browser.

        • 1. Re: Need help with bottom margin...
          FeZEC Adobe Community Professional

          can you try putting overflow:hidden on your #container element and see if that corrects the issue?

          • 2. Re: Need help with bottom margin...
            Lonewolfblue Level 1

            Not sure I understand what that did, but it worked, lol. Thanks......

            • 3. Re: Need help with bottom margin...
              Lonewolfblue Level 1

              Well, I goofed it up again. I didn't do much other than change font, add a little text, and not much else. Now the problem is back, just in the reverse order. IE 8 displays fine, but IE 7 has no margin at the bottom under the footer. It still has the overflow on the container set to hidden. Any ideas on what I did?

              • 4. Re: Need help with bottom margin...
                FeZEC Adobe Community Professional

                try pulling out the overflow:hidden once again and view that everythign looks appropriate in every other browser than ie8.  Then, if that does, then I would apply that style if the user agent is ie8 using conditional comments.

                 

                 

                <!--[if > IE 8]>

                <style>

                (your style here)

                </style>

                <![endif]-->

                • 5. Re: Need help with bottom margin...
                  Lonewolfblue Level 1

                  I already tried that, and when I did, both IE 7 and IE 8 had no margin at the bottom, the footer was flush with the bottom of the page. I think I'll just leave it as it is.

                  • 6. Re: Need help with bottom margin...
                    FeZEC Adobe Community Professional

                    you know i tested your site with adobes browser tool, but i also tested it with another site called browserstack

                     

                    http://www.browserstack.com/start

                     

                    its a free browser testing site, that you can specify specific user agents and the os they run on.  when on windows 7+ ie8 displayed your site properly. Whereas the Adobe site was incorrect.

                     

                    I would trust browserstack over adobes in this case as well. Mainly because one is a snapshot and the other is a live site, on an actual os partition.

                     

                    Ben Smith

                    Sr. Software Architect

                    @fezec | Member of Adobe's Community Professionals

                    • 7. Re: Need help with bottom margin...
                      FeZEC Adobe Community Professional

                      the Last advice I could offer is to remove margins and apply padding instead.

                      Please note the following example which i created on jsfiddle.  http://jsfiddle.net/fezec/Zuf4f/

                      you will see that if you use margin, there is white space at the top and the bottom margins are unaccounted for.

                      yet if you remove margins and uncomment padding, you will see the desired effect you are seeking.

                      HTML auto collapses margins in some cases, and not all browsers handle this similarly. and IE 7 or 8 especially.

                      in your case margin-collapse would occur because your container houses ONLY block level descendants.if you had an inline at both the top and bottom you most likely would see the margin being applied.  Pretty stupid for sure, but unfortunately one of the stupid browser quirks. Actually its not really a quirk but rather done this way for our convenience. this way when we specify margins, we dont have to keep it straight in our heads the calculations of vertically adjacent margins.

                       

                       

                      Ben Smith

                      Sr. Software Architect

                      @fezec | Member of Adobe's Community Professionals

                      • 8. Re: Need help with bottom margin...
                        Lonewolfblue Level 1

                        I just tried Browser Stack and it displays the same as  Browser Lab. IE7 has no margin at the bottom, and IE 8 does. Wouldn't padding just affect inside the footer? I'm wanting space between the footer and the bottom of the browser, 15px.

                        • 9. Re: Need help with bottom margin...
                          FeZEC Adobe Community Professional

                          What I hoped you would note from that jsfiddle was that collapsed margins is occurring at the bottom of your footer, between its parenting container .   according to the W3C spects:  The element's height is the distance from its top content edge to the first applicable of the following:  1 the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines 2 the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin 3 the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin zero, otherwise   Pay close attention to number 2. your containing element has no margin applied because its height is exactly where the bottom without margin being applied to your footer exists.  you're attempting to push the container element further by applying margin-bottom to the footer. which is being collapsed in ie. Thus the parenting container is exactly the height of its descendants from top to exact bottom, regardless of margin-bottom on the footer.  so rather than apply margin-bottom on your footer, try to apply padding-bottom to your container.  give that a go.

                          • 10. Re: Need help with bottom margin...
                            Lonewolfblue Level 1

                            I took the margin out and added padding to the container, works fine. Thanks.....

                            • 11. Re: Need help with bottom margin...
                              FeZEC Adobe Community Professional

                              absolutely pal. Glad i could help.

                              CSS is stupid

                               

                               

                               

                              Ben Smith

                              Sr. Software Architect

                              @fezec | Member of Adobe's Community Professionals

                              • 12. Re: Need help with bottom margin...
                                Lonewolfblue Level 1

                                lol.... Not too much CSS's fault, lol. What I don't like is the way each company interprets it, and different browsers do different things, lol. Especially IE, LOL