IE Rendering Issues - Help!

Question

--min 0 Newbie Poster

15 Years Ago

Hi,
I'm new to the forum and have just come across this issue when testing my site for the first time in Internet Explorer (I normally use Firefox).
In IE, the 3x3 table renders with the two images in Row 3, Col 1 and Row 3, Col 3, both sized as 1px by 1px with a gap below them, showing the background colour through.

See attached screenshots, the first of Firefox's (correct) and the second of IE7's (incorrect) rendering.

The HTML code is as follows:

<table style="text-align: left; width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3" rowspan="1" style="vertical-align: top; height: 50%;">
<br>
<big style="color: rgb(125, 171, 153);"><big>
Sea
</big></big><br>
<br>
Content
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 1px; height: 1px; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/tl.png">
</td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: top; text-align: right; width: 1px; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/tr.png">
</td>
</tr>
<tr style="background-color: rgb(200, 103, 103);">
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: top; color: rgb(255, 255, 255); background-color: rgb(125, 171, 153);">
<big><big>
Surf
</big></big>
<br><br>
Content
<br>
</td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
</tr>
<tr style="background-color: rgb(200, 103, 103);">
<td style="vertical-align: bottom; height: 1px; width: 1px; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/bl.png">
</td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: bottom; text-align: right; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/br.png">
</td>
</tr>
</tbody>
</table>

Please help me to get the IE rendering the same as FF's!

Thanks in advance,

J

web-design

3 Contributors
4 Replies
76 Views
22 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by valonesal

valonesal 0 Junior Poster

15 Years Ago

Try this code all I did was add absolute bottom to the bottom corner images and is seems to work fine in ie7 ie8 ff.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table style="text-align: left; width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3" rowspan="1" style="vertical-align: top; height: 50%;">
<br>
<big style="color: rgb(125, 171, 153);"><big>
Sea
</big></big><br>
<br>
Content
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 1px; height: 1px; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/tl.png">
</td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: top; text-align: right; width: 1px; background-color: rgb(125, 171, 153);">
<img style="width: 42px; height: 35px;" alt="" src="images/round-corners/tr.png">
</td>
</tr>
<tr style="background-color: rgb(200, 103, 103);">
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: top; color: rgb(255, 255, 255); background-color: rgb(125, 171, 153);">
<big><big>
Surf
</big></big>
<br><br>
Content
<br>
</td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
</tr>
<tr style="background-color: rgb(200, 103, 103);">
<td style="vertical-align: bottom; height: 1px; width: 1px; background-color: rgb(125, 171, 153);">
<img src="images/round-corners/bl.png" alt="" align="absbottom" style="width: 42px; height: 35px;"></td>
<td style="vertical-align: top; background-color: rgb(125, 171, 153);">
</td>
<td style="vertical-align: bottom; text-align: right; background-color: rgb(125, 171, 153);">
<img src="images/round-corners/br.png" alt="" align="absbottom" style="width: 42px; height: 35px;"></td>
</tr>
</tbody>
</table>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Troy III 272 Posting Pro · Answer 1 · 2009-09-10T11:50:38+00:00

Hi,
I'm new to the forum and have just come across this issue when testing my site for the first time in Internet Explorer (I normally use Firefox).
In IE, the 3x3 table renders with the two images in Row 3, Col 1 and Row 3, Col 3, both sized as 1px by 1px with a gap below them, showing the background colour through.
See attached screenshots, the first of Firefox's (correct) and the second of IE7's (incorrect) rendering.
The HTML code is as follows:

Please help me to get the IE rendering the same as FF's!
Thanks in advance,
J

What's so "correct" about FX there. All I see is that you are asking from IE to render a bug.

--min 0 Newbie Poster · Answer 2 · 2009-09-10T20:43:44+00:00

What's so "correct" about FX there. All I see is that you are asking from IE to render a bug.

Sorry, I meant correct as in what I wanted.

And thank you very much valonesal!

valonesal 0 Junior Poster · Answer 3 · 2009-09-10T20:48:59+00:00

No problem. Please mark the thread as solved if we have answered this question. :)