| Deff | 23.08.2012 16:21 |
Цитата:
|
Сообщение от wawandas
однострочные таблы, как это?
|
Или Выстройте первоначально чисто таблу с бордерами:,без контента
Вот Ваша идеальная табла (
<input> в <td> IE7
Вложений: 1
Сверстал (не до конца)страницу (образец в исходниках), код валидный. Все браузеры (IE6 и 8, opera, FF, chrome) кроме IE7 отображают ее нормально.
В ie7 ячейки разлазятся из-за input (как я понял) помогите понять, в чем же таки проблема, заранее спасибо ЗЫ опыта мало, ногами не бейте! выложил корректный файл |
быть может, правый блок (там где форма) переверстать на div или списках? как думаете?
|
wawandas, Ошибки в табле
1. Совет = дабы не мучать таблу - сверстайте ee чисто в строчном варианте через li (li - одна строка в строках можно вставить однострочные таблы |
Цитата:
Цитата:
|
Вложений: 1
поправил html
однострочные таблы, как это? <ul> <li> <table> <tr> <td><td> </tr> </table> </li> </ul> что то типа этого? |
Цитата:
Или Выстройте первоначально чисто таблу с бордерами:,без контента Вот Ваша идеальная табла ( |
Цитата:
|
Цитата:
|
Хотя имхо есть и другой Вариант
три одноколоночных таблы, по одной ячейке в каждой строке  |
Deff,
спасибо, попытаюсь сообразить... |
вспомнил что меня отпугнуло в блочной верстке, это то что нельзя контенту задать vertical-align:bottom; (в IE6,7,8)
|
хотя тут же будут кусочки таблиц
|
|
Deff,
не совсем вас сейчас понимаю, верхняя и нижняя (кто именно?) напомню, проблемы только в IE7 ((( имеет ли смысл перевёрстывать из-за ie7 может есть иной путь? |
wawandas,
Синие таблы - получились по три колонки (каждая колонка в одну ячейку - там мелочь (2 и 5-я строка в третьей колонке) - ставим все одно одной ячейкой - там оно вродь и не нужно |
Deff,
думаете это решит проблему в ie7 ведь проблема в том что именно в ie7 инпыты стремятся залесть под соседей ie6 и ie8 отображают корректно :-? |
wawandas,
1. Инпуты залезают из-за кривой таблицы и отсутствия тега <tbody> Вот пытаемся упростить таблицу Ну <tbody> надеюсь сами вставите |
<style type="text/css">
table.form td{
border:1px solid;
}
</style>
<table class="form"><tbody>
<tr>
<td>1ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>2ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>3ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>4ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>5ячейка 1</td><td><input type=text/></td><td><input type=text/><input type=text/></td>
</tr>
<tr>
<td>6ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>7ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>8ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>9ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>10ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
<tr>
<td>11ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
</tr>
</tbody></table>
 |
Deff,
спасибо! решаю что лучше попробовать переверстать на таблице или все же применить div |
Deff,
пожалуйста, если не сложно, можно ли пару строк именно на блочной верстке, хочется грамотно сверстать |
wawandas,
В ИЕ без таблы - убъете время(хотя - получите опыт |
порекомендуйте пожалуйста материал о правильной верстке ;)
|
решил делать на таблицах, что не так делаю? всё равно растягивается в ie7 :cray:
проблема только в ie7 код ниже смотреть только в ie7! <style type="text/css">
.form
{
background: #F1FDF2;
font-family: Arial;
margin:0px auto;
border:1px solid #ccc;
height:460px;
width:430px;
padding:0;
}
table
{
margin:10px auto;
padding:0;
height:440px;
width:400px;
}
td
{
width:100px;
}
tr
{
height:10px;
}
td img
{
vertical-align:bottom;
height:60px;
}
.text_cell
{
font-family: Arial;
text-align: justify;
font-weight:bolder;
font-size:12px;
}
</style>
<div class="form">
<form method="post" action="#">
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" style="border-bottom:2px solid #27A417;">Cover Details</td>
<td rowspan="2" align="center"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2">
<select>
<option selected="selected">Day</option>
<option value="">01</option>
<option value="">02</option>
<option value="">...</option>
<option value="">...</option>
</select>
<select style="display:inline;">
<option selected="selected">Math</option>
<option value="">Jan</option>
<option value="">Dec</option>
<option value="">...</option>
<option value="">...</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="text_cell">Your<br/>occupation:</td>
<td><input type="text" name="occupation" value="" size="12"/></td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
</form>
</div>
|
Deff,
ошибок нет же, всё я правильно накодил ((( из 7 браузеров только у одного проблемы, значит проблема именно в ie7 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<style type="text/css">
.form
{
background: #F1FDF2;
font-family: Arial;
margin:0px auto;
border:1px solid #ccc;
height:460px;
width:430px;
padding:0;
}
table
{
margin:10px auto;
padding:0;
height:440px;
width:400px;
}
tr
{
height:10px;
}
td img
{
vertical-align:bottom;
height:60px;
}
.text_cell
{
font-family: Arial;
text-align: justify;
font-weight:bolder;
font-size:12px;
}
</style>
<div class="form">
<form method="post" action="#">
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<col width=100>
<col width=100>
<col width=100>
<col width=100>
<tr>
<td colspan="3" style="border-bottom:2px solid #27A417;">Cover Details</td>
<td rowspan="2" align="center"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2">
<select>
<option selected="selected">Day</option>
<option value="">01</option>
<option value="">02</option>
<option value="">...</option>
<option value="">...</option>
</select>
<select style="display:inline;">
<option selected="selected">Math</option>
<option value="">Jan</option>
<option value="">Dec</option>
<option value="">...</option>
<option value="">...</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="text_cell">Your<br/>occupation:</td>
<td><input type="text" name="occupation" value="" size="12"/></td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
|
спасибо! проблема была в ширине ячейки
:thanks: |
| Часовой пояс GMT +3, время: 09:12. |