Див не фиксируется в эксплорерах...

shokeri · April 15, 2008

Всем привет Может у кого возникнет свежая идея, дело вот в чем.

Вот страничка (стили и код в одном)... во всех браузерах нормально.. ну а в эсплорерах как обычно... проблема в высоте дива (прибавляет автоматически) и правый див (righcol) поднимает наверх, хотя должен быть на 70 px ниже ...

Вот сам код, если у кого есть вариант, буду благодарна.. . я что=то тут застряла..

<!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" lang="ru">
<head>
 <title> </title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
 <style type="text/css">


html,body{ margin:0; padding:0; background:#fff; background-repeat:repeat-y;font-family:Tahoma,Arial,Verdana,Sans-Serif; color:#000000; font-size:11px;
width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 800)? "1000px" : "100%")}
.logo { position:relative; width:80px; margin: 30px 30px 30px 0px;}
.main_block { width:1000px; position:absolute; left:0; top:0; height: 764px; margin:0; padding:0; }
.content_block { padding:10px; background-color:#F4F4F4;}
.frm_block { margin:0 auto; pwidth:300px;}
.img {display:block;}
.clear_small { clear:both; font-size:1px; height:10px; }
.fr {float:right; }
#leftcol { position: absolute; width: 253px; height:914px; left: 1px; background:url(images/mi.gif);); background-repeat:repeat-y; padding: 5px; top: 0;}
#rightcol { position: relative; margin-left: 280px; background: #fff; padding: 0; height:100%; margin-top:70px;}
H1 { margin: 0; }
div.line { height:1px; background:url(images/line.gif); background-repeat: repeat-x;}
.podlo { margin-left:15px; position:relative;margin-right:15px;valign:middle;margin-top:70px; padding-right:12px;}
.welcom { position:relative; margin-top:44px; width:235px; font-family:tahoma; font-size:14px;}
.exit { position:relative; margin-top:-12px; margin-right:0; font-family:tahoma; font-size:11px; font-weight:bold; width:120px;
float:right; }
a.out { font-family:tahoma; font-size:11px; text-decoration:underline; font-weight:bold; color:#000000;}
.liner { height:1px; background:url(images/line.gif); background-repeat: repeat-x; margin-top:17px; position:relative;}
.liner_1 { height:1px; background:url(images/line.gif); background-repeat: repeat-x; margin-top:10px; position:relative;}
.admcenter { position:relative; margin-top:50px; margin-left:0; margin-right:0;}
.admmenul { position:relative; float:left; width:45%; margin:0;}
.admmenur { position:relative; float:right; width:45%; margin:0;}
.zagolovok { position:relative; font-family:Arial, Helvetica; width:175px; font-size:17px; font-weight:bold; color:#000000; float:left;
margin-left:0; }
.zakrito { position:relative; float:right; font-family:tahoma; font-size:11px; color:#c2c2c0; font-weight:bold; text-decoration:underline;
width:50px; margin-top:3px; }
.zagol {position:relative;margin-top:0;margin-left:0;height:20px;}
.action_form {position:relative; height:40px; font-family:Arial; font-size:11px; margin-top:5px;}
.file { position:relative; float:left; width:42%;}
.ok_file { position:relative; float:right; width:41%; margin-right:20px; margin-top:8px; } 
span.left_menu1 { position:relative; width:180px; height:10px;}
a { font-family:Arial; font-size:11px; text-decoration:underline; color:#ffffff; }
.active { font-family:Arial; font-size:11px; text-decoration:none; color:#feb52e; font-weight:bold;}
.menu_3 { position:relative; height:20px; width:140px; padding-top:7px;} 
.podlo1 {margin-left:15px; position:relative;margin-right:15px;valign:middle;margin-top:70px;}
.knopka_ch { position:relative; width:160px; float:right; margin-right:25px; margin-top:4px; }
.adms { position:relative; margin-left:0; margin-top:0; width:314px;} 
.soh { position:relative; margin-left:2px; margin-top:18px;}
.fr1 { float:right; }
.fl1 { float:left; margin-right:5px;}

 </style>
</head>
<body>
<!--[if IE 6]>
<style type="text/css">

.menu_3 {position:relative; height:10px; width:140px; margin-bottom:17px; padding-top:0;}
.action_form { height 5px; padding-top:0; padding-bottom:10; font-family:Arial; font-size:11px;}
#rightcol { position: relative; margin-left: 280px; background: #fff; padding: 0; height:100%; margin-top:70px;}
.soh { position:relative; margin-left:2px; padding-top:18px; z-index:100;}
.ok_file { position:relative; float:right; width:41%; margin-right:20px; margin-top:8px;} 
</style>
<![endif]-->

<!--[if IE 7 ]>
<style type="text/css">
.menu_3 {position:relative; height:20px; width:140px; margin-top:8px; padding-top:0;}
#action_form { height:40px; padding-top:78px; font-family:Arial; font-size:11px;
.rightcol { position: relative; margin-left: 280px; background: #fff; padding: 0; height:100%; padding-top:70px;}

</style>
<![endif]-->

 <div class="main_block">
 <div id="leftcol">
 <div class="logo" style="margin: 30px 30px 30px 50px;"><img src="images/logo.png" alt="Андерсен?" /></div>
 <div class="podlo1" style=" padding-left:4px; padding-right:6px;">
 <div class="menu_3" > <img src="images/strelka.gif" style="margin-right:8px;" /><a href="#" class="active">ГЛАВНАЯ СТРАНИЦА</a> </div>
 <div class="line"></div>
 <div class="menu_3"><img src="images/strelka.gif" style="margin-right:8px;" /><a href="#">КОНТЕНТ</a> </div>
 <div class="line"></div>
 <div class="menu_3" > <img src="images/strelka.gif" style="margin-right:8px;" /><a href="#">НОВОСТИ</a></div>
 <div class="line"></div>
 <div class="menu_3" > <img src="images/strelka.gif" style="margin-right:8px;" /><a href="#">БАННЕРЫ</a></div>
 <div class="line"></div>
 <div class="menu_3" > <img src="images/strelka.gif" style="margin-right:8px;" /><a href="#">ССЫЛКИ</a> </div>
 </div>
 </div>
 <div id="rightcol">
 <div class-"adms"><img src="images/heaad.gif" /></div>
 <div class="welcom">Добро пожаловать, Тихон Сенович</div> 
 <div class="exit">
 <div align="right"><img src="images/strelka.gif" style="margin-right:8px;"/><a href="#" class="out">выход из системы</a></div>
 </div>
 <div class="liner"></div>
 <div class="admcenter">
 <div class="zagolovok">Добавить заголовок</div>
 <div class="admmenur" style="display:inline">

 <div class="zagol">
 <div class="zagolovok">Добавить заголовок</div>
 <div class="zakrito" style="float:right">закрыть</div>
 </div>
 <div class="liner_1"></div>
 <div class="action_form" style="margin-top:10px;"><form action="handler.php">
 <input type="checkbox" name="option1" value="a1" checked>активен <b style="margin-left:5px;">подсказка</b>

 </form></div>
 <div class="action_form"><form action="handler.php">
 <input type="checkbox" name="option1" value="a1" checked>отображать в меню <b style="margin-left:5px;">подсказка</b>

 </form></div> 
 <div class="action_form"><form action="handler.php">Subdivision_Name (in menu)<sup>*</sup>
<input type="text" maxlength="29" size="24"></form> 
 </div> 
 <div class="action_form"><form action="handler.php">Template ID
<select name="temp"><option value="s1">print_version.html</option><option value="s2" selected >galery.html</option><option value="s3">site_map.html</option><option value="s3">about_andersen.html</option></select></form>
 </div>
 <div class="action_form"><form action="handler.php">EnglishName (mod_rewrite)<sup>*</sup>
<input type="text" maxlength="29" size="24"></form> 
 </div>
 <div class="action_form"><form action="handler.php">external link
<input type="text" maxlength="29" size="24"></form> 
 </div>
 <div class="action_form" >
 <div class="fl1" ><form action="handler.php">Pic (on menu)
<input type="text" maxlength="29" size="24"></form></div><img src="images/chfail.gif" style=" margin-right:30px; margin-top:7px;"> </div>
 <div class="action_form"><form action="handler.php">
 <div class="fl1" align="left">Description (meta)

 <input type="text" maxlength="29" size="24">
 </div>
 </form> 
 </div>
 <div class="action_form"><form action="handler.php">Keywords (meta)
<input type="text" maxlength="29" size="24"></form> 
 </div>
 <div class="soh"><img src="images/save.gif" width="109" height="30" /></div>

 </div>

 </div> 

 </div>

/div>

 </div>

</body>
</html>

shokeri · April 15, 2008

извиняюсь что все в одном коде, просто думаю проще будет видно ошибку... еще и пароль потеряла, пришлось заново регистрироваться )))

shokeri · April 15, 2008

забыла приписать, что автоматически добавляет высоту в дивах menu3 и в active_form

Dimitry Wolotko · April 15, 2008

1 - используйте bb-code.

2 - локализуйте проблему - я такой ахтунг читать не буду.

shokeri · April 15, 2008

да, вижу ступила ) проблема : див rightcol в эсплорере притыкается к верху браузера, хотя должен быть либо margin-top:70px либо padding-top:70px. В остальных браузерах все нормально..

и вторая проблема дивы menu_3 и active_form увеличиваются по высоте, по 10 px где то... я щас скриншоты сделаю, так нагляднее )))

