homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
Rowspan problem with Opera
Inconsistency between IE & Opera in how rowspans are handled
CorkNBeans

10+ Year Member



 
Msg#: 128 posted 7:32 pm on Aug 13, 2003 (gmt 0)

I'm running into a frusturating problem with Opera. Take a look at the following code in both Opera & IE.

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="5"><img src="spacer.gif" width="50" height="200" border="1"></td>
</tr>
<tr>
<td><strong>First:</strong></td>
<td>some text</td>
</tr>
<tr>
<td><strong>Second:</strong></td>
<td>The text in this <br>
row might span <br>
2, 3, or 4 lines</td>
</tr>
<tr>
<td><strong>Third:</strong></td>
<td>One line of text.</td>
</tr>
<tr>
<td><strong>Fourth:</strong></td>
<td>Another line of text</td>
</tr>
</table>

IE distributes the height of this table equally between all of the various table rows.

Opera, however, allocates the minimum amount of height to the first 3 rows, then gives the last row all the left over space. This makes the table look very unbalanced.

Any suggestions on how this might be worked around?

Thanks,

Cork B.

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 128 posted 8:26 pm on Aug 13, 2003 (gmt 0)

Welcome to WebmasterWorld, Cork B.

A couple questions: Is this really for tabular data, or is it a page layout table? Does this table hold dynamic content? Will the blank image be an actual image in the final product?

Or to ask the more general question, what is the purpose of the rowspan?

If you're only using the rowspan to create a margin-left for the table, you might consider using CSS. The thing is, user agents are allowed to take such liberties with table cell height and you will probably find other examples of differing height allocation.

You could give each td an exact height in pixels, and use some padding to ensure that no two cells have content that bumps up against the other too closely. I know this alters the aesthetic a bit, but at least it looks regular and consistent cross-browser, and not too very bad in any case.

CorkNBeans

10+ Year Member



 
Msg#: 128 posted 9:11 pm on Aug 13, 2003 (gmt 0)

A couple questions: Is this really for tabular data, or is it a page layout table? Does this table hold dynamic content? Will the blank image be an actual image in the final product?

Yes, this table will be holding dynamic content. Which is where my formatting problem comes into play. I'll never know ahead of time how much height should be allocated to a given row. Most of the text contained in this table will grow or shrink considerably. I was hoping to contain all of this in a table that would grow and shrink specific row heights as needed and spread the available height between all the rows. [ Like IE does ] As soon as I start putting static heights on rows then I limit the table's ability to react naturally depending on how much content I hand it.

The image on the left will be an actual photo with a static height. For aesthetic reasons I'm trying to get the first row of text to line up with the top of the photo and the last row of text to line up with the bottom of the photo. All the rows in between should be evenly spaced so that all the table comes out looking balanced. Instead of one row being out of sync by being overly tall. [ Which is what Opera does ]

I might just be screwed here. Opera represents a very small portion of our web traffic. The perfectionist in me would really like to find a solution though. :)

Cork B.

Hester

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 128 posted 2:32 pm on Aug 14, 2003 (gmt 0)

OK, Opera appears to have a different drawing method. To cater for this, you can put a spacer image in each cell and make the height a quarter of the row image, less 2px for the table borders. This then makes the cells equal except for the second one, as the text forces it to be taller than the image. (Depending on the font used.) But at least there's some consistency to the cells.

In Opera 7.11, it works great but the first row is too tall. There's a gap at the top and bottom caused by the second row.

In Mozilla 1.4 the gap is there again.

In IE6/Win the gap is gone and the cells are completely even. But remember that you are adding a border to the image so the cell gains extra height! (In your example, that gave the top cell a thicker border.)

The best thing to do is to also set the doctype to XHTML as this helps IE6.

The code now looks like this:

<!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" xml:lang="en" lang="en">
<head>
<style>

img {padding:0; margin:0;}

</style>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" height="200">
<tr>
<td rowspan="5"><img src="spacer.gif" width="50" height="200" border="1"></td>
</tr>
<tr>
<td><strong>First:</strong></td>
<td><img src="spacer.gif" width="4" height="48" align="right">some text</td>
</tr>
<tr>
<td><strong>Second:</strong></td>
<td><img src="spacer.gif" width="4" height="48" align="right">The text in this <br>
row might span <br>
2, 3, or 4 lines</td>
</tr>
<tr>
<td><strong>Third:</strong></td>
<td><img src="spacer.gif" width="4" height="48" align="right">One line of text.</td>
</tr>
<tr>
<td><strong>Fourth:</strong></td>
<td><img src="spacer.gif" width="4" height="48" align="right">Another line of text</td>
</tr>
</table>

</body>
</html>

CorkNBeans

10+ Year Member



 
Msg#: 128 posted 6:45 pm on Aug 14, 2003 (gmt 0)

OK, Opera appears to have a different drawing method. To cater for this, you can put a spacer image in each cell and make the height a quarter of the row image, less 2px for the table borders. This then makes the cells equal except for the second one, as the text forces it to be taller than the image. (Depending on the font used.) But at least there's some consistency to the cells.

Thanks Hester for your suggestion.

I was originally avoiding using spacer images because it would require that I set static heights. This would obviously limit the table's ability to grow & shrink individual rows as needed. Since this table will be filled with dynamic content, this would be ideal.

Based on your suggestion though I took another look at using spacer images and static heights. What I ended up doing was making some "best guesses" about how much height an individual row will typically need. I then plunked a spacer image matching this height into that cell.

Since the content is dynamic I knew my "best guess" would frequently be wrong. To address this, I didn't allocate all the available height to the spacer images. For example, if the image on the left is 200 pixels in height, I only allocated 190 of those pixels to the spacer images.

This allows IE to still grow & shrink certain rows based on need. For Opera, it provides some hard guidelines so that Opera doesn't end up dumping 60 pixels (or more) of unneeded height into the very last row. [ I still think this is a stupid browser behavior. ]

With this solution the worst case scenario is that Opera allocates 10 extra pixels to the last row. It also limits the degree to which IE can react dynamically. Both of which I think I can live with.

On second thought, I think I'm just going to generate a PDF....... :)

Thanks for the help!

Cork B.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved