[CSS] Mac : Problèmes divers - PART II : IE Mac et les marges

Marsh Posté le 28-05-2004 à 12:03:42

[EDIT] : problème résolu, le problème suivant est un peu plus bas.

bonjour à tous

j'ai un petit code css assez simple (certes noyé dans un code moins simple), qui ne marche pas sous IE Mac uniquement. C'est un simple affichage d'image, et ça n'affiche pas l'image.
Ca me perturbe grandement, parce que c'est le seul navigateur qui ne marche pas (testé avec IE PC, Firefox / Mozilla, Safari, Camino, Konqueror). Voici le CSS incriminé :

Code :

body {
padding: 0;
margin: 0;
background-image: url('images/image-fond.jpg');
background-position: top left;
background-repeat: no-repeat;
}

Voilà, je viens de tester cette version (y'avait d'autres trucs autour juste avant), et ça ne marche vraiment pas.

Alors si quelqu'un pouvait m'aider, je lui en serais grandement reconnaissant, parce que là, je suis perdu.

Merci à tous !

Message édité par cosmoschtroumpf le 28-05-2004 à 12:50:29

Reply

Marsh Posté le 28-05-2004 à 12:03:42

Reply

Marsh Posté le 28-05-2004 à 12:20:23

background-image: url('images/image-fond.jpg');

> enlève les apostrophes

Reply

Marsh Posté le 28-05-2004 à 12:47:57

Damned, il me semblait pourtant que j'avais toujours vu les url() avec des guillemets ou apostrophes.

Merci grandement !

Ok, maintenant, PART II : le retour des marges.

J'ai un menu en liste, comme suit :

Code :

<ul id="menu">
<li><a href="">Element 1</a></li>
<li>
<ul id="ssmenu">
<li><a href="">Element 2</a></li>
</ul>
</li>
</ul>

Bien sûr le menu est plus grand que ça, mais c'est dans l'idée.

Et là, le CSS (j'ai viré les infos comme les couleurs ou la taille du texte) :

Code :

/* ***** MENU ***** */
#menu {
position: absolute;
top: 115px;
left: 5px;
padding: 0;
}
#menu li {
list-style-type: none;
margin: 2px;
}
#menu a {
display: block;
border: #55481c solid 1px;
border-left: 5px solid #55481c;
border-right: 5px solid #55481c;
text-align: center;
padding: 2px 0 2px 0;
width: 150px;
}
/* ***** SOUS-MENU ***** */
#ssmenu {
border: #000 1px solid;
padding: 0;
border: 0;
}
#ssmenu li {
list-style-type: none;
padding: 1px;
margin: 1px;
}
#ssmenu a {
border: 1px solid #000;
width: 150px;
padding: 1px;
padding-left: 5px;
}

Voilà, c'est un peu brutal, mais bon.

Donc sous Gecko et KHTML, aucun problème :

Mais sous IE Mac (eh oui encore), plus dur :

Parce que non seulement le sous-menu est décalé et mord sur le texte, mais en plus le menu aussi est décalé (ce qui est cependant moins grave).

Comment arranger ça ?
à noter que je n'ai pas testé sous IE Win, n'ayant pas de PC sous la main ici, alors si ça marche pas sous IE Win, et que vous me le dites, je vous en serais très reconnaissant

[EDIT] : Confirmant mon titre (aisément acquis) de boulet, je viens de tester avec #ssmenu ul {margin:0;}, et miracle, ca enlève le décalage du sous-menu. Cependant, le menu en global reste décalé. Même si je ne suis pas partisan du "la même chose au pixel près partout", lorsque l'on est en résolution plus petite, le menu mord encore sur le texte, ce qui n'arrive pas sous Gecko (ou alors dans des vraiment petites résolutions). Même si ce n'est pas le problème le plus grave que j'aie jamais eu, ça reste un problème.

Merci !