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, время: 02:08. |