Problème design sous Firefox



  • Voilà, je suis en train de créer un nouveau site et j'ai un problème avec le design sous Firefox.

    Comme des images valent mieux qu'un long discours :

    La 1ère images est sous IE7 (je souhaite mon menu ainsi), et la 2ème est sous Firefox.

    Voici les codes en question (HTML puis CSS) :

    <div id="menu">
    	<div class="menu_lien">
    		<p>
    				<img src="../images/haut_menu.gif"><br />
    				<a href="accueil.php">Navigation 1</a><br />
    				<a href="accueil.php">Navigation 2</a><br />
    				<a href="accueil.php">Navigation 3</a><br />
    				<a href="accueil.php">Navigation 4</a><br />
    				<a href="accueil.php">Navigation 5</a><br />
    				<img src="../images/bas_menu.gif"><br />
    		</p>
    	</div>
    	<div class="menu_lien">
    		<p>
    				<img src="../images/haut_menu.gif"><br />
    				<a href="accueil.php">Navigation 1</a><br />
    				<a href="accueil.php">Navigation 2</a><br />
    				<a href="accueil.php">Navigation 3</a><br />
    				<a href="accueil.php">Navigation 4</a><br />
    				<a href="accueil.php">Navigation 5</a><br />
    				<img src="../images/bas_menu.gif"><br />
    		</p>
    	</div>
    </div>
    
    

    #menu
    {
    float:left;
    width:180px;
    margin-bottom:10px;
    }

    .menu_lien
    {
    float:left;
    width:160px;
    text-align:center;
    font-size:12px;
    margin-bottom:10px;
    background-image: url("../images/fond_menu.gif");
    }

    .menu_lien a
    {
    color:#ffffff;
    text-decoration:none;
    }

    .menu_lien a:hover
    {
    font-weight:bold;
    color:#ffffff;
    }

    .menu_lien a:visited
    {
    color:#ffffff;
    text-decoration:none;
    }



  • A première vue, je dirais que ça vient de la propriété margin-bottom.
    Est-ce que tu as une url où on peut tester?





  • M'énerve, moi, l'html pur et dur. :p
    Voilà un code qu j'avais trouvé il y a un certain temps. Il est full css, et permet d'afficher des boîtes à bords arrondis. Le code css est plus lourd, mais perso pour ce que ça fait, je trouve que ça vaut le coup (surtout que l'html du hack est aussi court que le tiens).
    Pour modifier la largeur de la boîte: modifier l'attribut "width" de ".raised".
    Pour modifier la couleur de fond, remplacer tous les "#00009D" par la couleur que tu veux.
    Pour modifier tous ce qui concerne le texte, place les propriétés dans ".raised .boxcontent"

    <style type="text/css">
    .raised {
    	width: 160px;
    	background:transparent; 
    }
    .raised h1, .raised p {
    	margin:0 10px;
    }
    .raised h1 {
    	font-size:2em; 
    	color:#fff;
    }
    .raised p {
    	padding-bottom:0.5em;
    }
    .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {
    	display:block; 
    	overflow:hidden;
    	font-size:1px;
    }
    .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {
    	height:1px;
    }
    .raised .b2 {
    	background:#00009D; 
    	border-left:1px solid #fff; 
    	border-right:1px solid #eee;
    }
    .raised .b3 {
    	background:#00009D; 
    	border-left:1px solid #fff; 
    	border-right:1px solid #ddd;
    }
    .raised .b4 {
    	background:#00009D; 
    	border-left:1px solid #fff; 
    	border-right:1px solid #aaa;
    }
    .raised .b4b {
    	background:#00009D; 
    	border-left:1px solid #eee; 
    	border-right:1px solid #999;
    }
    .raised .b3b {
    	background:#00009D; 
    	border-left:1px solid #ddd; 
    	border-right:1px solid #999;
    }
    .raised .b2b {
    	background:#00009D; 
    	border-left:1px solid #aaa; 
    	border-right:1px solid #999;
    }
    .raised .b1 {
    	margin:0 5px; 
    	background:#fff;
    }
    .raised .b2, .raised .b2b {
    	margin:0 3px; 
    	border-width:0 2px;
    }
    .raised .b3, .raised .b3b {
    	margin:0 2px;
    }
    .raised .b4, .raised .b4b {
    	height:2px; margin:0 1px;
    }
    .raised .b1b {
    	margin:0 5px; background:#999;
    }
    .raised .boxcontent {
    	display:block;
    	color: #FFFFFF;
    	text-align: center;
    	background:#00009D; 
    	border-left:1px solid #fff; 
    	border-right:1px solid #999;
    }
    </style>
    <div class="raised">
    	<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    	<div class="boxcontent">
    		test
    	</div>
    	<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
    </div>
    


  • Ok merci. Maintenant que sa marche juste comme ça, je vais essayer de remettre les propriété pour les liens (couleur, hover, visited, etc… ; mais sa je devrais y arriver :D ).


Se connecter pour répondre
 

Il semble que votre connexion ait été perdue, veuillez patienter pendant que nous vous re-connectons.