28173 sujets

CSS et mise en forme, CSS3

Espace entre 2 images incompréhensible su IE7

Bonjour,

J'ai crée une page où le logo et une image doivent être alignés et côte à côte.
L'image du logo est située dans la div id left et l'autre image est une image de fond située dans la div id righttop.

Tout fonctionne dans Firefox, opera et seamonkey (mozilla) mais IE7 met un espace gauche de 5px dans la div righttop.

Cet esapce reste que l'image soit en image de fond ou pas dans cette div ou les deux div concernées.

Je ne sais plus comment faire.

Merci,

UHU

-----------------------------------------------------------------------
Voici la feuille de style (en grande partie)
-----------------------------------------------------------------------

body { color: #000000;
background-color: #ffffff;
margin: 0;
padding: 0px;
border-style: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
line-height: 1.2em;
text-align: center;
}

#wrapper{
margin: 0 auto;  
padding: 0px;
width:750px;
height: 647px;
background-color: #F5D9F8;
text-align: left;
}
[b]#left{
width: 150px;
height:600px;
margin:0px;
padding:0px;
background-color: black;
float: left;
}[/b]
#right{
margin: 0 0 0 150px;
width:595px;
height:600px;
padding:0px;
text-align: left;
}
[b]#righttop{
width:595px;
height:90px;
margin:0px;
padding:0px;
background-image:url(top-temp.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;
float:left;
text-align: left;
}[/b]
#rightcontent{
margin:0px;
width:595px;
height:520px;
padding:0px;
}
#rightcontent p{
margin:4px 0;
padding:5px;
}
#spacer{
clear:both;
margin:0;
height:1px;
width:750px;
background-color: #F5D9F8;
padding:0px;
}
#footer{
margin:0;
height:38px;
width:750px;
background-color: #F5D9F8;
padding:0px;
}

---------------------------------------------------------------------------
Code HTML de la page :
---------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div id="wrapper" class="clearfix">

[b]<div id="left">

<img style=" alt="" src="logo-temp.gif" border="0" height="150" width="150"> [/b]
<ul class="menugauche">
  <li><a href="-">Titre1</a></li>
  <li><a href="">Titre2</a></li>
  <li><a href="">Titre3</a></li>
  <li><a href="-">Titre4</a></li>
</ul>
</div>

<div id="right">
[b]<div id="righttop"></div>[/b]
<div id="rightcontent"></div>
</div>
<br>
<div id="footer0"> 
</div> 
<div id="footer"> 
<div id="footerblockleft"> 
test</div>
<div id="footerblockmiddle">adress</div>
<div id="footerblockright">
test</div>
</div>
</div>
</body>
</html>

Modifié par UHU (27 Feb 2007 - 20:53)
Pas de réponse ? Snif. Smiley sweatdrop . Je suis sûre que ce n''est pas grand chose pourtant.

Bises,

UHU
Sujet clos
Aller à