Помогите с позиционированием

Юрий · February 21, 2008

Сделал в?рстку, в IE работает, в FF нет Намудрил с позиционированием. В FF при наведении на кнопочки ничего не происходит (я имею в виду, что ссылки перекраваюся слоем и на них нельзя нажать), т.е. кнопки под слоем. Можно их "поднять"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>

 <style type="text/css">

 body {
 padding: 0;
 margin: 0;
 }

 #menu img {
 margin: 0;
 padding: 0;
 border: 0;
 }

 #menu {
 padding: 1px 0 0 0;
 position: relative;
 }

 #menu #img_space {
 margin-right: 2px;
 }


 #but {
 float: right;
 padding: 0 20px 0 0;
 }

 #level3 {
 width: 100%;
 position: absolute;
 }

 #navigator {
 margin: 0 268px 0 20px;
 background: #D3D2D2 url('../images/left_corner.gif') no-repeat bottom left;
 }

 #nav_2 {
 background: url('../images/right_corner.gif') no-repeat bottom right;
 }

 #nav_underline {
 border-bottom: 5px solid #E2E2E2;
 margin: 0 5px 0 5px;
 height: 24px;
 }

 #navi_tit {
 font: 900 11px Tahoma;
 margin-right: 5px;
 }

 #navi_style {
 font: 100 11px Tahoma;
 margin: 0;
 padding: 6px 0 0 0;
 }

 #level3 { z-index: 1; }
 #but { z-index: 2; }
 </style>

</head>

<body>

 <div id="menu">
 <div id="level3">
 <div id="navigator">
 <div id="nav_2">
 <div id="nav_underline">
 <p id="navi_style"><span id="navi_tit">Навигатор:</span>
 index - о компании</p>
 </div>
 </div>
 </div>
 </div>

 <div id="but">
 <a href=""><img id="img_space" src="../images/add.gif" /></a><a href=""><img src="../images/root.gif" /></a>
 </div>
 </div>

</body>

</html>

klierik · February 21, 2008

у меня что в ИЕ7 что в ФФ2 одинаково

+ кнопок не вижу. ссылок тоже.

Юрий · February 21, 2008

у меня что в ИЕ7 что в ФФ2 одинаково
+ кнопок не вижу. ссылок тоже.

А почему не работает свойство z-index?

Юрий · February 21, 2008

Я поменял местами слои вот так:

<div id="menu">
 <div id="level3">

 <div id="but">
 <a href="">ссылка 1</a><a href=""><img src="../images/root.gif" /></a>
 </div>

 <div id="navigator">
 <div id="nav_2">
 <div id="nav_underline">
 <p id="navi_style"><span id="navi_tit">Навигатор:</span>
 index - о компании</p>
 </div>
 </div>
 </div>
 </div>
 </div>

В FF отлично но в IE 6 есть один глюк.

klierik · February 21, 2008

какой?

Юрий · February 21, 2008

какой?

Его легко устранить немного увеличив длину фонового рисунка (скругл?нный правый уголок). Как будто у IE и FF разная величина пикселя

#nav_underline {
 border-bottom: 5px solid #E2E2E2;
 margin: 0 5px 0 5px;
 height: 24px;
 }

margin: 0 5px 0 5px; В IE появляется промежуток как-будто задано не 5 а 8px. Замечаю уже несколько раз, так и не понял почему это происходит

klierik · February 21, 2008

для этих элементов пишите font-size:0;

Sign In

Помогите с позиционированием

Question

Юрий

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Юрий

Link to comment

Share on other sites

Юрий

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Юрий

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Обсуждения

Forums

Important Information