CODEWITHSUNDEEP
htmlcss
AFanCorp
AFanCorp

Reputation: 23

Reset style sheet, still have white space

I've reset the style sheet, but I still have a white bar at the top. I've checked through my code to make sure i've got margins and paddings set to 0 and or have been reset.

JSFiddle (http://jsfiddle.net/yX6fR/) shows nothing wrong with the code, but when uploaded to for hosting... http://krontech.ca/

I've tried fixing this problem for 5 hours and I feel stupid.

html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
</head>
<body>
    <div id="wrapper">
        <div id="sidebar-wrapper">
        <i class="placeholder-sidebarimage"></i>
        <ul>
            <li><a href="./index.php">link</a></li>
            <li><a href="./index.php">link</a></li>
            <li><a href="./index.php">link</a></li>
        </ul>
        </div>
        <div id="content-wrapper">
            <img src="./images/fill.png">
            <p>test</p>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

css

body
{
line-height: 1;
margin: 0px;
background: #f3f3f3;
}

ul
{
list-style: none;
list-style-image: none;
}

/* Clear Fix */
/* For modern browsers */
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
    clear: both;
}

/* WEBSITE INFO STARTS HERE */
#wrapper
{
margin: 0px auto;
}

/* SIDEBAR */
#sidebar-wrapper
{
float: left;
position: fixed;
background: gray;
}

.placeholder-sidebarimage
{
display: block;
width: 150px;
height: 150px;
margin: 0;
background: #3796bc;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: medium;
border-color: #d1d3d4;
}

/* CONTENT */
#content-wrapper
{
width: 1024px;
margin: 0 auto;
}

/* FOOTER */
#footer
{
position: relative;
}

Upvotes: 2

Views: 88

Answers (1)

chris
chris

Reputation: 4867

It´s because of the line-height property

#wrapper {
    margin: 0px auto;
    line-height: 0; /* <-- */
}

I would remove it from the body:

body {
     line-height: 1; /* <-- remove this */
     margin: 0px;
     background: #f3f3f3;
}

Take a look at this reset. Also normalize.css is cool.
For Typographic defaults take a look at Typeplate
If you have a bit expirience with html and css take also a look at the Bootstrap Framework :-)
Happy coding

Upvotes: 2

Related Questions