J'ai un site web que j'ai commencé à mettre en page. Le problème est dans les footer_internal_box et footer_box_bottom. Même si le box_bottom se trouve dans une section div distincte après le internal_box, il se trouve au bas de la . Si je modifie la hauteur du footer_box_bottom, il modifie également la taille de footer_internal_box.Strange CSS sur IE 7/8/9
Cela fonctionne dans Firefox, mais j'ai trouvé un moyen de le réparer, je ne comprends tout simplement pas pourquoi. Si je mets <div></div> avant la ligne <div id="footer_box_bottom"> </div> , alors tout fonctionne comme prévu. Maintenant, je peux laisser cela là, mais j'aimerais savoir pourquoi cela arriverait. Le div footer_box_bottom ne devrait avoir aucun effet sur le internal_box.
Voici le code, reset.css et layout.css. Le fichier text.css est vide à l'heure actuelle.
Merci beaucoup!
<!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>
Le reset.css est la suivante
@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: "";
}
Et le layout.css est
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;
}
Bien que ce soit peut-être vrai, c'est l'un des principaux, je dois donc faire en sorte que le site fonctionne. Je suis intéressé de voir si c'est un bug de rendu ou un problème avec mon css. –
et qu'en est-il de jsfiddle? – SergeS