28173 sujets

CSS et mise en forme, CSS3

Probleme CSS menu bug sous IE

Salut a tous Smiley smile

Voilà, j'aimerais voter aide car mon menu en css bug ( il est décalé vers le bas sous IE ) ce qui fais que la navigation n'est pas facile :s

Voilà mon code css :

html, body {
	margin: 0px ;
	padding: 0px ;
	font-family: verdana, arial, sans-serif ;
	font-size: 9pt ;
	text-align: center ;
	background-color: #e9e9e9 ;
	color: #000000 ;
	position:relative;
	}
#global {
	background-image: url(images/no.jpg);
	background-repeat: no-repeat;
	width: 760px ;
	margin-right: auto ;
	margin-left: auto ;
	margin-top: 20px ;
	margin-bottom: 20px ;
	text-align: left ;
	background-color: #f2ecd9 ;
	border: 2px dashed #f9f6ec;
	}
div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #c48ac6 ;
	border-bottom: 1px solid #4fc69e ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #d497d6 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #b57eb7 ;
}

div#contenu a:hover
{
	color: #b57eb7 ;
}
#header {
	background: #f2ecd9 url(images/test.jpg) no-repeat;
	color: #fff;
	height: 136px;
	}
#menu {
	float: left;
	width: 70px ;
	list-style: none ;
	margin: 10px ;
	padding: 4px ;
	border: 1px dashed #f9f6ec;
	}
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:354px;
height:136px;
}
.zoom img:hover {
width:400px;
height:300px;
}


Et mon html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Leskimo.net</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

	</head>
	<body>
		<div id="global">
		<div id="header"></div>
		<div id="contenu">
                test
<div class="zoom">
<img src="images/test.jpg" alt="test" />
</div>
                </div>

		<ul id="menu">
			<li><a href="test.htm">test</a></li>
			<li><a href="test.htm">test</a></li>
			<li><a href="test.htm">test</a></li>
			<li><a href="test.htm">test</a></li>
			<li><a href="test.htm">test</a></li>
		</ul>


</div>


Voilà ce que ca fais sous IE :

http://img222.imageshack.us/img222/9858/testfd6.jpg
Merci de votre réponse Smiley smile
Modifié par leskimo (08 Mar 2007 - 08:55)
Sujet clos
Aller à