bmv
-
Posts
2 -
Joined
-
Last visited
bmv's Achievements
Explorer (1/14)
0
Reputation
-
http://www.yarta.com/, нажмите на Австрию. ИЕ не хочет позиционировать вызываемый блок по высоте. Берет вместо высоты сайта высоту экрана и позиционирует блок относительно первого экрана, когда пользуешься прокруткой блок остается висеть вверху. А вот в ФФ делает все правильно. Помогите забороть ослика. Чтобы вам не рыться в коде: HTML: <a href="#?w=500" rel="popup1" class="poplight"><img src="images/photos/01-austria.png" alt="Герб Австрии"> <span>Австрия</span></a> JS: <script> $(document).ready(function(){ //When you click on a link with class of poplight and the href starts with a # $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size //Pull Query & Variables from href URL var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value //Fade in the Popup and add close button $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/images/close.png" class="btn_close" title="Закрыть окно" alt="Закрыть окно" /></a>'); //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Fade in Background $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. $('#fade').css({'filter' : 'alpha(opacity=50)'}).fadeIn(); //Fade in the fade layer return false; }); //Close Popups and Fade Layer $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); }); //fade them both out return false; }); }); </script> CSS: /* Popup window */ #fade { display: none; background: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .50; z-index: 9999; } .popup_block{ display: none; float: left; font-size: 12px; font-weight: bold; position: fixed; top: 50%; left: 50%; z-index: 99999; height: 125px; color: #FFF; border: 1px solid #FFF; } .popup_block p { font-size: 12px; } img.btn_close { float: right; margin: -1px -1px 0 0; } .zagolovok_popup { height:20px; background: #94be4a; border-bottom: 1px solid #FFF; padding: 5px 0 0 10px; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; }
-
Проблема в том что в ИЕ6 если жестко не пропишешь высоту блока в px то вложенный слой "height: 100%" тянуться не хочет. А в FF, Opere, Safari (в других не смотрел) все ок. Я делаю рамку для дивного блока, следующим образом: (страничку можно посмотреть по адресу: http://www.sevstar.net/downloads/project/music.sevstar.net/) <!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"> <head> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-language" content="ru" /> <meta name="robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style> .section { position: relative; background: url(_/bg-section.jpg) bottom repeat-x white; } .header-text { margin: 15px; } .corner1 { position: absolute; top: 0px; right: 0px; width: 4px; height: 4px; z-index: 8; background: url(_/corner-1.png) no-repeat; } .corner2 { position: absolute; bottom: 0px; right: 0px; width: 4px; height: 4px; z-index: 7; background: url(_/corner-2.png) no-repeat bottom; } .corner3 { position: absolute; bottom: 0px; left: 0px; width: 4px; height: 4px; z-index: 6; background: url(_/corner-3.png) no-repeat bottom; } .corner4 { position: absolute; top: 0px; left: 0px; width: 4px; height: 4px; z-index: 5; background: url(_/corner-4.png) no-repeat; } .corner5 { position: absolute; bottom: 0px; right: 0px; width: 4px; height: 4px; z-index: 5; font-size: 1px; background: url(_/corner-5a.png) no-repeat; } .corner6 { position: absolute; bottom: 0px; left: 0px; width: 4px; height: 4px; z-index: 5; font-size: 1px; background: url(_/corner-6a.png) no-repeat; } .border-top { position: absolute; top: 0px; width: 100%; height: 4px; z-index: 4; background: url(_/border-top.png) repeat-x; } .border-right { position: absolute; top: 0px; right: 0px; width: 4px; height: 100%; z-index: 4; background: url(_/border-right.png) repeat-y; } .border-bottom { position: absolute; bottom: 0px; width: 100%; height: 4px; z-index: 4; background: url(_/border-bottom.png) repeat-x bottom; } .border-left { position: absolute; top: 0px; left: 0px; width: 4px; height: 100%; z-index: 4; background: url(_/border-left.png) repeat-y; } </style> </head> <body> <div class="section" style="margin-top:35px; height:100%;"> <div class="header-text"> border-right и border-left не тянутся в ИЕ6 по высоте border-right и border-left не тянутся в ИЕ6 по высоте border-right и border-left не тянутся в ИЕ6 по высоте border-right и border-left не тянутся в ИЕ6 по высоте </div> <!--Borders and corners--> <div class="corner1"></div> <div class="corner2"></div> <div class="corner3"></div> <div class="corner4"></div> <div class="border-top"></div> <div class="border-right"></div> <div class="border-bottom"></div> <div class="border-left"></div> <!--End borders and corners--> </div> </body> </html> Есть предположение что это DTD балуется, над ИЕ или наоборот... Дело в том что блок будет неизвестно какой высоты он должен тянуться.