shokeri · April 15, 2008

http://laracat.narod.ru/ie.jpg эксплорер

а вот пример сафари - тут все ок http://laracat.narod.ru/safari.jpg

shokeri · April 15, 2008

что то народ тупит, что бы просмотреть файлы просто 2 раза нажать на адрес, тогда откроется после какого-то сбоя....

user · April 15, 2008

У вас какой IE?

shokeri · April 15, 2008

по работе стоит 5,5, 6 и 7... в седьмом все нормально в дивах с меню, но шапка (на картинке где администратор сайта, все равно уходит наверх... в шестом же..... скриншот выше

shokeri · April 15, 2008

по работе стоит 5,5, 6 и 7... в седьмом все нормально в дивах с меню, но шапка (на картинке где администратор сайта, все равно уходит наверх... в шестом же..... скриншот выше

shokeri · April 15, 2008

по работе стоит 5,5, 6 и 7... в седьмом все нормально в дивах с меню, но шапка (на картинке где администратор сайта, все равно уходит наверх... в шестом же..... скриншот выше

shokeri · April 15, 2008

Дмитрий, спасибо что отредактировали... а то правда неудобно

user · April 15, 2008

Тогда зачем вот это.

<!--[if IE 6]>
<style type="text/css">

.menu_3 {position:relative; height:10px; width:140px; margin-bottom:17px; padding-top:0;}
.action_form { height 5px; padding-top:0; padding-bottom:10; font-family:Arial; font-size:11px;}
#rightcol { position: relative; margin-left: 280px; background: #fff; padding: 0; height:100%; margin-top:70px;}
.soh { position:relative; margin-left:2px; padding-top:18px; z-index:100;}
.ok_file { position:relative; float:right; width:41%; margin-right:20px; margin-top:8px;} 
</style>
<![endif]-->

<!--[if IE 7 ]>
<style type="text/css">
.menu_3 {position:relative; height:20px; width:140px; margin-top:8px; padding-top:0;}
#action_form { height:40px; padding-top:78px; font-family:Arial; font-size:11px;
.rightcol { position: relative; margin-left: 280px; background: #fff; padding: 0; height:100%; padding-top:70px;}

</style>
<![endif]-->

shokeri · April 15, 2008

потому что без этих кодов в эксплоэре все летит

user · April 15, 2008

И вот еще.

shokeri · April 15, 2008

это уже исправила )))) ляп называется ))))) в

user · April 15, 2008

потому что без этих кодов в эксплоэре все летит

Тогда почему action_form и rightcol в одном случае указаны,как класс,а в другом id.

shokeri · April 15, 2008

честно говоря не подумала....щас попробовала поменять на класс все- вообще все пропало кроме форм... естественно есть какая-то тонкость.... щас попробую еще поколдовать... был бы толк

shokeri · April 15, 2008

нет, все летит если что то менять, причем уже летит и в лисе, и в сафари и в опере....

shokeri · April 15, 2008

все, устранила косяк с айдишками, классами, (спасибо что отметил) но проблему изначальную это не решило

user · April 15, 2008

честно говоря не подумала....щас попробовала поменять на класс все- вообще все пропало кроме форм... естественно есть какая-то тонкость.... щас попробую еще поколдовать... был бы толк

Зачем все,rightcol и leftcol должны быть id.

shokeri · April 15, 2008

так, проблему с верхушкой я устранила ))))) осталась проблема с разницей в высоте дива.... если у кого есть вариант, подскажите, пожалуйста

shokeri · April 15, 2008

да, я поменяла )))) просто потом пришлось значения поменять и все встало на свои места... осталась проблема с разницей в меню... ( на картинке показано)

~Kitty~ · April 15, 2008

Что-то у меня такое чувство, что IE понимает высоту дива, как высота+отступ.. У меня такое бывало. Знаю, что скорее всего, это неправильно, но обходила это, указывая отдельное значение для IE.

ZoNT · April 15, 2008

в ЕИ в высоту включаются пэддинги, а в остальных браузерах - нет.

shokeri · April 15, 2008

?? обнуляла пединги для 6-го... не помогло, поэтому и прошу помочь

Sign In

Див не фиксируется в эксплорерах...

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information