2010-01-04 5 views
2

Im сходит с ума, пытаясь понять, почему ссылка на титул (слева) и другие ссылки в навигационной панели (справа) не совпадают с высотой.Ошибка сброса CSS в H1?

Разница тонкая в Safari, но больше в IE6.

Я пропустил что-то в css сброс H1?

SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png

IE6
alt text http://img64.imageshack.us/img64/870/ie6.png

HTML-

<div id="navbar"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="left"> 
      <h1><a href="http://ide.as">title</a></h1> 

     </td> 
     <td align="right"> 
      <a href="about.html" class="color1">about</a> 
      <a href="faq.html" class="color2">answers</a> 
      <a href="contact.html" class="color3">contact</a> 
      <input type="text" name="search" value="" id="searchbox">&nbsp;<a class="color4" href="sss">search</a> 
     </td> 
    </tr> 
    </table> 
    </div> 

и CSS

#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;} 

h1 была сброшена

h1 {margin:0;padding:0;} 
h1 {font-size:100%;font-weight:normal;} 

ответ

2

Я думаю, это связано с тем, что ввод текста в ячейку правой таблицы приводит к тому, что ячейка таблицы «растягивается» немного выше, чем левая ячейка таблицы (и она будет немного отличаться в разных браузерах в зависимости от того, насколько они рисуют текст поле ввода) и, таким образом, немного отбросить выравнивание. Попробуйте выровнять по вертикали: снизу; на левой ячейке таблицы.

+0

Это решило проблему, спасибо большое Jen ! – Victor

3
h1 a { padding: 3px 5px; vertical-align: middle;} 

задает стиль для ссылки внутри h1, а не сам h1.

h1 {margin:0;padding:0;} 
h1 {font-size:100%;font-weight:normal;} 

устанавливает стиль для h1. Таким образом, стили для ссылки все еще стоят, они не были перезаписаны.

+0

Но тогда родительский h1 не должен влиять на ссылку внутри, поэтому '#navbar a' (то есть серые ссылки справа) должен быть таким же, как' h1 a' (т.е. белый заголовок). Или я чего-то не хватает? – Victor

1
+0

, но вот почему сброс css существует или нет? Мне было интересно, почему два элемента с одинаковым стилем показаны по-разному на одной странице. – Victor

0

Во-первых, если это происходит в кросс-браузере, используйте Firebug в Firefox, чтобы сообщить вам, откуда берутся правила стиля элемента.

Во-вторых, я проверил бы высоту линии на <a> и <h1>, а также поля на <a>.

+0

Thannks. Не удалось выполнить «h1, a {line-height: 100%;}» и «a {margin: 0;}» (Safari был таким же, IE6 был хуже) – Victor

Смежные вопросы