Mac Browser - Table problem

[shaeramsey]

Hello all!

I've lurked a bit but never posted.

I'm having a problem with my site in Internet Explorer 5 on a Mac that I'm not having in any other platform/browser combination as far as I know.

This kinda matters because its a graphic designer self-promo site, and there's a good chance potential employers will be looking at it on a Mac.

My site is set up to be centered horizontally and vertically so that each side takes up the same amount of space when you expand or reduce the window (and regardless of the text contained).

My page and table is set up with height and width of 100%. There are 7 columns. The first two columns (a tab and a spacer) and the last two columns (blank images to balance the first two) have fixed widths. The middle column also has a fixed width. The other two columns are set up at 50% each so that the whole page will center itself however big the window is.

There are links that take you from one page of this sort to the next one.

This works on every platform/browser combo except Mac/IE, where it just jumps around when you switch links. Is this just a Mac thing that I can't fix if I want to keep this percentage-based table thing? It doesn't seem to be related to the text inside, since that has the same tag treatments on each page.

Thanks!

[edited by: heini at 10:37 pm (utc) on Nov. 22, 2002]
[edit reason] no urls please / thanks [/edit]

[heini]

Hi Shaeramsey, welcome to WebmasterWorld!

What I did not quite grasp about your problem is if the pages never show correctly on Mac or only when you jump from one page to another?

[snowfox121]

I am on a Mac and do web design, but it will be impossible to answer this question without seeing the page. You can email me with the URL by clciking on my user profile.

[tedster]

I think we may be able to talk about the problem without looking at the page.

First thing to look at: does your HTML validate according to the W3C [validator.w3.org]?

Assuming valid code, do you mean that when you click on a link and bring up a new page, that page is no longer centered horizontally, vertically or both?

The layout approach you describe sounds very common. If it was just a 3 column page, I can't imagine why it would fail. I'm a bit suspicious, however, of those columns you describe as a "tab and a spacer". I'm not clear about why they are needed. Do they change for each page?

One handy way to see what's going on is to temporarily add "border=1" to the layout table. With a visible border you can better see where the distortion is coming from.

[shaeramsey]

OK... thanks for all the responses! Let me see if I can clarify and answer everyone's questions. I had posted my URL, which I thought would clear up any confusion, but I didn't realize I wasn't allowed to do that.

Heini:
The first page shows up more or less "correctly", with visually an even amount of space on the left and right of the center column.

When the second page is clicked on, the whole things shifts a hair to the left. The next link takes it a whole 'nother direction to the right, and the fourth link shifts it somewhere else. In other words, it isn't *exactly* giving me even spacing, even though any one page looks fine to the naked eye.

I suspect the column is resizing to accommodate different size text or something, rather than following the widths given.

The vertical centering is fine.

Tedster: I'll check but I'm pretty sure I've already validated my code with Homesite's validator. It's more of a case of trying to get this browser combo to understand even spacing than any kind of error.

About the "tab and spacer":

The tab is a design element. The text in it changes but the size doesn't. The spacer is a 10x10 clear gif, because I don't like cellpadding for a variety of reasons. It keeps the text from touching the other columns. The main left column and the main right column on each side of the middle column should look equal. I placed two columns with clear spacers at the end to balance out the first two, so that the two sides would be even.

Let me see if I can illustrate:

¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦
¦__¦_¦______¦______¦______¦_¦__¦

Ignore the horizontal lines - they were necessary to keep the drawing from collapsing.

The first column contains a graphic that I want there. The second is a spacer. The last two are there to balance out the first two. The middle one has a fixed width. The other two, main left and main right, are 50% each.

The links that take you from one such page to the next are in the main large left column, if that makes any difference.

As I said, it's working perfectly in other browser combos.

Thanks everyone!

[shaeramsey]

Incidentally, if anyone else would like the URL, I'll email it. Thanks!

[shaeramsey]

I didn't think about doing this, maybe this will help. Here is the basic structure (irrelevent code omitted):

<table width=100% height=100%>
<tr>
<td width=51>
<!-- a graphic element -->
<img src="tabthingy.gif" width=51>
</td>
<td width=10>
<!-- an invisible spacer -->
<img src="invisible.gif" width=10>
</td>
<td width=50%>
First bunch of content including navigation links
</td>
<td width=172>
<!-- graphic that should appear centered horizontally -->
<img src="graphic.gif" width=172>
</td>
<td width=50%>
Second bunch of content
</td>
<td width=10>
<!-- to balance other spacer -->
<img src="invisible.gif" width=10>
</td>
<td width=51>
<!-- to balance tab -->
<img src="invisible.gif" width=51>
</td>
</tr>
</table>

