singlepost

Понимаю, что верстка и программирование – разные вещи, однако очень нужна помощь с CSS – осел опять косячит << На главную или назад  

Я по сути не верстальщик, но работать в последнее время с версткой приходится все больше и больше, а знаний пока немного, поэтому заранее извиняюсь за глупый вопрос, если решение этой проблемы окажется тривиальным.
Ближе к делу…
Мне надо, чтобы две таблицы выстроились: одна над картинкой, выведенной дивом, вторая – справа от нее.
Есть следующее:
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:&nbsp;</td><td align = 'right'>&nbsp;{$income[1]} per hour</td></tr>
<tr><td><img src = 'images/g/r/oil.png'></td><td>Fuel:&nbsp;</td><td align = 'right'>&nbsp;{$income[2]} per hour</td></tr>
<tr><td><img src = 'images/g/r/water.png'></td><td>Water:&nbsp;</td><td align = 'right'>&nbsp;{$income[3]} per hour</td></tr>
<tr><td><img src = 'images/g/r/food.png'></td><td>Food:&nbsp;</td><td align = 'right'>&nbsp;{$income[4]} per hour</td></tr>
</table>

Так вот – в опере и огнелисе все прекрасно! Но в осле #income не выравнивается как надо…

что в опере (и огнелисе то же самое): //i035.radikal.ru/0907/27/628d964c9bb8.jpg
что в ие: //i038.radikal.ru/0907/0e/573bf81e68d5.jpg

Вопрос очевиден – как сделать так, чтобы в ие тоже нормально выравнивалось?..

3 ответов в теме “Понимаю, что верстка и программирование – разные вещи, однако очень нужна помощь с CSS – осел опять косячит”

  1. 3
    Роман Чваников ответил:

    Огромное спасибо за ликбез по условным комментариям – слышал, но не знал.

    По поводу position:absolute;
    там чуть более сложная структура, код я привел только того, что меня волнует, однако на скриншотах, думаю, можно увидеть, что там еще список слева и панель сверху. А панель сверху – тоже не простая…))

    В общем, спасибо, ушел экспериментировать! :)

  2. 2
    Роман Чваников ответил:

    Ха! Все решилось в несколько delete'ов, Вы были правы! Стоило заменить padding-left и padding-top на left и top. Теперь все одинаково правильно отображается, спасибо!

  3. 1
    Евгений Козобродов ответил:

    Попробуй похимичить со стилями именно для ие с помощью условных комментариев (работает исключительно с ие, что нам и надо). Делается так:
    - В голове страницы добавляешь код:
    <!–[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.

Клуб программистов работает уже ой-ой-ой сколько, а если поточнее, то с 2007 года.