2008-09-08 10 views
2

J'ai un site que j'ai créé très rapidement qui utilise des flottants pour afficher différentes sections de contenu. Le contenu flottant et le contenu qui a une marge supplémentaire apparaissent tous deux bien dans FF/IE, mais sur safari l'un des divs est complètement caché. J'ai essayé de passer à padding et position:relative, mais rien n'a marché pour moi. Si je sors le code pour l'afficher à droite, il réapparaît mais sous le contenu flottant.Flotteurs gâcher dans les navigateurs Safari

La section principale de css qui semble être la cause du problème est:

#settings{ 
    float:left; 
} 

#right_content{ 
    margin-top:20px; 
    margin-left:440px; 
    width:400px; 
} 

Cela me donne le même résultat si je spécifie une taille aux #settings div ou non. Toute idée serait appréciée.

Le site est disponible à: http://frickinsweet.com/tools/Theme.mvc.aspx pour voir le code source.

+0

@thanksd J'ai commencé une [méta discussion sur vos modèles d'édition] (https://meta.stackoverflow.com/questions/314758/is-serial-editing-posts-to-include-syntax-highlighting-helpful). S'il vous plaît joindre à la discussion. – ryanyuyu

Répondre

1

Je crois que l'erreur réside dans la marque que le sélecteur de couleur génère. J'ai sauvé la page et ai enlevé ce code pour le sélecteur de couleur et il rend bien dans IE/FF/SF.

1

Avez-vous essayé de faire flotter le div #right_content vers la droite?

#right_content{ 
    float: right; 
    margin-top: 20px; 
    width: 400px; 
} 
0

Désolé je l'ai dit aussi. J'ai essayé de faire flotter ce contenu correctement et j'ai aussi essayé de le faire flotter à gauche et de positionner la position en pensant que les deux divs commenceraient à gauche: 0 où le réglage de la marge de droite le déplacerait.

Merci

0

quelques choses que vous devez fixer au préalable:

  1. Votre balise <style> est en <body>, quand il appartient à <head>
  2. Vous avez une faute de frappe « realtive » dans l'un de vos styles en ligne:

    <a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;"> 
    

Essayez d'obtenir votre page à validate; Cela devrait faciliter le débogage des problèmes réels.

Questions connexes