CODEWITHSUNDEEP
htmlcss
mituw16
mituw16

Reputation: 5250

Html CSS reset being applied, but not honored

So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.

Gap: enter image description here

Chrome Web Inspector that shows margin:0 is being honord: enter image description here

So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/css/Reset.css" rel="stylesheet"/>
    <link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="/Content/css/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/css/Site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <script src="/Scripts/jquery-1.9.0.js"></script>



    <link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
    <script type="text/javascript">var base_url = 'http://localhost:64789/';</script>

</head>
<body>
    <div id="wrap">
        <h2>Index</h2>
    </div>
</body>
</html>

CSS Note: Site.css is an empty file at this point, as I just started this project. 

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
   margin:0;  
   padding:0;  
   border:0;  
   border-collapse:separate;  
   border-spacing:0;
}

a {
    text-decoration: none;
    }

* {
    font-family: 'Ubuntu', sans-serif;
    }

body {
    background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}    

#wrap {
    width: 100%;
    background: transparent url(../images/leaves.jpg) no-repeat center top;
}

Upvotes: 0

Views: 111

Answers (2)

Wolvenhaven
Wolvenhaven

Reputation: 335

Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2

Upvotes: 2

Related Questions