13 Replies Latest reply: Feb 3, 2011 3:48 PM by phreaddee123 RSS

    Can't get top margin for header?

    Budo Cat Community Member

      I am having trouble getting a top margin for my header. I can see it in Design preview, but when I check the page in a browser I find that instead of a margin between my header and top edge of the canvas, I get a margin between the canvas and the top of my screen (CSS, as well as Design and Firefox screenshots, below). I don't know if this is a Dreamweaver or CSS problem. But can someone please tell me what I'm doing wrong? It's driving me crazy!

       

      Thank you.

       

      body {
          width: 1024px;
          height: 768px;
          margin: 0 auto;
          background-color: #0014B2;
      }
      #wrapper {
          height: 768px;
          width: 1024px;
          background-image: url(../mesh.png);
      }
      #wrapper #header {
          height: 100px;
          width: 912px;
          margin:  50px 54px 0 54px;
          background-color: #000032;
          border: 2px solid #b3aaa1;
          }

       

      What I want (Design view):

      Screen shot 2011-01-30 at 12.06.20 PM.png

       

       

      What I get in Firefox:

      Screen shot 2011-01-30 at 12.06.41 PM.png

        • 1. Re: Can't get top margin for header?
          John Waller CommunityMVP

          We need to see all the code you're working with (HTML & CSS)

           

          Even better if you upload what you've got and provide a link.

          • 2. Re: Can't get top margin for header?
            Budo Cat Community Member

            Hi, John.

             

            All the HTML and CSS code is below. Not much there, as I've only started building the page. (For that reason, it's not online yet, so I can't upload or give a link.)

             

            Thanks very much for your help.

             

            HTML:

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Boone Template</title>
            <link href="css/layout.css" rel="stylesheet" type="text/css" />
            </head>

             

            <body>
            <div id="wrapper">
            <div id="header"> 
            </div><!--close header-->
            <div id="navbar">
            </div><!--close navbar-->
            <div id="mainbody">
              </div><!--close mainbody-->
            </div><!--close wrapper-->
            </body>
            </html>

             

            CSS:

             

            @charset "UTF-8";
            body {
                width: 1024px;
                height: 768px;
                margin: 0 auto;
                background-color: #0014B2;
            }
            #wrapper {
                height: 768px;
                width: 1024px;
                background-image: url(../mesh.png);
            }
            #wrapper #header {
                height: 100px;
                width: 912px;
                margin:  50px 54px 0 54px;
                background-color: #000032;
                border: 2px solid #b3aaa1;
                }
            #wrapper #navbar {
                background-color: #000032;
                height: 540px;
                width: 155px;
                margin-left: 54px;
                float: left;
                border-width: 0 1px 2px 2px;
                border-style: solid;
                border-color: #b3aaa1;
            }
            #wrapper #mainbody {
                height: 540px;
                width: 755px;
                float: left;
                border-width: 0 2px 2px 1px;
                border-style: solid;
                border-color: #b3aaa1;
               }

            • 3. Re: Can't get top margin for header?
              Jens Peermann Community Member

              Why are you adding the "wrapper" ID to the "navbar", "header" and "mainbody" rules?

              • 4. Re: Can't get top margin for header?
                Budo Cat Community Member

                I'm not sure I understand the question. The wrapper holds the textured background. If I close the wrapper before navbar/header/mainbody, I get only a page of texture.

                 

                Is there another way to do it? I've fussed with the coding, but haven't found another way to keep the header/navbar and mainbody on top of the background (nor has anything given me that 50 px margin I'm looking for at the top).

                • 5. Re: Can't get top margin for header?
                  Jens Peermann Community Member

                  Your wrapper div gets four different sets of instructions:

                   

                  1)

                   

                  #wrapper {
                      height: 768px;
                      width: 1024px;
                      background-image: url(../mesh.png);
                  }

                   

                   

                  2)


                  #wrapper #header {
                      height: 100px;
                      width: 912px;
                      margin:  50px 54px 0 54px;
                      background-color: #000032;
                      border: 2px solid #b3aaa1;
                      }

                   

                   

                  3)

                   

                   

                  #wrapper #navbar {
                      background-color: #000032;
                      height: 540px;
                      width: 155px;
                      margin-left: 54px;
                      float: left;
                      border-width: 0 1px 2px 2px;
                      border-style: solid;
                      border-color: #b3aaa1;
                  }

                   

                   

                   

                  4)

                   

                   

                  #wrapper #mainbody {
                      height: 540px;
                      width: 755px;
                      float: left;
                      border-width: 0 2px 2px 1px;
                      border-style: solid;
                      border-color: #b3aaa1;
                     }

                   

                   

                   

                  Header, navbar and mainbody all reside within wrapper, but that doesn't require "#wrapper" to be added to the CSS rules that define their attributes. Every rule that has "#wrapper" in its name will be used by the div that has the id "wrapper".

                   

                  Message was edited by: Jens Peermann

                  • 6. Re: Can't get top margin for header?
                    Budo Cat Community Member

                    Thank you, Jens. I removed #wrapper from navbar, header and maincontent. Gave me cleaner code, but it still doesn't give me the top margin.

                     

                    Again, I can see the 50px margin in Design view, but not when I view it in Firefox or other browsers. Any other suggestions on how to fix this?

                    • 7. Re: Can't get top margin for header?
                      Jens Peermann Community Member

                      Empty the Cashes in Firefox and Safary. Then look again.

                      • 8. Re: Can't get top margin for header?
                        Budo Cat Community Member

                        That didn't quite work. But what did work was giving myself only a 49 pix margin in the header, and a 1 px top-padding in the wrapper. See below:

                         

                        @charset "UTF-8";
                        body {
                            width: 1024px;
                            height: 768px;
                            margin: 0 auto;
                            background-color: #0014B2;
                           
                        }
                        #wrapper {
                            width: 1024px;
                            height: 768px;
                            background-image: url(../images/mesh.png);
                            background-repeat: repeat-y;
                            padding-top: 1px;
                        }
                        #header {
                            height: 100px;
                            width: 912px;
                            margin:  49px 54px 0 54px;
                            background-color: #000032;
                            border: 2px solid #b3aaa1;
                            }

                         

                        I hate "work-arounds" like this. When I use them, I always feel like I'm cheating -- I haven't figured out the real answer, just a make-do. But this is better than the alternative I was considering: Give a 50 px top padding in the wrapper, then reduce the size of the entire canvass by 50 px.

                         

                        Thanks very much for your help. If you or anyone else can explain how to resolve this in a cleaner fashion, I'd be very thankful.

                        • 9. Re: Can't get top margin for header?
                          Nancy O. CommunityMVP

                          Removing compounds #wrapper #header won't solve this issue.   If there is a comma between #wrapper &  #header then your CSS rules apply to both. If there is no comma, #wrapper #header is treated as #header.

                           

                          Re: margins, change this:

                           

                          body {
                              width: 1024px;
                              height: 768px;
                              margin: 0 auto;
                              background-color: #0014B2;
                          }

                           

                          To this:

                           

                          body {
                              width: 1024px;
                              height: 768px;
                              margin: 50px auto 0 auto;

                              background-color: #0014B2;

                           

                          }

                           

                          Incidentally, you must NOT place height values on containers that will hold text.  If you do, your containers will run out of room to accommodate varying amounts of page content and increased text sizes in browsers.   If needed to show a background image, for example, use the min-height property.

                           

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb

                          • 10. Re: Can't get top margin for header?
                            Budo Cat Community Member

                            Hi Nancy.

                             

                            No, that didn't work either. But perhaps I misunderstood something. If I change the #body margin to 50px auto 0 auto, then what should the #header margin read?

                            • 11. Re: Can't get top margin for header?
                              osgood_ CommunityMVP

                              Budo Cat wrote:

                               

                              I hate "work-arounds" like this. When I use them, I always feel like I'm cheating -- I haven't figured out the real answer, just a make-do. But this is better than the alternative I was considering: Give a 50 px top padding in the wrapper, then reduce the size of the entire canvass by 50 px.

                               

                              Thanks very much for your help. If you or anyone else can explain how to resolve this in a cleaner fashion, I'd be very thankful.

                               

                              It's not really a 'hack' it's a legitimate work around. Sounds as though you had two adjacent top-margins collasping, which would cause the issue. However saying that when I tested your code (the original html/css post) it worked ok for me in Firefox <shrug>

                               

                              A cleaner way would have been putting a 50px top padding on the wrapper but the way you did it is just fine. Using the 1px padding causes a 'barrier' between the two adjacent margins, stopping them from collapsing.

                              • 12. Re: Can't get top margin for header?
                                Budo Cat Community Member

                                Thanks, osgood. I'm still very new to this, so I'm not sure what adjacent collapsing top margins are. But I'm glad to learn that my solution wasn't totally amateurish.

                                 

                                Maybe I'll go back and change the padding to 50px, then adjust the canvass size accordingly. I didn't do that in the first place on the remote chance that, somehow, sometime, the page would present itself as I had intended. A 1px difference in the margin and canvas size would be easier to miss than 50 px.

                                 

                                Thanks again for your feedback.

                                • 13. Re: Can't get top margin for header?
                                  phreaddee123 Community Member

                                  Nancy wrote

                                  Incidentally, you must NOT place height values on containers that will hold text.  If you do, your containers will run out of room to accommodate varying amounts of page content and increased text sizes in browsers.   If needed to show a background image, for example, use the min-height property.

                                   

                                  NOT? I believe she is wrong.

                                  there is no "rule" saying that you must not place a height value on a container that is rediculous.

                                   

                                  the problem you are having is due to no position value.

                                   

                                  by default position is set to static which does not accept top left etc etc.

                                   

                                  position:relative will fix your issue

                                  display:inline; will render it correctly in old versions of IE if used with a float value.

                                   

                                  there is no need for the #wrapper prefix although it will technically read it and validate that way as well.