Очень прошу поправить и подсказать!
Задача: Сделать навигационную панельку для отображения динамической таблички, в ширину таблички. Ширина таблички заранее не известна. фиксировать не хочется. Панель в виде формы, кнопки вперёд и назад привязать к левому и правому краям таблицы, в середине выбор страницы.
Проблема: В IE7, если родительский объект (в моём случае div вокруг таблицы) сам float (имеет ширину максимального элемента внутри) и содержит элемент float: right;, то последний его растягивает по ширине до предела.
Вариант выхода: вместо float: right; испльзовать absolute, и тогда уж для левого элемента тоже...
Вопрос: есть ли способ более красивый, чем абсолютное позиционирование?
И ещё: насколько корректно для form использовать overflow: auto;, чтобы охватить плавающие элементы. Установка padding больше чем 0, даёт тот же эффект, но корректно ли это?
CSS с float:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'> * {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-width: 44em;
font-family: Arial, Helvetica, Sans-Serif;
}
body {
min-height: 100%;
height: auto !important;
position: relative;
}
table {
border-collapse: separate;
border-spacing: 1px;
}
th {
background-color: #666666;
color: #ffffff;
}
td, th { padding: 0.1em 0.5em; }
tr.row1 td { background-color: #cccccc; }
tr.row2 td { background-color: #ebebeb; }
#db {
float: left;
width: auto;
border: #cccccc solid 1px;
margin-right: 1em;
}
#db > * {
clear: both; /* safe from unxepected collisions */
}
#db p, #db form {
margin: 1px; /* for looks good only */
}
#db form {
background-color: #eeeff1;
padding: 0.2em; /* works as overflow: auto;, but not buggy on IE */
text-align: center;
}
#db form fieldset {
margin: 0;
padding: 0;
border: none;
width: auto;
}
.dbnavleft {
float: left;
}
.dbnavright {
float: right;
}</div>
Для абсолютного позиционирования заменяю:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>#db {
float: left;
width: auto;
border: #cccccc solid 1px;
margin-right: 1em;
position: relative; /* добавилось */
}
.dbnavleft {
/* float: left; убрали */
/* добавилось */
position: absolute;
left: 0.25em;
}
.dbnavright {
/* float: right; убрали */
/* добавилось */
position: absolute;
right: 0.25em;
}</div>
Код xhtml:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles/nav.css" />
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="db">
<form method="get" action="#">
<fieldset class="dbnavleft">
<input type="submit" name="nav" value="<<" />
<input type="submit" name="nav" value="<" />
</fieldset>
<fieldset class="dbnavright">
<input type="submit" name="nav" value=">" />
<input type="submit" name="nav" value=">>" />
</fieldset>
<fieldset class="dbnavpage">
<label>Page:</label>
<select name="page" onchange="this.form.submit();">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="go" type="submit" value="go" />
</fieldset>
</form>
From: 1 to: 3</p>
<table>
<tr>
<th>PID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Middle Name</th>
<th colspan="3">Action</th>
</tr>
<tr class="row2">
<td>1</td>
<td>?</td>
<td>?</td>
<td>?
</td>
<td>R</td>
<td>E</td>
<td>D</td>
</tr>
<tr class="row1">
<td>2</td>
<td>?</td>
<td>?</td>
<td>?
</td>
<td>R</td>
<td>E</td>
<td>D</td>
</tr>
<tr class="row2">
<td>3</td>
<td>?</td>
<td>?</td>
<td>?
</td>
<td>R</td>
<td>E</td>
<td>D</td>
</tr>
</table>
</div>
</body>
</html></div>
