x-yuri
А свойство zoom (его кстати Safari 4+ поддерживает) вы разве не относите к хакам (я к счастью его еще ни разу не использовал)? Shaci , вот тут я теоретически не могу пояснить эти нюансы Вам нужно то, всего лишь понять поведение position:relative; и overflow: hidden; Откройте firebug, включите опции браузера и поиграйтесь со значениями. ктати вот, довольно интересный пример с clear: <style type="text/css"> div { border: 1px solid; position: relative; /* в нормальных браузерах не обязательно, но желательно */ overflow: hidden; /* в нормальных браузерах не обязательно, но желательно */ } </style> <div>text1</div> <div style="float: left;">text2</div> <div style="clear: both">text3</div> |
Цитата:
Цитата:
zoom: 1... я бы это отнес скорее к vendor-specific css properties (-moz-, -o-, -webkit-). И непонятно, зачем такое выносить в отдельный css файл. Я вижу одну причину выноса в отдельный файл - чтобы использовать conditional comments. Вот мне и интересно, когда без них не обойтись... а вынос в отдельный файл провоцирует на добавление в него правил, без которых можно обойтись. Да и работать с двумя файлами неудобно Цитата:
|
Цитата:
|
Цитата:
А если что-то конкретное интересует, спрашивайте тут. |
а понятно, я думал по верстке что то еще ты писал.
|
попробовал сделать подменюшку динамическую)), в ie верстка разваливается,
в firefox работает <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru"> <head> <style type="text/css"> #wrap, #content, ul, ul li { overflow: hidden; position: relative; } #wrap { margin:0 auto; background: gray; width: 408px; height: auto; } #content { background: #330033; margin: 40px auto; width: 300px; height: 80px; } ul, ul li { margin: 0px; padding: 0px; } ul { width: 408px; height: 20px; } ul li { background: #35C; border: solid 1px; border-color: #46F #238 #238 #46F; display: block; list-style: none; text-align: center; float: left; width: 100px; } ul li a { color: #fff; font: 300 14px/14px arial, tahoma, verdana, sans-serif; text-decoration: none; } #first, #second, #third, #fourth { height:20px; border:solid 0px 1px 0px 1px; background:#330066; } #submenu { position:absolute; height:0px; overflow:visible; } </style> <script type="text/javascript"> window.onload = function() { //addEvent function addEvent(elem, type, handler){ if (elem.addEventListener){ elem.addEventListener(type, handler, false) } else { elem.attachEvent("on"+type, function () {handler.apply(elem)}) } } var childs = document.getElementById("submenu").getElementsByTagName("li"); for (var i = 0; i < childs.length; i++) { childs[i].style.height = "0px"; } var animating = false; var menuLi = document.getElementById("menu").getElementsByTagName("li"); var submenu, str, id; for (var i = 0; i < menuLi.length; i++) { var a = menuLi[i].getElementsByTagName("a")[0]; addEvent(a, "click", incDec); } function incDecInner() { if (str == "+") { if (submenu.style.height != "20px") { submenu.style.height = parseInt(submenu.style.height) + 2 + "px"; } else { animating = false; clearInterval(id); } } else { if (submenu.style.height != "0px") { submenu.style.height = parseInt(submenu.style.height) - 2 + "px"; } else { animating = false; clearInterval(id); } } } function incDec(event) { event = event || window.event if (event.preventDefault) { event.preventDefault() } else { event.returnValue = false } if (animating) return; else { animating = true; var array = /#(.+)/.exec(this.href); var pointer = array[1]; submenu = document.getElementById(pointer); if (submenu.style.height == "0px") { str = "+"; id = setInterval(incDecInner,50); } else { str = "-"; id = setInterval(incDecInner, 50); } } } } </script> </head> <body> <div id="wrap"> <ul id="menu"> <li><a href="#first">1</a></li> <li><a href="#second">2</a></li> <li><a href="#third">3</a></li> <li><a href="#fourth">4</a></li> </ul> <ul id ="submenu"> <li id="first"><a href="#">1</a></li> <li id="second"><a href="#">2</a></li> <li id="third"><a href="#">3</a></li> <li id="fourth"><a href="#">4</a></li> </ul> <div id="content"></div> </div> </body> </html> |
Цитата:
1. отступ сиреневого блока сверху 2. не верное позиционирование субменю Как вариант (смотрел в ИЕ7 и Опере) <!DOCTYPE html> <html> <head> <style type="text/css"> #wrap, #content, ul, ul li { overflow: hidden; position: relative; } #wrap { margin:0 auto; background: gray; width: 408px; height: auto; } #content { background: #330033; margin-left: auto; margin-right: auto; width: 300px; height: 80px; } ul, ul li { margin: 0px; padding: 0px; } ul { width: 408px; height: 20px; } ul li { background: #35C; border: solid 1px; border-color: #46F #238 #238 #46F; display: block; list-style: none; text-align: center; float: left; width: 100px; } ul li a { color: #fff; font: 300 14px/14px arial, tahoma, verdana, sans-serif; text-decoration: none; } #first, #second, #third, #fourth { height:20px; border:solid 0px 1px 0px 1px; background:#330066; } #submenu { position:absolute; top: 22px; left: 0; height:0px; overflow:visible; } #tab { height: 40px; } </style> <script type="text/javascript"> window.onload = function() { //addEvent function addEvent(elem, type, handler){ if (elem.addEventListener){ elem.addEventListener(type, handler, false) } else { elem.attachEvent("on"+type, function () {handler.apply(elem)}) } } var childs = document.getElementById("submenu").getElementsByTagName("li"); for (var i = 0; i < childs.length; i++) { childs[i].style.height = "0px"; } var animating = false; var menuLi = document.getElementById("menu").getElementsByTagName("li"); var submenu, str, id; for (var i = 0; i < menuLi.length; i++) { var a = menuLi[i].getElementsByTagName("a")[0]; addEvent(a, "click", incDec); } function incDecInner() { if (str == "+") { if (submenu.style.height != "20px") { submenu.style.height = parseInt(submenu.style.height) + 2 + "px"; } else { animating = false; clearInterval(id); } } else { if (submenu.style.height != "0px") { submenu.style.height = parseInt(submenu.style.height) - 2 + "px"; } else { animating = false; clearInterval(id); } } } function incDec(event) { event = event || window.event if (event.preventDefault) { event.preventDefault() } else { event.returnValue = false } if (animating) return; else { animating = true; var array = /#(.+)/.exec(this.href); var pointer = array[1]; submenu = document.getElementById(pointer); if (submenu.style.height == "0px") { str = "+"; id = setInterval(incDecInner,50); } else { str = "-"; id = setInterval(incDecInner, 50); } } } } </script> </head> <body> <div id="wrap"> <ul id="menu"> <li><a href="#first">1</a></li> <li><a href="#second">2</a></li> <li><a href="#third">3</a></li> <li><a href="#fourth">4</a></li> </ul> <ul id ="submenu"> <li id="first"><a href="#">1</a></li> <li id="second"><a href="#">2</a></li> <li id="third"><a href="#">3</a></li> <li id="fourth"><a href="#">4</a></li> </ul> <div id='tab'></div> <div id="content"></div> </div> </body> </html> |
x-yuri, :)
Вот буквально на днях был косяк с ишаком (6-8). Если я пишу: .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 40); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; opacity: 0.4; } ломается синтаксис CSS. Конкретно в IE, при просмотре в отладчике, несколько свойств сливаются в один и не работают. Вынос в отдельный файл решает проблему и всё начинает работать. |
B~Vladi, да так-то в нем много косяков, просто с ходу не получается вспомнить. К примеру в ie6 border co значением transparent нужно через фильтр назначать ...
Цитата:
|
-ms-filter для IE8, filter для 7-6. Для 5-ого там другое, но я не увлекаюсь некрофилией.
|
Часовой пояс GMT +3, время: 00:16. |