CSS - стилизация затрудняет отображение URL в Firefox

Question

В приведенном ниже коде $ row ['site'] - это URL. В Chrome и IE8 он отображается нормально. В Firefox 3.0.11 он отображает все до второй косой черты. Поэтому en.wikipedia.org/wiki/Miami отображается только как en.wikipedia.org/wiki".

.

Я считаю, что это из-за CSS, который я использую, но я не могу понять, как это исправить. Есть идеи?

Заранее спасибо,

John

Вот код:

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

Вот 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;
     }

Answer 1

Это «виновник»:

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

Вы устанавливаете любой элемент с классом .sitename на определенную ширину и скрываете любое переполнение.

В дополнение к этому, это также одна из причин:

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

Не уверен, почему вы хотите ограничить ссылки такой маленькой шириной, но он заставляет текст ссылки обернуться снизу, что затем скрывает «Майами», потому что переполнение скрыто.

Код, который вы вставили за вычетом указанного выше объявления ширины , дает мне то, что вы хотите в Firefox .

Это примечание, но печатать HTML, как вы печатаете, там очень уродливо. Также очень легко забыть закрывать цитаты и делать глупые ошибки только потому, что трудно сказать, где вы находитесь. Рассмотрим синтаксис heredoc :

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

Намного лучше, правда?

Answer 2

чтобы проверить это попробуйте

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

если вы видите полосы прокрутки, попробуйте изменить ширину на число "em"