Geek Answers Handbook

Remove upper margin on body tag

I have a design that requires two background images and should work in IE. So I decided to place 1 image in the html tag, and the other in the body tag. So my page looks like this

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <p>Lorem...</p> </body> </html>

Then a very simple css like

 html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; } body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }

The only browser that does it right is IE7. Opera, Chrome, FF place the upper border of 20px. I can remove this field by adding some hackity css as follows:

 html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; } body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }

However, why doesn’t this work, why do I need additional features? Is this a design error or a mistake?

EDIT . This seems to be a mistake. When I remove the <p> tags, then it acts correctly, but it does not work with them.

+4
source share
1 answer

Instead of using the field for <p> , use the add-on instead.

And like the one mentioned above, this is caused by dropping fields.

+2
source

More articles:


All Articles