SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margins around site between browser

    So, I'm trying to figure out why there are margins around my website between the site and the browser?

    http://deva.bambl.clients.blinkss.com/index.html

    What should I change?

    I believe that everything is fine with the container

    #BiggestContainer {
    margin:0 auto;
    background-image:url(IMAGES/Metal_platform_bg_Image.png);
    }

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    That's just a browser default. You need this:

    Code:
    body {margin: 0}
    But you might as well zero out padding too:

    Code:
    body {margin: 0; padding: 0;}
    Most elements have default styles, so it's worth considering a "CSS reset" where you remove all defaults in one hit. E.g.

    Code:
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    PS: your link didn't work for me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm about the link, but thanks you solved my problem!

  4. #4
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Most elements have default styles, so it's worth considering a "CSS reset" where you remove all defaults in one hit. E.g.

    Code:
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    Hm, I know "CSS resets" are popular but I hate them, am I the only one? Browsers provide certain defaults to each element so that they render in a readable way, I don't understand why I would want to clear them?

    For example, if I reset ul and li then their rendering becomes ugly and unacceptable in most cases. If I leave the defaults at least the lists look sensible and I may get away without styling them at all. Then why add more work? When I want a specific styling I simply declare it explicitely and it works without the need to reset anything. Instead of resetting everything I much prefer simply setting my required styles on the elements that I need to affect.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I agree that weird lists are one of the troublesome side effects of resets.

    I've recently started using normalize in favor of resets.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    Instead of resetting everything I much prefer simply setting my required styles on the elements that I need to affect.
    Yes, that's the most efficient way, though it's easy to forget what you have and haven't reset, which could mean you do more resetting than necessary. I like to start with a blank slate, which is why I'm still a bit attaced to resets.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    Browsers provide certain defaults to each element so that they render in a readable way, I don't understand why I would want to clear them?
    Yes, I agree that resets are not the real answer and you don't actually want to clear the defaults but need to set them to what the design needs to be. However, doing nothing is not the answer either because browsers have different defaults.

    Lists for example are awkward if you don't set a suitable default because browsers vary so much. Historically some browsers used padding left for the space for the bullet and some browsers used margin-left to make space for the bullet therefore if you only added padding-left some browsers would have double the space for the bullets.

    The same applies to top and bottom margins on most elements and IE7 and under never used to apply a default top margin and only supplied a bottom margin therefore elements were always awry unless you specifically set all margins as required.

    So, one answer is to set the defaults that you want on the elements you use but in order to do that you need to know (or have a good idea) what defaults the browser is applying. Most people don't realise that padding and margins need to be controlled for lists and would wonder why the lists were miles out in one browser.

    There were/are many other differences and forms in IE always had a large top margin in IE but not in any other browser and even Ralph's body{margin:0} mentioned above would fail because some browsers used padding for the default space and not margin and some applied it to html and not body.

    These days modern browsers are more consistent but there are still differences and in the end its the design that you are coding that is important to have the defaults that you want and not what some browsers thinks you may want.

    All of the above is the reasons why resets became popular as it took care of everything for you but really was overkill and you ended up having to again define the margins and padding you wanted anyway.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •