28172 sujets

CSS et mise en forme, CSS3

Float et IE7

Bonjour,
J'ai une page qui s'affiche parfaitement sous FF (toutes versions), Chrome, IE8 et 9 mais sous IE7 c'est la catastrophe

Pour entrer dans le vif du sujet, voici un extrait qui pose déjà probleme:


<body>
  <div id="overAll">
    <div id="head">
      <div id="logo"><img src="/images/web/logo.jpg" alt="" width="156" height="138" /></div>
      <div id="actu">
        <img id="nav_lcorner" src="/images/web/nav_left.jpg" alt="" />
        <div id="nav">
          <a href="/">Accueil</a> | <a href="/">Présentation</a> | <a href="/">Conditions</a> | <a href="/">Contact</a> | <a href="/"><img src="/images/web/panier.png" id="bouton_panier" alt="" />3 articles <span class="bold">66,00€</span></a>
        </div>
      </div>
    </div>
  </div>
</body>


Coté css

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a img {
	border: none;
}
body {
	background-color: #dedbd5;
	background-image: url(/images/web/background.jpg);
	font-family: "Verdana";
	margin: 0px;
}
div {
	margin: 0px;
}

#actu {
	display: inline-block;
	font-size: 16px;
	font-weight: bolder;
	height: 181px;
	padding-left: 13px;
	vertical-align: top;
	width: 485px;
}
#head {
	background-color: #ffffff;
	font-size: 0px;
	height: 181px;
	width: 995px;
}
#logo{
	float: left;
	font-size: 12px;
	height: 181px;
	line-height: 181px;
	text-align: center;
	width: 199px;
}
#logo img {
	vertical-align: middle;
}
#nav{
	background-image: url(/images/web/nav_background.png);
	background-repeat: repeat-x;
	color: #FFF;
	font-size: 12px;
	font-weight: normal;
	height: 40px;
	padding-top: 8px;
	width: 485px;
}
#nav a{
	color: #fff;
}
#nav img {
	vertical-align: middle;
}
#nav_lcorner {
	float: left;
	height: 40px;
	width: 11px;
}
#overAll {
	margin-left: auto;
	margin-right: auto;
	width: 995px;
}


Le div nav passe sous nav_lcorner qui est pourtant en float left

Une idée ??

Merci d'avance
Bonsoir,

Oui:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Et je passe correctement (ni erreur, ni warning) les validateurs XHtml et Css2.1

J'ai résolu des choses en passant des inline-block en float left mais là, je sèche

Merci
bonsoir,

Pour ie7 et inferieur , les elements de type block reformaté en inline-block ne voit que leur haslayout modifié (voir ou rechercer aussi : contexte de formatage -> a partir de IE8 et pour les autres).

Pour obtenir l'effet rechercher , tu dois par exemple , via les commentaires conditionnels ( avec lte IE 7 ou lt ie 8) , appliquer un display:inline; et un zoom :1 ; .

Il y a me semble t-il un tutoriel sur ce site qui évoque cette différence a propos d'inline-block.

GC
Bonjour,
Merci pour ces réponses

Alors initialement, le logo était en inline-block et du coup, le div actu passait dessous. En passant le logo en float left, j'ai résolu ce pb

GC je vais regarder tout ça et je vous tiens au courant de mes essais
Merci
Je suis désolé, mais rien n'y fait,
J'ai essayé la technique du zoom:1 mais aucun effet

Sur quelle balise l'appliqueriez vous ?

Est il encore utile de supporter IE7 ? (moins de 4% de part de marché en novembre 2011...)

Merci de vos avis
Sujet clos
Aller à