17 Replies Latest reply on Feb 6, 2010 10:36 AM by mediastream13

    why are there spaces in this layout?

    mediastream13

      a space appears beneath the header, why? www.bryantaafe.com/1  and also below the flash movie. they both are in gray. the space below the header shouldn't be there at all. i'd like it to sit flush with the content beneath it. also, how can i get rid of the space at the botton of the flash movie just before the first story content. thanks

        • 1. Re: why are there spaces in this layout?
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          I can see only ONE gray space and it lies here: Line 36: "<div class="p7pmmclearfloat"> </div>".

           

          To test whether this is the reason put this line between these characters <!-- and -->.

           

          Hans-G.

          • 2. Re: why are there spaces in this layout?
            mediastream13 Level 1

            www.bryantaafe.com/rg

             

            here i an example of exactly the same issue. notice the space under the header area that is sitting on top of the content area. why is that space apearing there. there is nothing there? thanks

            • 3. Re: why are there spaces in this layout?
              hans-g. Adobe Community Professional & MVP

              Hi,

               

              here is what I can see:

               

               

              AD.jpg

               

              Is this presentation correct?

              Hans-G.

              • 4. Re: why are there spaces in this layout?
                mediastream13 Level 1

                in i.e. 8 and ff 3.6 it is displaying like this. is there some type of default spacing with xhtml or floating elements?

                 

                space.jpg

                • 5. Re: why are there spaces in this layout?
                  hans-g. Adobe Community Professional & MVP

                  Hi,

                   

                  that's completely strange, I work with IE8 too, the screenshot comes from my display. What concerns the FF, my friends and I have installed an ADD-ON, which simulates the FF-screen edition of IE. Maybe you can use this too: http://www.erweiterungen.de/detail/IE_Tab/ which is German written HP, although there are similar in English, I am sure. If in doubt, I propose: to google!

                   

                  Hans-G.

                  • 6. Re: why are there spaces in this layout?
                    osgood_ Level 8

                    mediastream13 wrote:

                     

                    a space appears beneath the header, why? www.bryantaafe.com/1  and also below the flash movie. they both are in gray. the space below the header shouldn't be there at all. i'd like it to sit flush with the content beneath it. also, how can i get rid of the space at the botton of the flash movie just before the first story content. thanks

                     

                    Add the below css to your css styles to get rid of the space beneath the header:

                     

                    img {

                    display: block;

                    }

                     

                    As for the space under the flash file well that looks like its being caused by a <div> containing this information:

                     

                    <div id="feature">Content for  id "feature" Goes Here</div>

                     

                    If you add - color: #fff; to the 'features' css selector you'll see it in design view.

                     

                    #feature {

                    color: #fff;
                    }

                    • 7. Re: why are there spaces in this layout?
                      mediastream13 Level 1

                      that worked! thank you!  i am having the same issue here www.bryantaafe.com/1 with the feature div, it won't sit up against the flash div. and i can see the background colors. can i apply the block to that div as well? thanks

                      • 8. Re: why are there spaces in this layout?
                        osgood_ Level 8

                        mediastream13 wrote:

                         

                        that worked! thank you!  i am having the same issue here www.bryantaafe.com/1 with the feature div, it won't sit up against the flash div. and i can see the background colors. can i apply the block to that div as well? thanks

                        What happens if you add margin: 0; padding 0; to the feature h1?



                        #feature h1 {
                             font-family: Georgia, "Times New Roman", Times, serif;
                             font-size: 24px;
                                 margin: 0;
                                  padding 0;

                        }

                        If that closes the gap then use some bottom padding (see below 20px) to create space between the heading and the text beneath it.


                        #feature h1 {
                             font-family: Georgia, "Times New Roman", Times, serif;
                             font-size: 24px;
                                 margin: 0;
                                  padding 0 0 20px 0;

                        }




                        • 9. Re: why are there spaces in this layout?
                          mediastream13 Level 1

                          this is how it is displaying now e-blessedsacramentparish.org/test

                           

                          i am not concerned with the red space at the top of the navbar because i put that there (it will be black later), but to show the spaces at the bottom i made the container red and the flash div green and i can see both throught the background. i put a 0 margin and padding on every element. any ideas at this point? thanks

                          • 10. Re: why are there spaces in this layout?
                            osgood_ Level 8

                            mediastream13 wrote:

                             

                            this is how it is displaying now e-blessedsacramentparish.org/test

                             

                            i am not concerned with the red space at the top of the navbar because i put that there (it will be black later), but to show the spaces at the bottom i made the container red and the flash div green and i can see both throught the background. i put a 0 margin and padding on every element. any ideas at this point? thanks

                             

                            Add margin: 0; padding: 0 0 20px 0; to the css selector, as shown below.

                             

                            #feature p {
                                font-family: Verdana, Geneva, sans-serif;
                                font-size: 16px;
                                letter-spacing: .2em;
                                line-height: 1.5em;

                                margin: 0;
                                padding: 0 0 20px 0;
                            }

                             

                             

                            Give your #flash <div> a height of 300px and see if this gets rid of the space.

                             

                            #flash {
                                width: 720px;
                                background-color: #0F0;
                                margin: 0px;
                                padding: 0px;
                                height: 300px;
                            }

                            • 11. Re: why are there spaces in this layout?
                              mediastream13 Level 1

                              that worked again! thanks so much. here is the final layout and how it looks with the changes.  e-blessedsacramentparish.org/test. what exactly did we just do? i understand css and html, but have never experienced that type of problem before. thanks again!

                              • 12. Re: why are there spaces in this layout?
                                osgood_ Level 8

                                Certain tags i.e, p (paragraph) h1, h2, (headings) ul, li, (unordered lists) have default margin and paddings set on them which cause issues such as you were experiencing, gaps between <divs>

                                 

                                Whenever you see a gap appear between two <divs> you can usually eliminate the problem by zeroing out the margin/padding on the elements within that <div>.

                                 

                                So for instance the paragraphs in your 'feature' <div> needed their margins/padding zeroed out as the bottom one was causing the space. I put back in some bottom-padding to keep the text away from the bottom of the <div>.

                                 

                                As for the 'flash' <div> I just gave that a height to match the flash file inside it.

                                • 13. Re: why are there spaces in this layout?
                                  mediastream13 Level 1

                                  thank you very much!

                                  • 14. Re: why are there spaces in this layout?
                                    mediastream13 Level 1

                                    why is there spaces in this sidebar? i think i zeroed out all elements. can you see any errors? thanks

                                    • 15. Re: why are there spaces in this layout?
                                      mediastream13 Level 1

                                      the site is located at e-blessedsacramentparish.org/testsite

                                      • 16. Re: why are there spaces in this layout?
                                        osgood_ Level 8

                                        mediastream13 wrote:

                                         

                                        the site is located at e-blessedsacramentparish.org/testsite

                                         

                                         

                                        Headings (h3 tags) are causing the gaps to appear in the 'sidebar'. Headings have default margin/padding applied so you must zero them out, as explained in prior post.

                                         

                                        Add the below css to your stylesheet:

                                         

                                        #sidebar h3 {
                                        margin: 0;
                                        padding: 15px 0 5px 0;
                                        }

                                        • 17. Re: why are there spaces in this layout?
                                          mediastream13 Level 1

                                          i thought i zeroed everything out, but i guess not =)  four eyes are better than two when analyzing code i guess, hehehe. thanks, that worked!