Problème CSS

Metabolix · 4 Avril 2005

Bonjour,

J'ai un problème d'affichage d'un tableau qui marche très bien sur Firefox mais sous IE, il est "décalé" vers la droite ...

Voici la source CSS :

body {
margin: 10px;
padding: 0; 
font: 0.8em "Trebuchet MS", helvetica, sans-serif;
text-align: center;
background-color: #DDEEAA;}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

.menu li {
	float: left;
	margin-bottom: 30px;
}

.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

.menu a:active {
background: gray;
border: 1px solid gray; 
color: #fff;
}
div#conteneur
{
	width: 750px;
	margin: 0 auto;
	text-align: left;
	background: #ffffff;
	border: 1px solid #000000;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */

div#header
{
	height: 130px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 40px;
	background-image: url(/alkablog_header.jpg);
}
/* On définit la hauteur de la partie header, contenant le titre du site */

pre
{
	overflow: auto;
}

/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
	width: 636px;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
div#contenu
{
	padding: 0 30px 0 30px;
	margin-right: 150px;
}
div#contenu h2
{
	padding-top:25px;
	padding-left: 25px;
	line-height: 25px;
	font-size: 1.4em;
	background: url("/petit_logo.png") no-repeat left bottom;
	color: #333333;
	border-bottom: 1px solid #000000;
}
div#contenu h3
{
	margin-left: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #9b2;
	border-left: 3px solid #9b2;
	color: #9b2;
}
div#contenu p
{
	text-align: justify;
	text-indent: 2em;
	line-height: 1.7em;
}
div#contenu a
{
	color: #8a0;
}

div#contenu a:hover
{
	color: #9b2;
}
p#footer
{
	margin: 0;
	padding-right: 10px;
	line-height: 30px;
	text-align: right;
	color: #333333;
}
pre
{
	overflow: auto;
	background: #dea;
	border: 2px solid #9b2;
	padding: 5px 0 0 5px;
	font-size: 1.2em;
}
pre span
{
	color: #560;
}
pre span.comment
{
	color: #b30000;
}
table#header {
	background-color: #000000;
	color: #FFFFFF;
}
form { margin: 0px; }
div#contenu table {
	clear: left;
}
div#colonne_droite {
	right:0;
	width: 150px;
	float: right;
	font-size: 11px;
}
div#colonne_droite h3 {
	font-size: 12px;
	font-weight: bold;
}
ul#stats {
	margin-left: 0px;
	padding-left: 0px;
}
/* MENU */
td.item { background: #F5F5F5; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }
td.item2 { background: #DDDDDD; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }
td.itemcat { background: #666666; color: #FFFFFF; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; }

/* PROFILE PAGE */
table.profile { border: 1px solid #AAAAAA; }
td.profile1 { background: #DDDDDD; font-weight: bold; border-bottom: 1px solid #AAAAAA; padding: 6px; padding-bottom: 0px; }
td.profile2 { background: #F5F5F5; padding: 6px; line-height: 17px; color: #333333; }

/* TABLES */
td.content { padding: 10px; padding-top: 2px; padding-right: 0px; line-height: 17px; color: #333333; }
td.list { background: #FFFFFF; padding: 7px; border: 1px solid #AAAAAA; border-top: none; color: }
td.header { border: 1px solid #AAAAAA; padding: 7px; padding-bottom: 7px; background: #DDDDDD; font-weight: bold; }
td.box { padding: 7px; line-height: 17px; padding-left: 0px; padding-top: 0px; }
td.empty { background: #F5F5F5; padding: 7px; border: 1px solid #AAAAAA; }
td.entry1 { border-right: 1px solid #DDDDDD; padding: 5px; padding-right: 10px; padding-bottom: 0px; }
td.entry2 { padding: 5px; padding-left: 10px; padding-bottom: 0px; }
td.advanced { padding: 5px; background: #EEEEEE; border-bottom: 1px solid #AAAAAA; }
div.float { float: left; padding-right: 1px; }
table.box { border: 1px solid #666666; border-bottom: 2px solid #666666; background: #F5F5F5; }

/* ALTERNATING LISTS */
td.list1a { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; }
td.list1b { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; }
td.list2a { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; }
td.list2b { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; }

/* OTHER FONTS */
font.disabled { color: #666666; }
font.gray { color: #666666; }
font.stats { font-size: 7pt; font-family: arial, verdana, tahoma; }
font.url { font-size: 9pt; font-weight: normal; }

/* INPUT STYLES */
input.button { background-color: #DDDDDD; padding: 3px; font-size: 9pt; font-weight: bold; font-family: verdana, arial, tahoma; }
input.sbutton { background-color: #DDDDDD; font-size: 8pt; font-weight: bold; font-family: verdana, arial, tahoma; }
input.text { font-family: arial, verdana, tahoma; }
textarea, select { font-family: arial, verdana, tahoma; margin-top: 1px; font-size: 10pt; }
select.small { font-size: 8pt; margin-left: 4px; }
div#blogposttitle {
background: url("/icone-billet.png") no-repeat left bottom;
padding-left: 22px;
}

div#contenu_2
{
	padding: 0 30px 0 30px;
	margin-right: 0px;
}
div#contenu_2 h2
{
	padding-top:25px;
	padding-left: 25px;
	line-height: 25px;
	font-size: 1.4em;
	background: url("/petit_logo.png") no-repeat left bottom;
	color: #333333;
	border-bottom: 1px solid #000000;
}
div#contenu_2 h3
{
	margin-left: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #9b2;
	border-left: 3px solid #9b2;
	color: #9b2;
}
div#contenu_2 p
{
	text-align: justify;
	text-indent: 2em;
	line-height: 1.7em;
}
div#contenu_2 a
{
	color: #8a0;
}

div#contenu_2 a:hover
{
	color: #9b2;
}
div#contenu_2 table {
	clear: left;
}
[/code]

et HTML

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XXXXXXXXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<link href="/style_alkablog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur">
<div id="header">
</div>
<ul class="menu">
<li>MENU</li>
</ul>
<div id="colonne_droite">
<h3>XXXXXX</h3>
<p> </p>
<h3>XXXXXX</h3>
<p> </p>
<h3>XXXXXX </h3>
<p> </p>
</div>
<div id="contenu">
XXXXXXXXXXXXXX </div>
<p id="footer">XXXXXXXXXXX</p>
</div>
</body>
</html>

Merci de votre aide ...

Metabolix · 4 Avril 2005

voici ce que ca donne sous IE :

Et sous firefox, pareil sauf qu'il n'y a pas de décalage à droite

Metabolix · 4 Avril 2005

voilà sur firefox screen2(1).jpg

merci de votre aide

MarvinLeRouge · 4 Avril 2005

Salut,

Montre les styles de ton header stp (ceux qui gèrent le positionnement de la tête de lapin).

alkapote · 4 Avril 2005

div#header
{
height: 130px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 40px;
background-image: url(/alkablog_header.jpg);
}

Here it is ! (je travaille avec Metabolix...)

Modifié 4 Avril 2005 par alkapote

MarvinLeRouge · 5 Avril 2005

1) Tiens, t'as pas précisé la position de ton background. Essaye.

2) Tu n'aurais pas une adresse de test en ligne par le plus grand des zazars ?

alkapote · 5 Avril 2005

Bon allez c'est pas grave... je voulais le garder pour la sortie officielle :

-http://***********

Merci si vous trouvez... :fete:

[edité : le site n'est pas encore sortie officiellement ]

Modifié 5 Avril 2005 par alkapote

alkapote · 5 Avril 2005

Personne ne sait d'où cela peux-il venir ?

Une piste ? une idée ?

Knives · 5 Avril 2005

UL {
	WIDTH: 100%; LIST-STYLE-TYPE: none; margin:0px; padding:0px;
}

et magie

Knives · 5 Avril 2005

encore mieux

UL {
	WIDTH: 80%; LIST-STYLE-TYPE: none; 
}

simplement

ton ul prend toute la largeur avec ie ...

et je sias pas si tu avais remarqué masi t'as boite colonne_droite était plus bas (c'est grâce a ça que j'ai trouvé) et donc il y avais qqch au dessus

alkapote · 5 Avril 2005

Ca c'est la classe ! :fete: :fete: :fete: :fete: :fete: :fete: :fete:

Merci Knives... c'était tellement sous mes yeux que je n'y est pas pris garde !

A bientôt,

Alkapote

Knives · 5 Avril 2005

mais de rien

c'est normal ...

PS: il est pas mal ton site ...

Modifié 5 Avril 2005 par Knives

alkapote · 5 Avril 2005

Merci

Je te tiendrais au courant de la sortie officielle si tu veux... c'est un site de création et d'hébergement de blogs gratuits...

Connexion

Problème CSS

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter