2009-06-29 5 views
0

Dans le code ci-dessous, $ row ['site'] est une URL. Dans Chrome et IE8, il s'affiche très bien. Dans Firefox 3.0.11, il affiche uniquement tout jusqu'à la deuxième barre oblique. Donc "en.wikipedia.org/wiki/Miami" est seulement affiché comme "en.wikipedia.org/wiki". Je crois que c'est à cause du CSS que j'utilise, mais je n'arrive pas à comprendre comment le réparer. Des idées?CSS - Le style semble gêner l'affichage de l'URL dans Firefox

Merci à l'avance,

John

Voici le code:

print "<table class=\"navbar\">\n"; 
print "<tr>"; 
print "<td class='sitename'>".'<a href="http://'.$row['site'].'" class="links2">'.$row['site'].'</a>'."</td>"; 

Voici le CSS:

table.navbar { 
     margin-left:44px; 
    margin-top:0px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif ; 
    font-weight: normal; 
    font-size: 12px; 
    color: #000000; 
    width: 700px; 
    background-color: #A7E6FE; 
    border: 1px #FFFFFF; 
    border-collapse: collapse; 
    border-spacing: 4px; 
    padding: 4px; 
    text-decoration: none;  
} 

table.navbar td { 
    border: 2px solid #fff; 
    text-align: left; 
    height: 16px; 
} 

table.navbar td a{ 
    padding: 3px; 
    display: block; 
} 

.sitename { width: 535px; 
      overflow:hidden; 
} 

a.links2:link { 
    color: #000000; 
    text-decoration: none; 
    text-align:left; 
    margin-top:6px; 
    margin-bottom:2px; 
    margin-left:2px; 
    padding:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    width: 10px; 
    height: 12px; 
    vertical-align:middle; 
    } 
+0

Cette information aurait aidé ceux qui ont essayé de vous aider la première fois: http://stackoverflow.com/questions/1060202/php-url-displays-fine-in-chrome-and-ie8 – random

Répondre

1

Ceci est le « coupable »:

.sitename { 
    width: 535px; 
    overflow:hidden; 
} 

Vous définissez un élément avec une classe de .sitename d'avoir un spécifique largeur et cacher tout débordement.

En plus de cela, cela fait aussi partie de la raison:

a.links2:link { 
    ... 
    width: 10px; 
    ... 
} 

Je ne sais pas pourquoi vous voulez limiter des liens vers une telle petite largeur, mais il force le texte du lien pour envelopper sous qui cache alors "Miami" parce que le débordement est caché.

Le code que vous avez collé moins la déclaration de largeur ci-dessus gives me what you want on Firefox.

Ceci est une note secondaire, mais l'impression HTML comme vous imprimez là est vraiment moche. Il est aussi terriblement facile d'oublier de fermer des citations et de commettre des erreurs idiotes simplement parce qu'il est difficile de dire où vous êtes. Envisager heredoc syntax:

print <<<EOT 
<table class="navbar"> 
    <tr> 
    <td class='sitename'> 
     <a href="http://{$row['site']}" class="links2">{$row['site']}</a> 
    </td> 
EOT; 

Beaucoup mieux, non?

+0

La chose est , Je veux seulement que l'URL affiche ses premiers 535 pixels. Après cela, je veux qu'il soit caché –

+0

voir mon édition, en changeant la largeur de 10px devrait le réparer. –

+0

J'ai enlevé la largeur de 10px de links2, et ça a paru génial jusqu'à ce que j'essaie quelque chose de plus que 535 pixels, et toute la colonne a fini par être plus longue que 535, changeant ainsi ma conception de table. J'ai donc essayé d'utiliser la largeur: 535px; sur links2, et il a l'air bien et affiche l'URL complète dans Firefox. Donc c'est maintenant acceptable. Cependant, cela a changé une chose: maintenant toute la cellule du tableau est un lien hypertexte, et je préférerais que seule l'URL soit un lien hypertexte. Une idée de comment je pourrais faire ça? Merci. –

0

pour tester cet essai

.sitename { width: 535px; 
      overflow:visible; 
} 

si vous voyez des barres de défilement essayez de modifier la largeur d'un « em » nombre basé

Questions connexes