Проблема с выравниванием Div в FireFox и Google Chrome

Question

Я использую Div на своем веб-сайте для отображения некоторых ссылок. Он отлично работает в IE, но когда я расширяю это div в Firefox и Google Chrome, это становится странным.

Может кто-нибудь помочь мне разобраться. Я гуглил его, но я не нашел хороших решений.

<td vAlign="top" align="center"><font>-</font></td>
<td align="left"  >
 <div align="left"  style="margin:0 auto; padding:0; display:block;clear:both; position:relative;">
  <A class="inkblue" href="javascript:expand(4);">Faculty &amp; Staff</A
 </div>
</td>
<td></td>
</tr>
<tr id="e4" style="DISPLAY: none">
<td></td>

Это код для этого раздела. Пожалуйста, дайте мне знать, если что-то требуется.

Это ссылка на сайт . откройте его в Firefox или Chrome и нажмите на ссылку "Преподаватели и сотрудники" в разделе "Кампусы".

Answer 1

Есть один пустой <td></td>, удалите его и передайте colspan="2" следующему td элементу

Answer 2

Я просмотрел ваш сайт:

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

<link rel="stylesheet" type="text/css" href="css/nuonline.css">

Чтобы преодолеть вашу проблему:

В настоящее время при нажатии « Faculty , Events & Campus » вы выполняете style="display:inline". Вместо этого вы можете удалить сам атрибут style.

Пример:

При нажатии: Удалить атрибут стиля style="display:none" для id = "e4" или id = "e5" или id = "e7 "

Для сброса (при следующем нажатии): Добавить атрибут стиля как style="display:none" для id = "e4" или id = "e5" или id = "e7"