Jump to content
  • 0

Нетривиальная таблица неверно отображается в ИЕ


FireBall
 Share

Question

Вобщем есть такая нетривиальная таблица.. И я с ней уже запарился..

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" width="12">
<img src="images/l_top_crnr.gif" width="12" height="15"></td>
<td width="290" background="images/top_left.gif"></td>
<td width="112"><img src="images/top.gif" width="112" height="15"></td>
<td width="100%" background="images/top_right.gif"></td>
<td width="11">
<img src="images/r_top_crnr.gif" width="11" height="15"></td>
<td width="1">
<img src="images/разделитель.gif" width="1" height="15"></td>

</tr>
<tr>
[b]<td width="8" height="88"><img src="images/left_top.gif" width="8" height="88"></td>[/b]
<td colspan="4" rowspan="2" bgcolor="#e6f4fd" valign="top">
<div id="txtframe">
<!--СЮДА ИНКЛЮДИТСЯ КОНТЕНТ ОКОШКА-->
</div>
</td>
<td rowspan="2" background="images/right.gif" width="11"><img src="images/разделитель.gif" width="11" height="100%"></td>
<td>
<img src="images/разделитель.gif" width="1" height="88"></td>
<tr>
[b]<td background="images/left.gif" width="8" height="100%"></td>[/b]
<td><img src="images/разделитель.gif" width="1" height="100%"></td>
</tr>
<tr>
<td colspan="2" width="12">
<img src="images/l_btm_crnr.gif" width="12" height="12"></td>
<td colspan="3" width="100%" background="images/bottom.gif"></td>
<td width="11">
<img src="images/r_btm_crnr.gif" width="11" height="12"></td>
<td width="1">
<img src="images/разделитель.gif" width="1" height="13"></td>
</tr>
<tr>
<td><img src="images/разделитель.gif" width="8" height="1"></td>
<td><img src="images/разделитель.gif" width="3" height="1"></td>
<td><img src="images/разделитель.gif" width="290" height="1"></td>
<td><img src="images/разделитель.gif" height="1"></td>
<td><img src="images/разделитель.gif" width="11" height="1"></td>
</tr>
</table>

вобщем то стандартная табличная верстка "окна" со скругленными краями, но есть одно но.. в слое textframe в левом верхнем углу находится изображение, эдакий элемент дизайна. Чтобы плавно подвести его к границам "окна" в левую границу окошка я разбил на 2 ячейки, в верхнюю закидывается картинка перехода, а нижняя ячейка мостится изображением высотой 1px. То есть пердполагается что верхняя ячейка размещается сверху, а нижняя растягивается на необходимую высоту "окошка". В Опере так и происходит, а IE почему то решает что верхнюю ячейку нужно растянуть на 100% и посередине воткнуть картинку.... Вобщем результат можно посмотреть тут http://ypr-chita.ru

Проблемные места выделил жирным... Поможите пожалуйста, как это забороть..:)

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

нижняя ячейка почему то все равно не мостится :) точнее высота ячейки верхней осталась та же, просто картинка стала вверху... почему высота ячейки не подгоняется по высоте вложеной в нее картинке?

Link to comment
Share on other sites

  • 0

Высота ячейки всегда равна высоте строки. То-есть если у первой ячейки высота должна быть 100px, а у второй ячейки на этой-же строке высота 200px, тогда высота строки составит 200px и, соответственно, высота первой ячейки так-же увеличится до 200px.

Link to comment
Share on other sites

  • 0

Пункт раз поставь в первой ячейке позиционирование top тогда и картинка будет не по центру (это по умолчанию) а вверху, второе можно той же ячейке присвоить фоном тот файл который должен тянуться и отпадет необходимость во второй ячейке.

Link to comment
Share on other sites

  • 0
Пункт раз поставь в первой ячейке позиционирование top тогда и картинка будет не по центру (это по умолчанию) а вверху, второе можно той же ячейке присвоить фоном тот файл который должен тянуться и отпадет необходимость во второй ячейке.

ВО!!! а это уже конструктив! премного благодарен за идею :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy