CSS et IE7

[Membre supprimé 2]

Bonjour à tous,

Je viens de passer quelques heures a tenter de résoudre ce problème en vain.
Comme d'habitude, aucun souci sous Safari ou Firefox, mais un gros décalage sous IE7.
Tout est intégré sur cette page.
Pour ceux qui ont la gentillesse de m'aider mais qui ne dispose pas d'IE7, on peut prévisualiser le
bug très rapidement sur Net Renderer. D'avance un grand merci.

 

[fredmac75]

Salut

Net renderer me fait un zoli Internal Error...

Pas pratique pour le coup de main

 

[DarkPeDrO]

Hello,

En fait, je ne comprends pas trop ton problème. Le truc Dropbox, c'est le site qui pose problème? Car moi, sous Firefox (la dernière version), il m'affiche une belle page quasi-vierge.

 

[Membre supprimé 2]

Salut
Net renderer me fait un zoli Internal Error...
Pas pratique pour le coup de main

Bonjour Fred
Désolé il faut rajouter le index.html à la fin de l'url.
Adresse a coller dans Net Renderer: http://www.fabien-egot.com/dropbox/IE7/index.html

DarkPedro: j'utilise FF 3.0.1 et le script apparait bien

 

[tweek]

Je suis sous IE6 la, tu parles de la boite aux bords arrondis avec le texte dedans?

Si oui, je vois le texte pas centre et la boite plus grosse sous IE6. Firefox PC marche bien.

(le bord droit est coupe par contre)


Un probleme de margin.

 

[Membre supprimé 2]

Un grand merci à tous, en particulier à FredMac qui a eu la gentillesse de me dépanner en live.
Je vous joins le code au cas ou vous souhaiteriez mettre en place un scrolling vertical dans une boite arrondie.

XHTML

<div id="billboard">
<div id="ticker"><p><a href="#" id="ticker-headline">Fresh News</a></p> </div>
<div id="scroller">
<script type="text/javascript" src="http://www.equant.org/js/scroller.packed.js"></script>
<div id="scroller-v" style="height: 28px; width: 500px;">
<div>texte 1</div>
<div>texte 2</div>
<div>texte 3</div>
<script type="text/javascript">addLoadEvent(function() { divScroller("scroller-v", "v", 20, 2000); });</script>
</div>
</div>
</div>

CSS

#billboard {background: #f6f6f6 url("http://www.equant.org/images/ticker.gif") no-repeat top left; height:37px;}
#billboard,  #ticker {overflow:hidden; position:relative; width: 750px; margin-right: auto; margin-left: auto; clear: both;}
#ticker {width: 170px; float:right;}
#ticker p {width: 100%; padding-top: 9px; padding-bottom: 0.2em; float: left; margin:0;}
#ticker a#ticker-headline {width: 12.5em; margin-left: 1em; color: #565656; text-decoration: none; font-weight: bold; text-align: center; border-left: 1px solid #808080; float: right;}
#scroller {width: 530px; position:relative; height: 28px; line-height: 28px; overflow:hidden; margin:0; padding:6px 0 0 9px; float:left;}
div#scroller-v a:hover {color: #000000; text-decoration: none;}

Vous êtes libres d'utiliser code et graphisme, qui est d'ailleurs largement inspiré de la frontpage d'Apple (Hot headlines News). Cependant, merci d'héberger script et image sur votre serveur.

 

[fredmac75]

Si je peux me permettre :

#billboard {background: #f6f6f6 url("http://www.equant.org/images/ticker.gif") no-repeat top left; height:37px;}
#billboard,  [COLOR="Red"][S]#ticker[/S][/COLOR] {overflow:hidden; position:relative; width: 750px; margin-right: auto; margin-left: auto; clear: both;}
[COLOR="Red"][S]#ticker {width: 170px; float:right;}[/S][/COLOR]
#ticker [COLOR="Red"][S]p[/S][/COLOR] { [COLOR="Lime"]overflow:hidden; position:relative;[/COLOR] width: 170px[COLOR="Red"][S]100%[/S][/COLOR]; padding-top: 9px; padding-bottom: 0.2em; float: left; margin:0;}
#ticker a#ticker-headline {width: 12.5em; margin-left: 1em; color: #565656; text-decoration: none; font-weight: bold; text-align: center; border-left: 1px solid #808080; float: right;}
#scroller {width: 530px; position:relative; height: 28px; line-height: 28px; overflow:hidden; margin:0; padding:6px 0 0 9px; float:left;}
[COLOR="Lime"]#scroller-v {height: 28px; width: 500px;}[/COLOR]
div#scroller-v a:hover {color: #000000; text-decoration: none;}

<div id="billboard">
[COLOR="Red"][S]<div  id="ticker">[/S][/COLOR]<p id="ticker"><a href="#" id="ticker-headline" [COLOR="Lime"]title="Fresh news"[/COLOR]>Fresh News</a></p> [COLOR="red"][S]</div>[/S][/COLOR]
<div id="scroller">
<script type="text/javascript" src="http://www.equant.org/js/scroller.packed.js"></script>
<div id="scroller-v">
[COLOR="Red"][S]<div>texte 1</div>
<div>texte 2</div>
<div>texte 3</div>[/S][/COLOR]
[COLOR="Lime"]<ul>
[INDENT]<li>texte 1</li>
<li>texte 2</li>
<li>texte 3</li>
[/INDENT]
</ul>[/COLOR]
<script type="text/javascript">addLoadEvent(function() { divScroller("scroller-v", "v", 20, 2000); });</script>
</div>
</div>
</div>

Si on va jusqu'au bout de la démarche tu devrais même supprimer une balise div qui ne sert à rien ...

CODE COMPACTE = CODE FACILE A DEBUGER