кроссбраузерность

termoplus · October 3, 2008

сверстал тестовую страничку, столкнулся с проблемами:

1)разница в браузерах

2)не отображается рамка в ИЕ

3)высота всего контента

4)выравние внутренних колонок(как расположить по центру?)

5)слово "banner"как разместить по центру?

6)состояние кнопок, при выбранном режиме не поддеживается стиль

7)набирал в дримвивере, каждая строка выравнивается по краю, т.е. не показывает вложенные строки, хотя галка стоит Auto Indent

только учусь верстать, поэтому судите не строго.

Заметил что при удалении первых двух строчек в коде, в ИЕ отображаются рамка.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
background-color:#333333;
text-align:center;
}
.body{
width:800px;
background-color:#FFFFFF;
border: 1px solid grey;
}

.imageHeader{
width:794px;
height:200px;
border: 1px solid grey;
background-color:#CCCCCC;
margin:2px;
}

.colum{
width:264px;
margin-right:2px;
margin-bottom:2px;
}

.columContent{
height:502px;
border: 1px solid grey;
padding:2px;
background-color:#CCCCCC;
}

.left{float:left;}
.right{float:right;}
.cleanFloat{clear:both;}

.bottom{
width:794px;
height:30px;
border:1px solid grey;
background-color:#CCCCCC;
margin:2px;

}

.link A{
color:#000000;
}

.link A:hover{
color:#FFFFFF;
background-color:#000000;
}

.linkActive A,
linkctive A:hover{
background-color:#000000;
color:#FFFFFF;
}

.link A,
link A:hover,
linkActive A,
linkctive A:hover{
text-decoration:none;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
padding:5px;
}

.delimeter{
border-right:1px solid grey;
margin:4px;
}

</style>
</head>
<body>
<div class="body">
<div class="imageHeader"> banner </div>
<p>
<span class="link"> <a href="">button-01</a></span>
<span class="delimeter"></span>
<span class="linkActive"> <a href="">button-02</a></span>
<span class="delimeter"></span>
<span class="link"> <a href="">button-03</a></span>
<span class="delimeter"></span>
<span class="link"> <a href="">button-04</a></span>
<span class="delimeter"></span>
<span class="link"> <a href="">button-05</a></span>
<span class="delimeter"></span>
<span class="link"> <a href="">button-06</a></span>
</p>
<div class="colum left"><div class="columContent"></div></div>
<div class="colum left"><div class="columContent"></div></div>
<div class="colum left"><div class="columContent"></div></div>
<div class="bottom cleanFloat"></div>
</div>
</body>
</html>

Sign In

кроссбраузерность

Question

termoplus

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information