Dowemo
0 0 0 0


Question:

I've been trying to make a full width background image in the site defining its height but the image is has 5px blank in the left and right side of the screen. When defined the CSS for the background in the body section it is perfect but while defining in the div part, 5px blank in the left and right side of the screen that is not intended.

CSS:

body {
    background: url(images/bg.jpg) #FFFFFF repeat-x;
    font: normal 12px verdana;
    color: #9C9C9C;
    line-height: 125%;
}
#top_banner {
    width: 1000px;
    margin: auto;
    height: 120px;
}
#menu_bg {
    width: 1000px;
    margin: auto;
    background: url(images/menu_bg.jpg) no-repeat;
    height: 86px;
    margin-top: 7px;
}
#menu {
    width: 805px;
    float: right;
    margin-top: 40px;
}
#slider_bg {
    background: #CCCCCC;
    height: 362px;
    width: 100%;
}
#slider {
    background: grey;
    height: 362px;
    width: 1000px;
    margin: auto;
}
#bigmenu_bg {
    background: #333745;
    height: 427px;
    margin-top: 4px;
}

HTML:

<body>
    <div id="top_banner"></div>
    <div id="menu_bg">
        <div id="menu"></div>
    </div>
    <div id="slider_bg">
        <div id="slider"></div>
    </div>
    <div id="bigmenu_bg"></div>
</body>

Best Answer:


A CSS reset is a good answer. More information: What is a CSS Reset?

The following works, but is not recommended for performance reasons as well as it giving unexpected results:

* { margin: 0; padding: 0: } 

Read more here about the problems with the star selector :)

From that answer:

When it comes to performance, Steve Souders is the man:

Shameless quote from one of the reports:

The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here’s a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.

[bold emphasis mine]

The following snippet is a good start for your example. It removes all browser defaults so you can build consistent CSS on top. It looks ridiculous, and you can remove elements that you will not be using, but it will give a consistent behaviour and faster performance.

Have a fiddle!

CSS

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}    



Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs