Problème d'affichage sous IE

Bonjour à tous,

J'ai refait tout le site web de mon chien en partant d'un template que j'ai trouvé sur le net.

Le problème, c'est que la page d'accueil ne s'affiche pas correctement sous IE (et encore, chez moi et sur l'ordi de ma mère cela marche...); le comble, c'est que c'est cette feuille de style là que j'ai le moins modifié par rapport a celles des autres pages.

Voilà le site: http://ceruleanblue.diboo.net

L'affichage doit se faire avec le bloc "bienvenue" situé sur la même ligne que le bloc "news"; les gens qui le voient mal sous IE le voient bien sur la partie gauche mais en dessous du bloc contact.

édit: a priori le problème viendrait de IE 6.0 et en dessous, mais sous 7.0 ça marche!

Voilà la feuille de style de cette page:

body {
	
	background-color: #4096ee;
	color:#666666;
	font-family:Arial,Helv,sans-serif;
	font-size:11px;
	line-height: 1.4em;

	margin:0;
	padding:0;
}

a:link,a:visited {
	color: #000; 
	font-weight: 
	bold; text-decoration:none;
}

a:hover {
	color: #000;
	text-decoration:underline;
}


.image {

	float: left;

	margin: 0 9px 0px 0;
}


.image2 {

	float: right;
margin-left: 9px;
margin-top: 9px;
margin-bottom: 0px;
margin-right: 0px;
}



.content_title {
	position: absolute;
	padding-top: 9px;
	padding-left: 17px;
	font-size:14px;
	margin-bottom: 0px;
	font-weight:bold;
	width: 467px;
	color: #fff;
	background: url(header.gif) no-repeat ;
	height: 30px;
}

#content_title a, #content_title a:visited {
	color: #FFF;
}

h3 {
	margin-top: 0px;
	padding-top: 9px;
	padding-left: 17px;
	
	font-size:14px;
	color: #000;
	margin-bottom: 0px;
	background: url(rightheader.gif) no-repeat top left;
	height: 30px;
}

#main_head {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0px;
    padding-top: 25px;
    padding-bottom: 5px;
	color: #fff;
	height: 200px;
    margin-top: 20px;
	background: url(overallheader.png) no-repeat;
}

#logo {
	padding-left: 260px;
	height: 200px;
    margin-left: 25px;
	margin-right: 25px;
	background: url(banniere.jpg) no-repeat ;
}

#heads {
	width: 750px;
	margin: 0px auto;
	background-color: #4096ee;
	color: #333;
	line-height: 130%;
}


#center_width {
	width: 710px;
	margin: 0px auto;
    color: #333;
}

#center {
	width: 750px;
	margin: 0px auto;
	background: url(middle.gif) no-repeat;
	color: #333;

}


#rt_content {
	float: right;
	width: 240px;
    background: #FFF url(rightcontent.gif);
	text-align:justify;
	color: #ccc;
}


.lt_content {

	margin-right: 240px;
	width: 467px;
	background: url(content.gif) top left;
	text-align:justify;
	
}

.text {
	padding: 39px 18px 25px 18px;
	color: #000;
	margin-bottom: 0px;
	background: url(footer.gif) no-repeat left bottom;
}

.rt_footer {
	padding: 0px 18px 25px 18px;
	color: #000;
	background: url(rightfooter.gif) no-repeat left bottom;
}

.footer { 
	clear: both;
	text-align: center;

	padding: 10px 0 10px 0;
	margin-top: 20px;
	background: url(overallfooter.gif) repeat-x ;
	line-height: 1.8em;
}

.footer a { 	color: #000000; }


 /*MENU*/


#thicktabs{
margin: 0;
padding: 0;
float: left;
font: bold 11px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a {
float: left;
color: black;
padding: 8px 11px;
text-decoration: none;
background: transparent url(bluebg.gif) top right no-repeat;
}

#thicktabs li a#leftmostitem{ 
border-left: 1px solid #7aa8cc; 
margin-left: 125px;        /*align menu*/
}

#thicktabs li a#rightmostitem{ 
border-right: 1px solid #d3bdbe; 
background-position: top left; 
}

#thicktabs li a:visited{
color: black;
}

#thicktabs li a:hover{
color: black;
background-image: url(bluebgover.gif); 
}

p.iepara{
padding-top: 1em;
}

