CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GodMan
GodMan

Reputation: 2641

Container is getting unnecessary margin

My html is:-

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
    rel="stylesheet"
    type="text/css"
    href="css/index.css"
>
<title>Best company in the USA</title>
</head>

<body>
    <div class="menu">
        <h2>MENU</h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <nav role="navigation">
        <div class="navWrap">
            <h2 class="navClose"></h2>
            <ul>
                <li><a href="somelink.com">Home</a></li>
                <li></li>
                <li><a href="somelink.com">About us</a></li>
                <li></li>
                <li><a href="somelink.com">
                        Services</a></li>
                <li></li>
                <li><a href="somelink.com">Locations</a></li>
                <li></li>
                <li><a href="somelink.com">Contact Us</a></li>
                <li></li>
            </ul>
        </div>
    </nav>

    <div class="content">
        <section class="first"></section>
    </div>

</body>

</html>

My css is:-

@CHARSET "US-ASCII";

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-moz-selection {
    background: none repeat scroll 0% 0% #D8262E;
}

::selection {
    background: none repeat scroll 0% 0% #D8262E;
}

ul {
    list-style: none outside;
    clear: both;
}

.menu {
    position: absolute;
    float: right;
    cursor: pointer;
    float: right;
    z-index: 1000;
    top: 25px;
    right: 20px;
}

.menu h2 {
    display: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}

@media only screen and (min-width:768px) {
    .menu {
        top: 32px;
        right: 40px;
    }
    .menu h2 {
        display: inline-block;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        font-family: "Karla", Arial, sans-serif;
        font-size: 20px;
        margin: 0px 5px 0px 0px;
        text-transform: uppercase;
        vertical-align: top;
    }
}

.menu ul {
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 25px;
    margin: 0;
}

.menu ul li {
    background: white;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    height: 3px;
    margin: 3px 0;
    width: 100%;
}

html,nav,section,div {
    display: block;
    vertical-align: baseline;
    margin: 0px;
    padding: 0px;
    border: 0px none;
}

nav[role="navigation"] {
    background: #00e000;
    overflow: hidden;
    padding: 0 40px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: left;
    width: 13em;
    z-index: 10;
}

.menu,.content,.first {
    -webkit-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97);
    -webkit-transition-delay: 0s;
    -moz-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
    -o-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
    transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s
}

.first {
    background-color: #d8262e;
    /* background:  no-repeat scroll center  transparent; */
    width: 100%;
    /* height: 600px; */
    top: 0;
    z-index: 30;
}

.first:before {
    height: 100%;
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-color: #38262e;
}

.first:after {
    background-color: #38262e;
}

.content {
    /* margin-top: -8px;
    margin-left: -7px;
    margin-right:-7px; */
    /* padding-top:-10px; */


}

content:before,content:after {
    content: "";
    display: table;
    line-height: 0;

}

content:after {
    clear: both;
}

Jquery is:-

$(document) .ready(function () {

    windowHeight = 0.9 * $(window) .innerHeight();
    $('.first').height(windowHeight);
    $(window) .resize(function () {
        windowHeight = 0.9 * $(window) .innerHeight();
        console.log("height: " + windowHeight);
    });

});

So, there is a peculiar problem I'm facing now. Somehow, I'm getting 8-10px or margin from each side in the content class. I have a solution for this. If I comment out the css in .content, it works for me.

But, it would be great to know if my naive solution can get better. Or if somebody would help me point out the root cause for the extra margin, it would be great.

Here is a jsfiddle for this: http://jsfiddle.net/kSdHU/ Thanks.

Upvotes: 0

Views: 65

Answers (2)

bilcker
bilcker

Reputation: 1120

To make sure you never run into weird styling issues like this I suggest using a css reset. It will basically reset your browsers default styles so you aren't getting unwanted styling of elements. I normally use Eric Meyers Reset but there are many out there.

Upvotes: 0

drip
drip

Reputation: 12943

You should reset your elements.

Just add:

* { margin: 0; padding: 0; }

Demo

Upvotes: 2

Related Questions