28173 sujets

CSS et mise en forme, CSS3

Demande d'avis sur structure

Voila je pense avoir finis ma structure (pas le site !!!) mais il me reste une petite interrogation.
http://diwatt.free.fr/css%20probleme/last%20site/ voici la structure.
le code (x)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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Galerie du L&eacute;zard</title>
	<link rel="stylesheet" href="gdl.css" type="text/css" media="screen" />
</head>

<body>
	<div id="header">
		<div id="menu">
		<img src="./image/test.gif" alt="test" />
		</div>
	</div>
	<div id="main">
		<div id="col1">
		<p><a href="#">Actualit&eacute;s &raquo</a></p>

		<p><a href="#">Derni&egrave;res Expos &raquo;</a></p>

		<p><a href="#">Peintures &raquo;</a></p>

		<p><a href="#">Luminaires &amp; Objets &raquo;</a></p>

		<p><a href="#">Textiles &raquo;</a></p>

		</div>
		<div id="col2" >
		<span class="titre">Galerie du L&eacute;zard</span><br/>
blabla
 	             </div>
		<div id="col3">
		<p><a href="#">&laquo; liens</a></p>

		<a href="#">&laquo; contact </a><br/>
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="footer">
		<div id="foot_cont">Pied de page
		</div>
	</div>
</body>
</html>


le css : 

/* CSS Document */

body {
	background-color: #FFFFF0;
	text-align: center;
	color: navy;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
	}

img {
	margin: 0;
	padding: 0;
	border: 0px solid #000000;
	}
 	
#header {
	background-color: #B0C4DE;
	color: navy;
	height:85px;
	background-image:url(image/bgheader2.gif);
	background-repeat:repeat-x;
  	background-position: 0% 100%;
	}
	
#menu {
	height: 100%;
	font-size:11px;
	border: 0px solid #000000;
	background-image:url(image/lezard2.jpg);
	background-repeat: no-repeat;
  	background-position: 0% 0%;
	}
 
#main {
	text-align: left;
	line-height: 19px;
	margin-right: auto; 
	margin-left: auto; 
	width: 770px; 
	height: auto;
	background-image:url(image/xbg2.gif);
	background-repeat: repeat-y;
	background-position: 0% 0%;
	border: 0px solid #000000;
	}

#col1 {
	float:left;
	text-align: right;
	margin-right: 17px;
	font-size : 10px;
	width: 145px;
	height: auto;
	color: #369;
	border: 0px solid #000000;
	}

#col2 {
	float: left;
	margin-right: 0px;
	color: navy;
	width: 457px;
	height: auto;
	background-image:url(image/lieu.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 0px solid #000000;
  	}
.titre {
	font-size: 16px;
	font-weight: bold;
    }  	
    
#col3 {
	float: left;
	font-size:10px;
	width: 145px;
	height: auto;
	border: 0px solid #000000;
	}

#footer {
	clear:left;
	font-size: 11px;
	background-image:url(image/bgfoot.gif);
	background-position: 0% 0%;
	background-repeat: repeat-x;
	height: 25px;
	width:100%;
	margin-top: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	}


#foot_cont {
	color: navy;
	margin-right: auto;
    	margin-left: auto;
    	text-align: center;
	font-size: 11px;
	width:430px;
	}

a:link {
	color: navy;
	text-decoration: none;
	}

a:visited {
	color: navy;
	text-decoration: none;
	}

a:hover {
	color: red;
	text-decoration: underline;
	}


On constate au milieu la structure de 3 divs enfant de la structure "main".
Pour effectuer des colones de meme auteurs j'ai pris un astuce que j'ai obtenue par votre site. C'est a dire une texture avec un background-repeat: repeat-y;
Affichage bon sous ie 6, sous ff1.5, sous opera.
Mais pas sous ff1.0.7 et probablement pas sous les ff anterieurs.
Le background ne s'affiche pas sous ses browsers.

Alors mon interrogation est simple. Erreur dans ma structure ou bug de ff ?
Sachant qu'il suffit que je mette un border: 1px pour que soudain la texture s'affiche.
Sujet clos
Aller à