Thanks again everyone!

[tedster]

The tab is a design element. The text in it changes but the size doesn't.

The width attribute of a <td>, whether given in pixels or percentage, is never interpereted rigidly by any browser. They are always free (and they "must" be) to flex a cell's dimensions so the cell can accomodate its content. So it is not possible to dictate to the browser that the cell's content should not affect the cell's width. Browsers simply take that liberty when they "need" to - this is the first issue you're running into.

Second, a percentage width for a table cell means "percentage of the entire table's width". So you've given the browser an instruction for the table which is impossible to execute literally, because the two 50% cells already take up 100% of the table width, and there are 5 other cells with pixel widths to be rendered -0 going way over 100%

Nevertheless, most browsers will still give your code their best shot, and they will usually come out close to the layout you had in mind. I'd still bet that there are small variations in the width of the cells, depending on the content you're trying to render, but it's probably not visually upsetting on most browsers and platforms.

What you're hoping to do sounds like the table equivalent of a frameset - one that has cols="51,10,*,172,*,10,51" But tables don't act quite that way, and you've apparently found one browser that doesn't want to cooperate very much.

So first I'd make the table borders visible and see which cells are not behaving properly. Maybe you can see a way to hold them more in line.

But if you can't, and this browser is important for you, then you might need to rethink the layout altogether, perhaps leaving table based structure behind and working with divs and stylesheet attributes.

[shaeramsey]

>Second, a percentage width for a table cell means "percentage of the entire table's width". So you've given the browser an instruction for the table which is impossible to execute literally, because the two 50% cells already take up 100% of the table width, and there are 5 other cells with pixel widths to be rendered -0 going way over 100% <

That isn't what I learned... what I learned was that when a table has some fixed columns, those leftover divide any percentages among themselves. I can't recall the book I read this in at the moment, but I might be able to track it down. It was by a very respected web designer known for his fancy tricks, especially with tables. Not that that's a final authority, of course. In any case, it has always worked for me until now, and seems to be the only way I've found that reliably does this particular trick.

As for the tab, if the width is 51 and the image is 51, and there is no cellpadding or cellspacing and the tab size never changes, I don't see why it would change from one page to the next. (The "text" that changes is part of the graphic, not regular text). And it doesn't really seem to be changing - I suspect it is the 50% columns that are changing.

I'm not sure what good it will do to determine which cells are moving. Suppose it is the ones with the percentage widths. That doesn't really suggest to me a way to fix the problem. It may be that this is just something that the Mac/IE combo doesn't want to do.

Anyway, thanks for the input.

[jamesa]

I looked at the code on a IE5 Mac and I see what you mean. It seems to me that the column is "collapsing" when there is less than one line of text. In other words it acts as if the width attribute governs only the maximum width and not the minimum. Obviously A spacer gif wouldn't really help because the window widths would vary. The only workaround I could find is adding a couple of rows &nbsp;'s at the bottom or top of each column to force the layout to work. As long as it wraps at least once in each column it'll be fine.

[shaeramsey]

>I looked at the code on a IE5 Mac and I see what you mean. It seems to me that the column is "collapsing" when there is less than one line of text. In other words it acts as if the width attribute governs only the maximum width and not the minimum. Obviously A spacer gif wouldn't really help because the window widths would vary. The only workaround I could find is adding a couple of rows &nbsp;'s at the bottom or top of each column to force the layout to work. As long as it wraps at least once in each column it'll be fine. <

Hm... so you're saying add enough spaces somewhere in each 50% column to make a line of text wrap? I spose I could do that, if you're seeing that work. It's awfully kooky though - perhaps I'll add a comment tag above it explaining it to anyone who might look and think, "what the heck was she thinking?" Heh.

It seems strange that this should work because in my layout I don't have *any* lines that wrap - the navigation links on the left are identical, and the right is another list of links, which varies, but all are *far* smaller than the width of the column at any reasonable screen and window size (a word or two in small type). So I wonder why it isn't "collapsing" the same way for each page? I guess it's just one of those things.

Thanks for the idea!