Reputation: 13
I feel like this should be a super simple fix but it's driving me crazy. I am trying to get this image to rest up against the top of the browser window but I'm getting this padding above the image that I can't get rid of.
I've tried a few things like setting padding to 0 and I've tried deleting everything but the and I'm still getting the padding. Any help would be appreciated :)
http://twopairphoto.com/SlapFat/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<style>
body{
padding-top: 0px;
}
div {
padding-top: 0px;
}
</style>
</head>
<body background="SlapFatBG_sm.jpg">
<div id="container" align="center"><img src="slapfatsplash_sm.jpg" /></div>
</body>
</html>
Thanks
Upvotes: 1
Views: 560
Reputation: 91628
Try this:
body{
padding-top: 0px;
margin-top: 0px; //<---- Set body margin to 0px
}
Confirmed with Firefox.
Upvotes: 0
Reputation: 4522
You could try absolute positioning...
div {position:absolute; top:0px;}
Upvotes: 0
Reputation: 5848
<body style="margin: 0px auto;">
or
body {
padding-top: 0px;
margin: 0px auto;
}
This will get rid of the margin on the top and bottom of the screen that is their by default. This will also center your content in most browsers as a result of setting the left and right margins to auto.
Upvotes: 0
Reputation: 14738
Try changing padding-top
in the div to the margin-top
That should help
Upvotes: 0