Problème avec le menu sous ie6 et ie7

Question

Fizzy

28 May 2007 à 16:30

Bonjour, j'ai un problème sous ie6/ie7 mon menu de droite part à gauche :s
j'y comprend rien du tout habituellement en changeant le margin ou le width ça marché, mais là ça marche pas du tout :s
Aperçu: http://www.fizzystudio.com/Fizzy/ ^^

css:

/* Les elements (X)HTML en general
-------------------------------------------------------- */
* {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0; margin:0; color: #b9b9b9;}
body {background: #fff url(images/bg.png) repeat top center;}

/* Text Style
-------------------------------------------------------- */
h2 {color: #ffffff;}
p {
	color: #b9b9b9;
	line-height: 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:11px;
}
a {
	color: #2a6d76; 
	font-family: Verdana, Helvetica, sans-serif; 
	text-decoration: none;
	font-size:11px;
}
a:hover {
	border-bottom: 1px solid;
}
img {border: 1px solid #262626; background: #1f1f1f; padding: 4px;}

/* Container
-------------------------------------------------------- */
#container {
	margin: 0 auto;
	background: transparent;
	min-width: 845px;
}

/* Header
-------------------------------------------------------- */
#header {
	margin: 0 auto;
	background: transparent url(images/header2.png) no-repeat top center;
	min-width: 845px; height: 266px;
}
#header h1 {
	text-indent: -9999px;
}

/* Footer
-------------------------------------------------------- */
#footer {
	margin: 0 auto;
	background: transparent url(images/footer.png) no-repeat top center;
	min-width: 845px; height: 139px;
	clear: both;
}
#footer p {
	width: 290px; height: 56px;
	margin: 0px auto;
	padding: 83px 0 0 0px;
	color: #333;
	font: normal 11px Arial, Helvetica, sans-serif;
}
#footer p a {
	color: #1f4f56;
}

/* Contenue
-------------------------------------------------------- */
#contenue {
	margin: 0 auto;
	background: transparent url(images/cont.png) no-repeat top center;
	min-width: 845px; min-height: 453px;
}

#contenu {
	margin: 0 auto;
	width: 845px;
}

/* tickets
-------------------------------------------------------- */
#right {
	width: 565px;
	float: left;
}
.ticket {
	margin: 5px 0px;
}
.ticket ul li {
	font-size: 11px;
	list-style-type: circle;
	margin: 5px 0px 5px 30px;
	color: #b9b9b9;
}
.ticket ul li a {
	font-size: 11px;
	list-style-type: circle;
	color: #b9b9b9;
}
.ticket h2 a, .ticket h2 a:hover {
	color: #fff;
	letter-spacing: -1.5px;
	font: normal 24px Verdana, Arial, Helvetica, sans-seriff;
	border-bottom: none;
}
p.info {
	color: #757575;
	font-size: 10px;
	widows: 565px;
	border-bottom: 1px dotted #2a6d76;
	margin: -3px 0 4px 0px;
}
.separ {
	width: 496px; height: 27px;
	margin: 3px 0 0 34.5px;
	background: url(images/-.png) no-repeat top center !important;
	background: url(images/-.gif) no-repeat top center;
}

/* Sidebar
-------------------------------------------------------- */
#left {
	float: left;
	margin-left: 20px;
	width: 210px;	
	margin-top: 5px;
}
#left h3 {
	color: #fff;
	letter-spacing: -1.5px;
	font: normal 20px Verdana, Arial, Helvetica, sans-seriff;
	border-bottom: none;
	margin: 5px 0px;
	background: url(images/star.png) no-repeat top left;
	padding-left: 44px;
	height: 41px;
	padding-top: 7px;
}
#left ul {
	margin: -10px 0px 3px 0px;
	padding-left: 60px;
	border-bottom: 3px solid #081315;
	padding-bottom: 5px;

}
#left ul li {
	list-style-type: circle;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #fff;
	border-bottom: 1px dotted #0c1f22;
}
#left ul li:hover {
	border-bottom: 1px solid #0c1f22;
}

/* Menu
-------------------------------------------------------- */
ul#menu {
	margin: 0 auto;
	background: transparent;
	width: 339px; height: 48px;
	text-align: center;
}
ul#menu li {
	list-style: none;
	display: inline;
}
ul#menu li a, ul#menu li a:hover {
	width: 113px; height: 48px;
	float: left;
	text-indent: -9999px;
	border-bottom: none;
}
a#portfolio {
	background: transparent url(images/portfolio.png) no-repeat top left;
}
a#portfolio:hover, a#portfolios {
	background: transparent url(images/portfolio.png) no-repeat top right;
}
a#contact {
	background: transparent url(images/contact.png) no-repeat top left;
}
a#contact:hover, a#contacts {
	background: transparent url(images/contact.png) no-repeat top right;
}
a#blog {
	background: transparent url(images/blog.png) no-repeat top left;
}
a#blog:hover, a#blogs {
	background: transparent url(images/blog.png) no-repeat top right;
}

