Кажется, у меня проблема с моим научным проектом. По какой-то причине в Safari и Firefox (не проверял Chrome), похоже, что в верхнем меню есть отступы/маржа, iframe, похоже, работает нормально, я заменил его div на данный момент и ссылки в никуда, но в верхней части документа нет и есть то, что я думаю, будет верхней границей, но я не помню, чтобы добавить его. Я честно не понимаю, что случилось.
<!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 is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
Если бы вы могли сообщить мне, что именно я делаю неправильно, я смог заставить это работать в прошлый раз. Я просто нахожу это довольно странным.
jsfiddle: http://jsfiddle.net/ny4fH/
Благодарю!
мистифицировать
ваш код в порядке.
Не забудьте сбросить значения используемых вами тегов. В этом случае это был абзац
тег.
p { margin: 0; }
Вы также можете избежать краев абзацев, скрывая переполнение родительского (.header)
.header { overflow: hidden; }