Верстаю шаблончик и когда дело начало подходить к концу начал проверку на кроссбраузерность. Все вроде бы хорошо, да вот в IE 11 криво встает таблица, причем, хочу заметить, таких таблиц на странице будет несколько, но кривая только первая. По нижнему бордюру видно что некоторые столбцы съезжают вниз + правый бордюр на 1px вправо уходит у всех таблиц.
Может есть те, кто знает в чем моя ошибка?
html:
CSS:
Может есть те, кто знает в чем моя ошибка?
html:
| Код |
|---|
<div class="server"> <div class="headservers">Игровые сервера Counter-Strike 1.6</div> <table class="t"> <tr> <th style="width:20px;text-align:center;">#</th> <th style="width:280px;">НАЗВАНИЕ СЕРВЕРА</th> <th style="width:160px;text-align:center;">IP-АДРЕС СЕРВЕРА</th> <th style="width:60px;text-align:center;">ИГРОКИ</th> <th style="width:40px;"> </th> <th style="width:140px;"> КАРТА</th> <th class="v" style="width:60px;text-align:center;">ГОЛОСА</th></tr> </tr> <tr class="color-1"> <td class="o">1</td> <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a> <a href="#">[DM] Server Counter-Strike: Source v34 by DaBags</a></td> <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" /> 255.255.255.255:27015</td> <td style="width:60px;text-align:center;">64/64</td> <td style="width:40px;text-align:center;"><img src="img/maps/de_dust.jpg"></td> <td style="width:140px;"> <a alt="de_dust" title="de_dust" href="#">de_dust</a></td> <td class="v"><a href="#" class="rur"></a></td> </tr> <tr class="color-2"> <td class="o">2</td> <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a> <a href="#">Public Server Counter-Strike 1.6 by DaBags #212</a></td> <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" /> 255.255.255.255:27016</td> <td style="width:60px;text-align:center;">12/32</td> <td style="width:40px;text-align:center;"><img src="img/maps/de_dust2.jpg"></td> <td style="width:140px;"> <a alt="de_dust2" title="de_dust2" href="#">de_dust2</a></td> <td class="v"><span class="votes_count" id="votes_count4">9</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td> </tr> <tr class="color-3"> <td class="o">3</td> <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a> <a href="#" id="link">GunGame Server Counter-Strike: GO</a></td> <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" /> 255.255.255.255:27017</td> <td style="width:60px;text-align:center;">17/32</td> <td style="width:40px;text-align:center;"><img src="img/maps/default.jpg"></td> <td style="width:140px;"> <a alt="de_dust2" title="de_dust2" href="#">gg_lego_arena_cs16</a></td> <td class="v"><span class="votes_count" id="votes_count4">8</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td> </tr> <tr> <td class="o">4</td> <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a> <a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td> <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" /> 255.255.255.255:27018</td> <td style="width:60px;text-align:center;">31/32</td> <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td> <td style="width:140px;"> <a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td> <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td> </tr> <tr> <td class="o">5</td> <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a> <a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td> <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" /> 255.255.255.255:27018</td> <td style="width:60px;text-align:center;">31/32</td> <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td> <td style="width:140px;"> <a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td> <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td> </tr> </table> </div> |
CSS:
| Код |
|---|
.server {
margin-bottom: 10px;
background-color: #083f59;
padding-bottom: 4px;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.headservers {
color: #fff;
padding: 10px 15px;
text-transform: uppercase;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table.t {
width: 100%;
table-layout: fixed;
font-size: 15px;
border-left: 1px solid #083f59;
border-right: 1px solid #083f59;
}
table.t tr:nth-child(even), table.g tr:nth-child(even) {
background-color: #f2f2f2;
}
table.t tr:nth-child(odd), table.g tr:nth-child(odd) {
background-color: #e3e3e3;
}
table.t tr:hover {
background-color: #d3d3d3;
}
table.t tr th {
height:25px;
line-height:25px;
background:#1f5975;
font-size:14px;
color:#aaa;
}
tr {
display:table-row;
vertical-align:inherit;
border-color:inherit;
}
th {
text-align:left;
}
table.t tr td {
padding: 1px 0;
height: 25px;
border-bottom: 1px solid #083f59;
vertical-align:middle;
}
table.t tr td.o {
width: 20px;
text-align: center;
padding: 0 5px 0 5px;
}
table.t tr td.servername {
width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.t tr td.serverip {
width: 160px;
text-align: center;
}
table.t tr td img {
width:38px;
height:28px;
margin:0;
vertical-align:middle;
}
table.t tr td.v {
width:60px;
font:18px 'CuprumBold', Arial, Helvetica, sans-serif;
text-align: center;
}
table.t tr td.v a.rur {
display:inline-block;
width:40px;
height:20px;
background:url("../img/vip.png") no-repeat 0 0;
margin:0 auto;
vertical-align: middle;
}
img {display:inline-block; vertical-align:middle;}
table.t tr td a {color: #083f59;}
table.t tr td a:hover {text-decoration: none;}
table.t tr.color-1 td {background:#eeff00;color:#000;}
.color-1 a {color:#000 !important;}
.color-1:hover a {color:#000;}
table.t tr:hover.color-1 td {background:#bfc92c;color:#000;}
table.t tr.color-2 td {background:#66CC33;color:#000;}
.color-2 a {color:#000 !important;}
.color-2:hover a {color:#000;}
table.t tr:hover.color-2 td {background:#00CC33;color:#000;}
table.t tr.color-3 td {background:#FF0000;color:#f2f2f2;}
.color-3 a {color:#f2f2f2 !important;}
.color-3:hover a {color:#fff;}
table.t tr:hover.color-3 td {background:#d00000;color:#fff;} |
Изменено:
Дмитрий Мальцев - 23 Октября 2016 20:37