ul#thicktabs {
margin-top: 4px;
width: 704px;
margin-left: 1px;
margin-bottom: 4px;
border-right: 2px solid #6baef2; 
text-decoration: none;
background: transparent url(menubar-bg.gif) top right repeat-x;
border-top: 2px solid #6baef2; 
border-bottom: 2px solid #6baef2; 
border-left: 2px solid #6baef2; 
}

Merci à tous ceux qui essaieront de m'apporter de l'aide
Modifié par didou47 (28 May 2007 - 18:23)

je n'ai pas la réponse instantanée à ta question, mais comme j'en ai une très voisine (modif IE6 IE7 inverse de la tienne), je te rends service en remontant ton post (et en en profitant pour replacer le mien..... ça doit être des sujets trop "simples" pour que les spécialistes s'y intéressent..... )
donc le mien c'est :
j'ai été formé au html il y a plus de cinq ans, et j'en suis donc resté à la version "transitionnal", or il semble que mes pages qui fonctionnaient sous IE6 (et firefox évidemment !!) ne fonctionnent plus sous IE7....
dans mes frames, la balise "base target" ne fait plus effet.....
malgré mes jurons contre IE7 j'aimerai trouver une solution.
peut-on m'indiquer un site (lien, page, tutoriel....) qui donnerait qqes détails sur le passage du html au xhtml et les changements éventuellement impératifs ?? (spécialement pour target et base target....)
site en cause :
http://dodosvolants.free.fr
(pour voir l'effet sous IE7, par exemple, cliquer sur galeries, puis dans le menu de gauche sur le 2e ou 3e bouton..... l'affichage n'a pas lieu dans l'espace central alors que c'est bon sous IE6 et firefox....)
merci d'avance !!
(et je cherche un peu pour didou....)
Modifié par dodovolant (30 May 2007 - 09:33)

Salut,

bon j'ai déjà regardé pour didou.

moi quand je vois ce genre de rendu je suspecte en premier qu'on essai de faire "float-er" ( a entrer dans le dictionnaire ) deux div trop larges pour rentrer dans leur conteneur.

en essayant de reproduire le pb chez moi sans image j'ai vu que l'image avait quand même une taille fixé dans le img.

<img src="photo 522BSITE.jpg" alt="" width="440" height="332" />

avec un width de 430 au lieu de 440 les blocs se mettait bien face sous IE6.

a mon avis ( mais je ne suis pas un de ces expert pour qui le pb est trop simple ) on doit pouvoir arranger les choses sans reduire l'image.
440 doit passer puisqu'au dessus on a un texte de 467px de width. mais surement des padding margin doivent se rajouter a l'image.

Pascal

edit: @dodo desolé je n'ai pas ie7. mais le fait que ce soit la necessité de passer de html vers xhtml qui soit la source du problème avec ie7....
possible mais ça se discute
Modifié par CPascal (30 May 2007 - 10:36)

Bonjour,

A priori pour les oursons, ce serait le bug des 3px (3px jog bug) ie6 rajoute 3px de marge au bloc suivant un flottant dans certaines conditions.
Voir là
Modifié par ghost (30 May 2007 - 10:39)

merci de vos réponses..... (mon petit coup d'humour envers les spécialistes venait du fait que didou aussi bien que moi attendions une réponse depuis 2 jours.... mais c'était sans méchanceté !!)
je ne sais pas ce que IE7 interprète mieux ou moins bien qu'IE6 mais je m'en méfie par principe !! (comme de TOUT ce qui vient de microsoft.....)
et là le problème ne concerne que le fonctionnement de target et base target dans des frames.....
(et ça a son charme les frames, et des avantages de fonctionnement qu'on ne trouve pas -aussi facilement- en PHP, en FLASH, ou autre technique que je ne maîtrise -malheureusement- pas encore.......)
bref si je trouve la soluce, je l'applique, sinon au choix je me remets aux études (lol) ou je dis m..de à IE7..... (et à VISTA, parce que là je vais installer Linux !!)
hum.... un ti-punch pour réfléchir !!
salut.....

ça y est.... solution trouvée.... c'est le "base target" qui ne passe plus sous IE7.
je l'ai donc supprimé et remplacer par un "target" simple dans chaque lien concerné......
et pour didou ? est-ce que la solution préconisée au-dessus a fonctionné ??
bye...

Bonjour,

Merci à tous,

Je suis en période d'examens en ce moment donc je n'ai pas le temps de regarder pour la modification sur mon site. Mais dès que j'aurais fini, je regarderais ça, pour voir si cela résoud le problème.

Adeline