У меня есть сайт, который я начал выкладывать. Проблема в footer_internal_box и footer_box_bottom. Даже если box_bottom находится в отдельном разделе div после internal_box, он находится внизу internal_box. Если я изменю высоту footer_box_bottom, это также изменит размер footer_internal_box.
Это работает в Firefox, но я нашел способ это исправить, я просто не понимаю, почему.
Если я поставлю <div></div> перед <div id="footer_box_bottom"> </div>
линия, то все работает как положено. Теперь я могу оставить это там, но я хотел бы знать, почему это произойдет. footer_box_bottom div не должен влиять на internal_box.
Ниже приведен код, reset.css и layout.css. В настоящее время text.css пуст.
Большое спасибо!
<!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></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/text.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header_box">
<img src="images/logo.png" width="172" height="174" border="0" id="header_logo" />
<div id="header_details_box">
</div>
<div id="menu_box">
</div>
</div>
<div id="mainpage_box">
<div id="mainpage_content">
blah<br/>
</div>
<div id="mainpage_box_bottom"> </div>
</div>
<div id="footer_box">
<div id="footer_box_top"> </div>
<div id="footer_internal_box">
<div id="footer_fade">
<div id="footer_content">
blah<br/>
</div>
</div>
</div>
<div id="footer_box_bottom"> </div>
</div>
</div>
</body>
</html>
Файл reset.css выглядит следующим образом
@charset "utf-8";
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
И layout.css
body
{
background-image:url(../images/header_bg.jpg);
background-repeat:repeat-x;
background-color: #F2F2F2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.clear
{
clear:both;
}
#container
{
width: 970px;
margin: auto;
position: relative;
top: 0px;
left: 0px;
}
#header_box
{
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
#header_details_box
{
width: 100%;
height: 165px;
}
#header_logo
{
position: absolute;
top: 17px;
left: 0px;
}
#menu_box
{
width: 100%;
height: 38px;
}
#mainpage_box
{
width: 100%;
}
#mainpage_content
{
padding-left: 20px;
padding-right: 20px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}
#mainpage_box_bottom
{
width: 970px;
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}
#footer_box
{
width: 100%;
}
#footer_internal_box
{
padding-left: 10px;
padding-right: 10px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}
#footer_box_top
{
height: 11px;
background-image:url(../images/mainbox_top.png);
background-repeat: no-repeat;
background-position: top left;
}
#footer_box_bottom
{
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}
#footer_fade
{
background-image: url(../images/bottombox_fade.png);
background-repeat: repeat-x;
background-position: bottom left;
background-color: #ffffff;
}
#footer_content
{
padding: 10px;
}