J'utilise une disposition similaire à celle de Dynamic Drive ici: http://www.dynamicdrive.com/style/layouts/item/css-right-frame-layout/Besoin d'aide pour DIV à l'intérieur DIV pour étirer la largeur du contenu dans Firefox
La principale zone de contenu (blanc) a trop-plein d'auto. J'ai donné à innerTube à l'intérieur de cette zone de contenu principal une bordure. Cependant, si le contenu de innerTube est supérieur à la largeur de la zone de contenu principale, une barre de défilement horizontale apparaîtra comme prévu, mais dans Firefox, ces contenus «chevaucheront» la bordure et disparaîtront de l'écran (peuvent être récupérés horizontalement) . En d'autres termes, la bordure de la main droite reste en place, et le contenu passe juste au-dessus de l'op, et disparaît derrière la colonne de droite.
Dans IE il se comporte exactement comme je veux - le contenu pousse la bordure de l'écran pour être visible seulement une fois que vous faites défiler là-bas.
Je suppose que le plus simple est de coller le code source ici. Si vous le copiez dans un fichier vide, vous verrez ce que je veux dire. Je viens d'utiliser un très long mot pour reproduire ce qui se passe si une image large est là à la place.
Merci d'avance à tous ceux qui peuvent m'aider.
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #cccccc;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 0;
right: 200px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.innertubeWithBorder {
margin: 15px;
border: solid 1px #666666;
}
* html body{ /*IE6 hack*/
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Right Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertubeWithBorder">
<h1>Dynamic Drive CSS Library</h1>
<p>AReallyLongWordWhichIsSimilarToHavingAnImageWithWidthGreaterThanTheWidthOfThisDivToShowOverFlowProblemWithBorderSoIfYouResizeThisWindowNarrowerYouWillSeeWhatIMeanWorksFineInIEButNotFirefox</p>
<p>So I want that border over there ------> to dissappear behind the right hand column like it does in IE, and be visible once you use the scrollbar below and scroll to the right</p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</div>
</div>
</body>
</html>
Le problème ici est que vous êtes en train de forcer le mode quirks IE. Il fonctionnera dans Firefox dans Chrome, Safari, Opera et, bien, tous les navigateurs qui ne sont pas IE. Débarrassez-vous du mode quirks et trouvez quelque chose qui fonctionne universellement. – cletus
Merci cletus. Je ne connais qu'une petite partie du mode Quirks (principalement ce que j'ai lu sur quirksmode.org). En tout cas, si se débarrasser du mode quirks signifie se débarrasser du commentaire en haut du code (celui qui dit "Force IE6 en mode quirks"), j'ai essayé de le supprimer et le problème se passe toujours dans Firefox. Merci bien. –