Beug affichage safari / chrome

Bonjour,

J'ai un cadre qui est décalé complétement à gauche de l'écran, comme si le bloc n'appliquait pas le margin.
sous safari / chrome (firefox, IE 7 & 8 n'ont pas de problème).

Avec ce code quelqu'un peut-il m'éclairer ? Merci

#popular_posts {
background-image:url(../images/popular_posts.png);
}

#popular_posts {
background-position:left top;
background-repeat:no-repeat;
color:#F2F3F3;
float:left;
font-family:georgia,serif;
margin:150px -360px 0;
position:absolute;
}

.container_16 .grid_7 {
width:400px;
}


.grid_7 {

display:inline;
float:left;
margin-left:10px;
margin-right:10px;
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}

<div class="container_16">
<div id="header" class="grid_16">
<img id="titi-logo" alt="titi" src="logo.gif"/>
<a href="/">
</a>
<div class="clear"/>
<div id="popular_posts" class="grid_7">
<ul class="twitter">
<li class="twitter-item">
</li>
<li class="twitter-item">
</li>
<li class="twitter-item">
</li>
</ul>
</div>

Modifié par thibotus01 (16 Oct 2009 - 17:35)

Bonjour,

Rapidement, j'ai repéré 2 choses :
-1- les resets css se mettent au début (et non à la fin) du fichier css : en effet, les propriétés css se chagent au fur et à mesure, pouvant s'écraser les unes des autres (pour faire simple et imagé)
-2- la balise <div> n'est pas une balise autofermante (<div class="clear"/>)

Voilà
David

Pour le div clear, c'est firebug qui me la ressorti comme ca, j'ai copié/collé de firebug... Donc la balise est bien normalement fermée.

et le reset est bien au début, c'est encore firebug qui apparement fait des siennes, il est censé m'afficher l'ordre du css pour tel élément, mais j'ai bien:

@charset "UTF-8";
@import url(css/reset.css);

dans le style.css général qui est appelé en tout premier.
Modifié par thibotus01 (11 Oct 2009 - 18:46)

a supprimer
Modifié par thibotus01 (16 Oct 2009 - 17:36)

J'ai juste jeté un coup d'oeil rapide donc je me plante probablement mais :

#popular_posts { 
background-position:left top; 
background-repeat:no-repeat; 
color:#F2F3F3; 
float:left; 
font-family:georgia,serif; 
margin:150px -360px 0; 
position:absolute; 
} 

Tu spécifie une position absolue. Mais pas correctement, elle n'est pas prise en compte par Safari. Comme il ne sait pas comment l'interpréter, il fait comme si c'était une position relative.

Essaie de spécifier des valeurs genre "top" et "left" et fait bien attention à la hiérarchie des divs pour voir de quel div (avec position: relative) dépend #popular_posts

J'espère que ça t'aidera. Moi je file au boulot

Pourquoi ma position absolue n'est pas sépcifié correctement ? :s

Je viens de voir qu'il y avait un module développement dans safari. En desactivant les valeurs du margin le bloc est déplacé. Je suppose qu'en modifiant ces valeurs je peux placer correctement le bloc, mais il ne le sera plus sous les autres nav.
Modifié par thibotus01 (12 Oct 2009 - 10:25)

Pas d'idée ? :s

thibotus01 a écrit :
Pourquoi ma position absolue n'est pas sépcifié correctement ? :s

Parce que lorsque l'on spécifie une position absolu, il faut lui donner des coordonnées (top ou bottom / left ou right) sinon il se place à top:0 left:0.

Si j'indique une valeur ca fait la modif. sur Firefox & Safari. Donc Safari se règle bien et Firefox se dérègle en gros.. Vice Versa.

J'ai beau chercher, je sèche... La solution un css spécial pour safari / chrome ?