Я по сути не верстальщик, но работать в последнее время с версткой приходится все больше и больше, а знаний пока немного, поэтому заранее извиняюсь за глупый вопрос, если решение этой проблемы окажется тривиальным.
Ближе к делу…
Мне надо, чтобы две таблицы выстроились: одна над картинкой, выведенной дивом, вторая – справа от нее.
Есть следующее:
table#res_now{
padding-left: 0px;
width: 800px;
position: absolute;
}
table#income{
padding-left: 610px;
padding-top: 50px;
position: absolute;
}
Вот код:
<table id = 'res_now'><tr>
<td>".ucfirst(USER_NAME)." city</td>
<td align = 'left'>
<table align = 'right'><tr>
<td><img src = 'images/g/r/power.png'></td><td><u id = 'r1'></u></td>
<td><img src = 'images/g/r/oil.png'></td><td><u id = 'r2'></u></td>
<td><img src = 'images/g/r/water.png'></td><td><u id = 'r3'></u></td>
<td><img src = 'images/g/r/food.png'></td><td><u id = 'r4'></u></td>
</tr></table>
</td>
</tr></table>
<div id = 'res_map'>
<img class = 'rmap' src = 'images/x.gif'>
</div>
<table id = 'income'>
<tr><td colspan = '3' align = 'center'><b>Income</b></td></tr>
<tr><td><img src = 'images/g/r/power.png'></td><td>Power: </td><td align = 'right'> {$income[1]} per hour</td></tr>
<tr><td><img src = 'images/g/r/oil.png'></td><td>Fuel: </td><td align = 'right'> {$income[2]} per hour</td></tr>
<tr><td><img src = 'images/g/r/water.png'></td><td>Water: </td><td align = 'right'> {$income[3]} per hour</td></tr>
<tr><td><img src = 'images/g/r/food.png'></td><td>Food: </td><td align = 'right'> {$income[4]} per hour</td></tr>
</table>
Так вот – в опере и огнелисе все прекрасно! Но в осле #income не выравнивается как надо…
что в опере (и огнелисе то же самое): //i035.radikal.ru/0907/27/628d964c9bb8.jpg
что в ие: //i038.radikal.ru/0907/0e/573bf81e68d5.jpg
Вопрос очевиден – как сделать так, чтобы в ие тоже нормально выравнивалось?..
31 июля 2009 в 3:03
Огромное спасибо за ликбез по условным комментариям – слышал, но не знал.
По поводу position:absolute;
там чуть более сложная структура, код я привел только того, что меня волнует, однако на скриншотах, думаю, можно увидеть, что там еще список слева и панель сверху. А панель сверху – тоже не простая…))
В общем, спасибо, ушел экспериментировать!
31 июля 2009 в 3:03
Ха! Все решилось в несколько delete'ов, Вы были правы! Стоило заменить padding-left и padding-top на left и top. Теперь все одинаково правильно отображается, спасибо!
31 июля 2009 в 3:02
Попробуй похимичить со стилями именно для ие с помощью условных комментариев (работает исключительно с ие, что нам и надо). Делается так:
- В голове страницы добавляешь код:
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie_css_url" />
<![endif]–>
где ie_css_url – ссылка на стилевой файл для ие
- Код в этом комментарии будет прочитан только браузерами Internet Explorer.
- В стилевом файле, который подключаешь в этом коде, пробуешь другие варианты css – специально для ие.
Очевидно, пробовать придется различные варианты позиционирования. Для начала попробуй вместе padding-left и padding-top в #income использовать top и left (я вообще не понял зачем ты используешь там поля). Это, кстати, можно попробовать в общих стилях и без условных комментариев.
Ссылки:
- css-правило top: //htmlbook.ru/css/top.html
- css-правило left: //htmlbook.ru/css/left.html
- условные комментарии в ие: //www.webmagazine.biz/articles/ispolzovanie-usl...
UPD: Кстати, ие походу очень правильно (на этот раз!!!) понял правило position: absolute. У тебя же там вроде левый верхний угол второй таблицы как раз в нуле своего контейнера находится. Я конечно могу ошибаться, по одной картинке судить трудно, но ты обрати на это внимание. Может быть лучше будет вторую таблицу делать без позиционирования и прижимать её к правому краю контейнера с помощью float.