CODEWITHSUNDEEP
csshtml
imulsion
imulsion

Reputation: 9040

Div has a margin even with margin:0 and padding:0;

I have four divs on my webpage; a header, menu, content and footer. In IE, everything displays correctly nested, but in Chrome there is a small gap between the footer and the menu and content divs. I have tried putting

margin:0;
padding:0;

on everything but there is no change. Here are some images of my problem:

In Chrome (incorrect display):

enter image description here

In IE (correct display):

enter image description here

Why is this happening? Here is my HTML:

<?php include "headermysql.php"?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script type = "text/javascript">
function to_login_page()
{
window.location.assign("http://127.0.0.1/sxp/login.php");
}
function to_signup_page()
{
window.location.assign("http://127.0.0.1/sxp/signup.php");
}
</script>
<link rel = "stylesheet" type = "text/css" href = "textstyles.css">
</head>
<body>
<?php include "headerhtml.php";?>
<div class = "menu">
<p>menu</p>
</div>
<div class = "content">
<?php
//irrelevant PHP 
?>
<a class = "main" href = "post.php">Post new topic</a>
</div>
<div class = "footer">
<p class = "footer">Copyright Stafford King 2013</p>
</div>
</body>
</html>

And here is my CSS:

.error
{
font-weight:bold;
font-family:Courier New;
color:red;
text-align:left;
font-size:20px;
margin:0;
padding:0;
}
.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:black;
margin:0;
padding:0;
}
a.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:#000066;
margin:0;
padding:0;
}
a.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:#000066;
margin:0;
padding:0;
}
p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
}
div.header
{
height:150px;
background-color:#008AC8;
margin:0;
padding:0;
}
div.menu
{
float:left;
width:200px;
height:800px;
background-color:#64BCE2;
margin:0;
padding:0;
}
div.content
{
height:800px;
background-color:#F9F9D9;
margin:0;
padding:0;
}
div.footer
{
height:20px;
background-color:#008AC8;
margin:0;
padding:0;
}
h2.main
{
font-family:Cambria;
font-size:35px;
color:black;
text-align:center;
margin:0;
padding:0;
}
.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:black;
margin:0;
padding:0;
}
body{margin:0;}

Sorry for the long post. All help is appreciated.

Upvotes: 2

Views: 6257

Answers (5)

Preet Singh
Preet Singh

Reputation: 1

put the content in div before footer if div before footer empty extra space showing.although you give body margin 0 padding 0 what is the reason of this if anybody know this

Upvotes: 0

BeatrizeA
BeatrizeA

Reputation: 1

The font always seem to cause this problem but I'm sure if you set this, it will take care of it 

line-height: 0px;

Upvotes: 0

MjeOsX
MjeOsX

Reputation: 405

When i execute your sample is it also wrong in the Internet Explorer. You can fix your problem by adding a

display: inline;

to the p.footer section

Upvotes: 0

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

you just need to add following css in your css file.

*{padding:0; margin:0;}

Upvotes: -1

Ms. Nobody
Ms. Nobody

Reputation: 1219

There might be problem with the <p> part in footer because your footer has 20px height and font inside is 15px but the <p> has defaultly some margin-top and bottom I think. You should just set it to 0px;

p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
margin:0px;
}

Upvotes: 2

Related Questions