Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

compatibilit? navigateur avec style CSS

1 réponse
Avatar
koss70
Bonjour,

Je travaille avec dreamweaver.
J'ai besoin d'aide.....
Je viens d'ins?rer dans? mon header les codes CSS d'un menu mais je souhaite
savoir comment faire pour le rendre compatible avec safari, mozilla, internet
explorer, opera, netscape.... ( car j'ai quelques probl?mes ? l'affichage, type
apparition sous menu ? l'ouverture de la fen?^tre, ....)
Voici le code dans mon header:

<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:1;
font-family: verdana, arial, sans-serif;
font-size: 80%;
color: white;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
???position: absolute;
???top: 1em;
???left: 1em;
???width: 10em;
???visibility: visible;
???z-index: 1;
}

#menu dt {
cursor: pointer;
background: #DBAB05;
height:20px;
width: 12em;
line-height: 20px;
margin: 2px 0;
border: 1px solid white;
text-align: left;
}

#menu dd {
???position: absolute;
???z-index: 100;
???left: 8em;
???margin-top: -1.4em;
???width: 11em;
???background: #fcfcfc;
???border: 1px solid #A17D06;
???visibility: visible;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu dt a {
color: #ffffff;
text-decoration: none;
display: block;
}
#menu li a {
color: #000;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
a:link {
???color: fcfcfc;
???text-decoration: none;
}
a:visited {
???text-decoration: none;
???color: fcfcfc;
}
a:hover {
???text-decoration: none;
}
a:active {
???text-decoration: none;
}

-->
</style>

et dans le body:

<dl id="menu">
??????<dt onmouseover="javascript:montre('smenu1');"><a
href="#">Accueil</a></dt>
???<dd id="smenu1" onmouseover="javascript:montre('smenu1');"
onmouseout="javascript:montre();">
????????????<ul>
???????????????<li><a href="#">Savanna Tours & Safaris</a></li>
????????????</ul>
???</dd>???
?????????
??????<dt onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">Afrique Australe</dt>
?????????<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
????????????<ul>
???????????????<li><a href="#">Afrique du Sud</a></li>
???????????????<li><a href="#">Botswana</a></li>
???????????????<li><a href="#">Namibie</a></li>
???????????????<li><a href="#">Zimbabwe</a></li>
????????????</ul>
?????????</dd>???

??????<dt onmouseover="javascript:montre('smenu3');"
onmouseout="javascript:montre();">Afrique Centrale</dt>
?????????<dd id="smenu3" onmouseover="javascript:montre('smenu3');"
onmouseout="javascript:montre();">
????????????<ul>
???????????????<li><a href="#">Gabon</a></li>
???????????????<li><a href="#">Kenya</a></li>
? ? ? ????????????<li><a href="#">Tanzanie</a></li>
????????????</ul>
?????????</dd>

??????<dt onmouseover="javascript:montre('smenu4');"
onmouseout="javascript:montre();">Afrique de l'Ouest</dt>
?????????<dd id="smenu4" onmouseover="javascript:montre('smenu4');"
onmouseout="javascript:montre();">
????????????<ul>
???????????????<li><a href="#">B?nin</a></li>
???????????????<li><a href="#">Burkina Faso</a></li>
???????????????<li><a href="#">C?te d'Ivoire</a></li>
???????????????<li><a href="#">Guin?e</a></li>
???????????????<li><a href="#">Mali</a></li>
???????????????<li><a href="#">Mauritanie</a></li>
???????????????<li><a href="#">Niger</a></li>
???????????????<li><a href="#">S?n?gal</a></li>
????????????</ul>
?????????</dd>
</dl>
</div>

Quelq'un peut me donner un coup de pouce????? Je d?bute donc....
D'avance merci!

Web greetings,

Koss70

1 réponse

Avatar
Seb_MX
Salut


Ben c'est pas possible, tu sais juste diff?rencier les navigateurs bas?s sur
IE et ceux bas?s sur un Gecko (Firefox, Netscape), ? l'aide la l'attribut
!important.

Exemple :

padding-top: 10px !important ;
padding-top: 15px ;

Comme IE ne prend pas en compte le !important, il va afficher un padding-top
de 15 pixels, tandis que les autres navigateurs vont afficher un padding-top de
10 pixels

Mais tu peux fair un script PHP qui d?tecte le nevigateur, et si le navigateur
est par exemple IE, il affiche une feuille CSS faite sp?cialement pour IE. De
m?me pour les autres navigateurs.