Extra space at very top of DIV - css

Question

I took the time to view all other similar questions before I posed my own, but they either didn't solve my problem or, I admit, I didn't quite understand them.
I have a div stacked inside of another div, and the former div has some space at the top of it that I can't, for the life of me, get rid of. I've messed around with padding, margins, removed both, but it's still there. Below are both the CSS & HTML. The problem div is mpcontent. Here is a picture of the problem as well: http://i44.tinypic.com/34i4hw7.png
Thanks in advance!
.mpfade {
position: relative:;
width: 250px;
height: 450px;
moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
opacity: 0.0;
margin-top:-450px;
margin-bottom: 100px;
}
.mpfade:hover {
width: 250px;
height: 450px;
opacity: 0.95;
}
.mpb {
width: 200px;
height: 5px;
background-color: transparent;
border-top: 1px solid #FE9D04;
border-bottom: 1px solid #FE9D04;
margin-top: -8px;
margin-bottom: 50px;
margin-right: auto;
margin-left: auto;
}
.mpbg {
width: 250px;
height: 450px;
background-image:url(http://i42.tinypic.com/35hn6g2.jpg);
}
.mptain {
overflow:hidden;
position: relative;
top: -68px;
width: 200px;
height: 84.9%;
background-color:#fff;
margin-left: auto;
margin-right: auto;
}
.mptitle {
margin-top: 10px;
width:250px;
background-color: #000;
padding: 10px;
}
.postcount {
position: relative;
top: 0px;
padding-top: 10px;
color:#FE9D04;
font-family: flamenco;
font-weight: 300;
font-size: 30px;
text-transform: uppercase;
font-style:italic;
letter-spacing: 5px;
text-align: center;
}
.mpalias {
padding-top: 10px;
color:#FE9D04;
font-family: flamenco;
font-weight: 300;
font-size: 30px;
text-transform: uppercase;
font-style:italic;
letter-spacing: -2px;
}
.istuff {
font-family: calibri;
font-size: 9px;
color: #000;
border-bottom: 1px solid #fe9d04;
text-transform: uppercase;
text-align: left;
letter-spacing: 5px;
margin-right: 8px;
font-weight: bold;
font-style: italic;
}
.ilink {
border-radius: 50%;
background-color: #fe9d04;
width: 45px;
height: 45px;
line-height: 16px;
text-align: center;
padding: 5px;
font-family: flamenco;
font-weight: 300;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
font-style:italic;
opacity: 0.6;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ilink:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.mpcontent {
background-color: #dedede;
margin-left: auto;
margin-right: auto;
width: 180px;
height: 450px;
letter-spacing: 2px;
text-align: left;
color: #000;
font-family: calibri;
font-size: 8px;
padding: 0px;
}
.mptext {
padding-top: 5px;
letter-spacing: 2px;
text-align: left;
color: #000;
font-family: calibri;
font-size: 8px;
font-weight: bold;
}
<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">
<img src="">
</div>
<div class="mpfade">
<div class="mpbg">
<div class="mpb"></div>
<div class="mptain">
<div class=postcount>0</div>
<div class="mpcontent">
<table width="180px;">
<tr>
<td colspan="2" style="vertical-align: top" ;>
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" ; "><div class=istuff>text</div></td>
<td style="vertical-align: top ";">
<div class=istuff>text</div>
</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td style="vertical-align: top; padding-top: 5px">
<div class=istuff>text</div>
</td>
<td style="vertical-align: top; padding-top: 5px">
<div class=istuff>text/clan</div>
</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px">
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px">
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
<tr>
<td style="vertical-align: top; padding-top: 10px">
<center>
<div class=ilink><a href="">
text</a>
</div>
</center>
</td>
<td style="vertical-align: top; padding-top: 10px">
<center>
<div class=ilink><a href="">
text</a>
</div>
</center>
</td>
</tr>
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

By default the margin has different values depending of the browser that you are using. So, to have the same behaviour between different browsers you can reset your margin values to 0px. As you can see in the example above:
html, body {
margin: 0px;
}
And to have the space between your white content and the grey box update your code to:
.mptain {
top: -45px;
}
Instead of
.mptain {
top: -68px;
}
Instead of:
To see the example working check this JSFiddle.
You can have more information about how margin works here.
And you can also use CSS reseters, those can be found here.

Answer 2

You have not formatted the page itself.
Though your code addresses the styling of your div elements, you did not style the body or html tags. They are the containing elements in which your div elements reside.
html, body { margin: 0; }

Answer 3

Browser adds styling by default.
Write:
body,html{margin:0;}
It is better to reset styles by writing:
*{margin:0;padding:0;}
DEMO here.

Answer 4

This has already been answered, but I'd like to shed some more light on how to fix up your code.
There are numerous things that can affect how your web page is displayed. If your code doesn't validate properly, some browsers won't render it properly and will render it using different formats: http://validator.w3.org/
There are several errors in your code I can see easily.
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</div>
</div>
</div>
</div>
</div>
After:
is
You're missing three paragraph tags. It should look like this (technically I don't think you should be using three paragraph tags anyway, just one will suffice).
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</p>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
These style attributes are messed up:
<div class="mpcontent">
<table width="180px;">
<tr>
<td colspan="2" style="vertical-align: top" ;>
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" ; "><div class=istuff>text</div></td>
text
It should be:
<td style="vertical-align: top;">
Also, you should ALWAYS wrap your attributes in quotes:
<div class="istuff">
Technically if there are no special characters in it it will validate... but its VERY easy to forget about them, and although I haven't tested it the validator will likely throw a warning at you anyway. Its always easier and more efficient to wrap all attributes in quotes.
Here's an article on W3 Schools about it: http://www.w3schools.com/html/html_attributes.asp
I'd also recommend moving all your inline styles:
<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">
To your stylesheet. Its easier to maintain your styles from a stylesheet; if they're inline you have to constantly edit the HTML code all the time. If they're in a separate stylesheet, you only have to edit the HTML on certain occasions if you need to make major changes.
Its also a good idea to use a reset.css file before calling your other CSS styles. I think Eric Meyer's CSS solution is the most well-rounded: http://meyerweb.com/eric/tools/css/reset/
Different browser's display your website in different ways, so a reset.css helps to reset all the basic styles to one specific setting so it will display the same in all browsers. It will STILL vary slightly based on browser, but it won't be nearly as bad.

Answer 5

I got a similar type of issue. Even though I set the html and body tag as shown below still I got extra space as shown on top as shown in the image.
For me it resolved after removing "doctype html" tag on top of the page.
html, body{
margin: 0px;
padding:0px;
}
Extra space on top