html - I can't seem to remove the top padding or margin, CSS -
i seem having issue science project. reason in safari , firefox (haven't tested chrome), there seems padding/margin on top menu, iframe seems working fine, i'll replace div , links nowhere, yet top of document doesn't , has guess top border, don't recall adding though. can't see whats wrong.
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>science project</title> <style> html, body { margin: 0 0 0 0; padding: 0; width: 100%; height: 100%; background-color:#000; } div.header { background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%); height: 100px; width: 100%; font-family:arial, helvetica, sans-serif; color: #000; border-bottom:20px solid #09f; border-top-left-radius:12px; } p.title { padding-top: 20px; padding-left:20px; } div.menu { width:100%; height:80px; border-bottom-left-radius:12px; background-color:#fff; border-bottom: 1px solid #000; } a.button { display:table-cell; width:120px; height:80px; border-bottom-left-radius: 10px; background-color:#999; text-decoration:none; color:#fff; text-align:center; font-family:"palatino linotype", "book antiqua", palatino, serif; } .content { height:calc(100% - 221px); width:100%; } </style> </head> <body> <div class='header'> <p class='title'>the big bang theory explained.</p> </div> <div class='menu'> <a class='button' target='content'><div class="centertext"><p>what big bang?</p></div></a> </div> <div class="content"></div> </body> </html>
if let me know i'm doing wrong here, able work last time. i'm finding rather odd.
jsfiddle: http://jsfiddle.net/ny4fh/
thanks!
josh
you experiencing margin-collapse.
<p class='title'>the big bang theory explained.</p>
paragraphs, default have top , bottom margin. problem. can prevent margin collapse with:
.header { overflow: hidden }
Comments
Post a Comment