CSS IE6 retourligne bloc réduction navigateur
Résolu
Rico85
Messages postés
1
Statut
Membre
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
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>
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:
- CSS IE6 retourligne bloc réduction navigateur
- Navigateur web - Guide
- Extension de navigateur - Guide
- Navigateur privé - Guide
- Bloc-notes (windows) - Télécharger - Traitement de texte
- Reduction taille image - Guide