28220 sujets

CSS et mise en forme, CSS3

Débordement sous IE mais pas Firefox :(

Salut à tous !

Alors avant de commencer, je tiens à dire que je débute parfaitement dans le milieu du CSS... Hein ^^

Voici mon problème :

J'ai des problêmes de débordement sous IE mais pas sous Firefox... Comme un e image est plus parlante qu'un texte, voila ce que je veux obtenir :

http://dystopy.free.fr/firefox.JPG

Ca fonctionne parfaitement sous Firefox, et partiellement sous IE

http://dystopy.free.fr/IE.JPG

J'ai un peu regardé du coté de l'overflow, etc, mais je ne fait que du "trifouillage" Smiley cligne

Voici le contenu de mon css (Ne pas rire Smiley smile )


.carte{
	top:15%;
	left:53%;
	position:absolute;
	padding:10px;
	background-color:#A2C6E4;
	text-align: left;
	width:50%;

}

a
{
text-decoration:none;
}
a:hover
{

text-decoration:none;
}



option,input
 {
background-color:#E3F3FF;
color:black;
}


select
 {
background-color:#E3F3FF;
color:black;
width:30%;
}


.itin{
  margin-left:5px;
  width:50%;
  padding:5px;
  background-color:#A2C6E4;
}

.itin2{
  padding:5px;
    width:45%;
      	top:30%;
	left:30%;
	position:absolute;
  background-color:#A2C6E4;
}


.itin3{
  	top:30%;
	left:30%;
	position:absolute;
  padding:100px;
  background-color:#A2C6E4;
}


body {
margin: 10px;/* sans marges, la page sera collée aux bords */
 font-family: verdana, helvetica, sans-serif ;
font-size: 12px; /* on définit la taille de police de base dans la page */
background-color:#F5F8FC;
 overflow-y: hidden ;
 padding:0px;
}



table {
 font-family: verdana, helvetica, sans-serif ;
font-size: 12px; /* on définit la taille de police de base dans la page */
}


.bleu{
background-color:#E3F3FF;
padding:5px;
margin-top:2px;
overflow:hidden;
}

.gris{
background-color:#EEFFFF;
padding:5px;
margin-top: 2px;
overflow:hidden;
}

.limit{
background-color: white;
padding:5px;
margin-top: 2px;
width:50%;
border-style : solid;
border-color:#A2C6E4;
}


.alerte{
background-color: white;
padding:5px;
margin-top: 2px;
border-style : solid;
border-color:red;
position:relative;
width:50%;
}



.panneau{
padding:5px;
width:40%;
margin-top:15px;
background-color:#A2C6E4;
position:relative;
float:right;
}


.pied{
	position: relative;
}

.total{
height:100%;
overflow:auto;
}




body>.carte {position:fixed}


Et voici la structure HTML de mon doc ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>


<link rel="stylesheet" type="text/css" href="test.css"> </link>
</head>
<body>
<div class="total" id="total">
     <div class="itin">
          <div class="bleu">  (ou gris selon le cas)
          <div class="panneau" id="0"></div>
          <div class="text">
               <div class="limit"></div>
               <div class="alerte"></div>

          </div>
     </div>
</div>
<div class="carte">
</div>
<div class="pied" id="pied">
</div>

</body>


J'appelle les Dieux du CSS ici présents de se pencher sur mon cas Smiley langue

Merci à tous !
Sujet clos
Aller à