28220 sujets

CSS et mise en forme, CSS3

[Résolu] Padding left plus important sous IE5.5 que sous IE6

Bonjour à tous,

Beaucoup de recherche et pas vraiment de solution sur le point précis suivant :
(Intranet société = IE5.5 ou IE6 Smiley fache )

Avec des padding à zéro partout j'ai un padding left qui persiste sur mes listes en IE 5.5. (Le but étant d'avoir un padding left de 10px dans les deux navigateurs)

Voici la page de test complète (code + CSS - les images) dans son état actuel (padding à 10px)

<!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" lang="en" xml:lang="en">

<head>
	<title>test news</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript">
    <!--
	function hideit() {
	thediv = document.getElementById("news");
	thediv.style.display = "none";
	}
    //-->
    </script>
	<style type="text/css">
	* {
	margin:0;padding:0
	}
	body {
	background:#d2d2d2;
	font-family: verdana;
	font-size:12px;
	}
	ul {
	list-style-type:none;
	}
	#news {
	left:100px;
	position:absolute;
	top:100px;
	width:200px;
	}
	#news hr {
	width:95%;
	}
	#top {
	background:#484848 url(top.gif) top left no-repeat;
	color:#000;
	font-size:14px;
	font-weight: bold;
	padding:10px;
	}
	#middle {
	background:#484848 url(middle.gif) repeat x;
	left:0;
	height:100px;
	overflow:auto;
	position:relative;
	top:0;
	}
	.lines {
	color:#000;
	font-size:10px;
	padding-left:10px;
	}
	#bottom {
	background:#484848 url(bottom.gif) bottom left no-repeat;
	color:#ffc;
	padding:10px;
	text-align:right;
	}
	#bottom a {
	color:#00c;
	font-weight:bold;
	font-size:9px;
	text-decoration:underline;
	}
	</style>
</head>

<body>

<ul id="news">
	<li id="top">News</li>
	<hr />
	<li style="margin:0;padding:0;">
		<ul id="middle">
			<li class="lines">Ligne1</li>
			<li class="lines">Ligne2</li>
			<li class="lines">Ligne3</li>
			<li class="lines">Ligne4</li>
			<li class="lines">Ligne5</li>
			<li class="lines">Ligne6</li>
			<li class="lines">Ligne7</li>
			<li class="lines">Ligne8</li>
			<li class="lines">Ligne9</li>
		</ul>
	</li>
	<li id="bottom"><a href="javascript:hideit();">Fermer les News</a></li>
</ul>

</body>
</html>


Merci d'avance pour votre aide Smiley cligne
Modifié par g41687 (22 Apr 2005 - 08:09)
Bon sang mais c'est bien sûr !
Hack mis en place sur le padding-left comme on le trouve partout sur "width". J'aurais du y penser Smiley cligne

Pour ceux qui préfèrent voir qu'imaginer :

	padding-left:0;	/* for ie5.x */
	voice-family: "\"}\"";
	voice-family: inherit;
	padding-left:20px;	/* for compliant browsers */


Merci Julien !
(Je mets un petit résolu)
Sujet clos
Aller à