CSS IE6 retourligne bloc réduction navigateur

Résolu/Fermé
Rico85 Messages postés 1 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 22 novembre 2007 - 22 nov. 2007 à 23:10
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 22 nov. 2007 à 23:30
Bonjour,

Je suis en cours de développement d'un site internet en JSP sur serveur Apache J2EE. J'ai réalisé le design de mon site en CSS qui le rend parfait sous FF, sous IE7 et sous IE6 (après adaptation). Le seul problème que je rencontre c'est lors de la réduction du navigateur sous IE6, mes blocs passent à la ligne et sont réduits, le site ne ressemble alors plus à rien. J'ai lu pas mal de choses sur les forums et testé plusieurs solutions sans succès, changé le doctype, mettre tout en position absolu placé le site dans un tableau....



je poste mon code code CSS:
body
{
width:100%;
min-width:1000px;
max-width:1000px;
margin:0 auto;
background-color:#ffffff;
font-family:Arial Unicode MS, Arial, sans-serif ;
font-size:8pt;
/*Sous IE6*/
-position:relative;
-overflow:scroll;
}

.headerLeft
{
float:left;
width:13.2%;
height:50px;
background-color:#333366;
color: white;
margin-top:1%;
margin-left:1%;
padding-top:1.2%;
padding-left:2%;
/*Sous IE6*/
-height:60px;
-padding-top:6%;
-padding-left:12%;
-width:15%;
}

.headerCenter
{
float:left;
width:67.4%;
height:24px;
background-color:#333366;
color: white;
margin-top:1%;
padding-left:1%;
padding-top:1%;
/*Sous IE6*/
-height:32px;

}


.headerRight
{
float:left;
width:15.2%;
height:50px;
font-size:10pt;
text-align:center;
background-color:#333366;
color: white;
margin-top:1%;
padding-top:1.2%;
/*Sous IE6*/
-width:15%;
-height:60px;
-padding-top:7%;
}


.footer
{
float:left;
width:98%;
background-color:#333366;
color: white;
text-align:center;
padding:0.4%;
margin-top:0.6%;
margin-left:1%;
/*Sous IE6*/
-width:97.3%;
}

.leftPanel
{
float:left;
width:15%;
min-height:550px;
background-color:#efeff5;
border:1px solid #7b7b7b;
margin-top:0.6%;
margin-left:1%;


}


.rightPanel
{
float:left;
width:15%;
min-height:550px;
background-color:#efeff5;
border:1px solid #7b7b7b;
margin-top:0.6%;
margin-left:0.6%;

}

.panelContent
{
padding-left:10px;
padding-top:5px;
padding-bottom: 8px;
}


.content
{
float:left;
width:67%;
min-height:578px;
border:1px solid #7b7b7b;
margin-top:-2.2%;
margin-left:0.6%;
/*Sous IE6*/
-width:66.2%;

}

et je met le code de mes pages JSP:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../CSS/cssAgregator.jsp" />

<body>


<!-- Partie gauche du header -->
<div class="headerLeft" >
<a class="logo" href="accueil" >AAAAAA</a>
<div>
blablablabla
</div>
</div>

<!-- Partie centre du header -->
<div class="headerCenter" >

</div>

<!-- Partie droite du header -->
<div class="headerRight" >

</div>

<!-- panneau gauche -->
<div class='leftPanel'></div>

<!-- contenu du site -->
<div class="content">

<!-- panneau droite -->
<div class='rightPanel'></div>

<!-- footer -->
<div class="footer"></div>
</body>

Merci d'avance pour les conseils que vous me donnerez

</html>
A voir également:

1 réponse

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
22 nov. 2007 à 23:30
Bonjour,

As-tu essayé autre chose que des % pour tout ?

As-tu essayé un bloc en clear après chaque groupe de float ou de les regrouper dans un autre bloc ?

--
-1