html

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

	<title>FizzyStudio - Blogue de Fizzy : Design, portfolio, web, life</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
    <script type="text/javascript" src="csshover.js"></script>
	
			

</head>
	<body onLoad="parseStylesheets()">
<!-- Container
/////////////////////////////////////-->
    	<div id="container">
<!-- Menu
/////////////////////////////////////-->
			<ul id="menu">
                <li><a id="blogs" href="http://www.fizzystudio.com/">Blog</a></li>
                <li><a id="portfolio" href="http://www.fizzystudio.com/portfolio/">Portfolio</a></li>
                <li><a id="contact" href="http://www.fizzystudio.com/contact.php">Contact</a></li>

            </ul>
<!-- Header
/////////////////////////////////////-->
			<div id="header">
            	<h1>>FizzyStudio - Technologie, website, design, web2</h1>
            </div>
<!-- Contenue
/////////////////////////////////////-->
			<div id="contenue"><div id="contenu">
<!-- Right
/////////////////////////////////////-->
            	<div id="right">
                	<div class="ticket">

                    	<h2><a href="#">// FizzyStudio is Open</a></h2>
                        <p class="info">Par Fizzy :: le 18/05/2007 à 16H25 :: Categorie <a href="#">Design</a></p>
                        <p>
                        	<em>Lorem</em> <u>ipsum</u> <s>dolor</s> sit amet, consectetuer adipiscing elit. Ut ut nulla. Nulla vitae justo eu est gravida tempus. Vivamus in mauris et dui viverra vestibulum. Donec nulla augue, auctor in, condimentum eu, interdum a, sem. Cras ut enim sit amet nisi eleifend volutpat. Morbi quis quam quis libero consectetuer auctor. Aenean nec eros id erat mattis molestie. Nullam vehicula luctus eros. Quisque dapibus. Suspendisse potenti. Nam urna metus, dignissim a, condimentum in, faucibus eget, dolor. Curabitur urna pede, vulputate in, luctus condimentum, dignissim sit amet, lectus. Nulla nec orci. Maecenas nec justo. Morbi tristique laoreet eros. Sed porta.
                        </p>

                        <ul>
                        	<li>accueil</li>
                            <li><a href="#">accuei</a>l</li>
                        </ul>
                        <div class="separ"></div>
                    </div>
                    <div class="ticket">

                    	<h2><a href="#">Blblab hdjsojsd</a></h2>
                        <p class="info">Par Fizzy :: le 18/05/2007 à 16H25 :: Categorie <a href="#">Design</a></p>
                        <p>
                        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ut nulla. Nulla vitae justo eu est gravida tempus. Vivamus in mauris et dui viverra vestibulum. Donec nulla augue, auctor in, condimentum eu, interdum a, sem. Cras ut enim sit amet nisi eleifend volutpat. Morbi quis quam quis libero consectetuer auctor. Aenean nec eros id erat mattis molestie. Nullam vehicula luctus eros. Quisque dapibus. Suspendisse potenti. Nam urna metus, dignissim a, condimentum in, faucibus eget, dolor. Curabitur urna pede, vulputate in, luctus condimentum, dignissim sit amet, lectus. Nulla nec orci. Maecenas nec justo. Morbi tristique laoreet eros. Sed porta.
                        </p>
                        <div class="separ"></div>
                    </div>
                </div></div>

<!-- Left
/////////////////////////////////////-->
				<div id="left">
                	<h3>Catégorie</h3>
                    <ul>
                    	<li><a href="a">Accueil</a></li>
                        <li>Accueil</li>
                        <li>Accueil</li>

                        <li>Accueil</li>
                        <li>Accueil</li>
                    </ul>
                    <h3>Catégorie</h3>
                    <ul>
                    	<li>> Accueil</li>
                        <li>> Accueil</li>

                        <li>> Accueil</li>
                        <li>> Accueil</li>
                        <li>> Accueil</li>
                        <li>> Accueil</li>
                    </ul>
                    <h3>Catégorie</h3>

                    <ul>
                    	<li>> Accueil</li>
                        <li>> Accueil</li>
                        <li>> Accueil</li>
                        <li>> Accueil</li>
                        <li>> Accueil</li>

                        <li>> Accueil</li>
                    </ul>
                </div>
            </div>
<!-- Footer
/////////////////////////////////////-->
			<div id="footer">
            	<p>Copyright 2007 &copy; <a href="http://fizzystudio.com">FizzyStudio</a> - Carbure avec <a href="http://pluxml.org">PLuxml</a></p>

            </div>
        </div>
	</body>
</html>

Merci d'avance

Fizzy

28 May 2007 à 16:59

C'est bon c'est reglé ^^

Sujet clos

Sémantique web et HTML

Problème avec le menu sous ie6 et ie7