Browser/Tables headache

[Marbledog]

I'm having one of those "it looks fine on everything I test it on but not on the client's system" days. On my system, which is a Mac (I KNOW I KNOW - I really need to get me one of those other systems so I can check this stuff myself), this site looks fine. Apparently on non-Macs, when you minimize the screen of all the pages except the front page, the text "squishes up" and hides under the left border.

I've tried all sorts of combinations of tables and settings - really I have.

Could some of you pc people take a look and if you're seeing squishing in a small window also maybe look at the source code or just give me some idea of how to fix this?

Thanks

The site is http://episcopalretirement.org/ - look at any page except the front page.

P.S. I would put a smilie in here but I can't find one that's pounding his head against the wall.

[Jason]

I just checked it with IE6.0 and it looks fine, no matter how small I make the window. It's resizing itself normally.

[Marbledog]

Well, thanks Justin - that's narrowing it down at least. I know on the AOL/PC browser and on earlier versions of IE/PC it's messed up.

Has something to do with the table settings but I can't find a solution.

[Jeff]

With IE 6.0 I'm seeing the text get squished into the left menu at 640 x 480 (not that I would ever run the display that low)

See http://boatdesign.info/episcopalretirement

[0degree]

I'm using IE6/win2000 and am seeing the problem you are experiencing. Your code needs "tidying up"...This is most likely the result of you using Pagemill. You should seriously consider using an alternative like Dreamweaver. Initially, try to avoid using <div> tags which I think might be the cause of your problem (I just looked at your code really fast.)

Also try a HTML validator. FQuest provides one at http://www.aota.net/HTML_Validation_Tools/htmlcheck.php4

Hope this helps.

[Marbledog]

Thanks. The border is an image in the background for the page. The border is about 155 px. I started out with the left column of the table set at about 160 px. When I change it to 25% it's better.

It's still annoying though because it seems like if the column is set at 160 it should stay there no matter how much resizing you do.

:confuzed:

[Jeff]

I just spent a minute looking at it, but one quick fix which seems to solve the problem without changing the layout is to just move the top image outside the table (it's wider than 640 pixels minus the scroll bar and seems to be throwing the table out of order, though I didn't look long enough to see exactly why.)

If you simply add the top banner above the table, and then start the table everything displays fine in IE at 640 x 480 and just the same as you have it. Of course it should work the other way, but I hate troubleshooting misbehaving tables :P

[Justin]

A table with a specific pixel width will still crunch up when necessary... The fix is to place a single-pixel transparent GIF image in the cell, specifying the width as (for example) 160. This will force the cell to remain at least 160 pixels no matter what.

-- Justin != Jason :P

[Marbledog]

0degree thanks - I use GoLive and I like it a whole lot but I suspect it causes things like this from time to time. If it didn't I'd never learn any html because I only learn that when I have to fix something.

I'm running the html checker now - neat idea, hope it helps.

[Marbledog]

Jeff, Justin, Jason - thanks all.

that transparent .gif idea is a good one - I've used that before on a similar problem and forgot about it. thxxx

[Marbledog]

I love talking to myself here -

whoever mentioned the netmechanic thing that's a handy little tool. I took this site over from someone else, who apparently had used pagemill which is pretty old. I found all sorts of little unsupported attributes and things.

[Marbledog]

OK - new request for help here - I left it in the same thread because it's the same site.

I started from scratch on this one and uploaded a template.

I would really love to get some feedback from some different PC browsers - just please let me know if anything is goofy or messed up or doesn't look right. And please try resizing windows and stuff like that.

Really appreciate it: http://episcopalretirement.org/new.html

[sheila]

Regardless whether I use IE 5.0, Mozilla 0.9.5 or NS 4.61, when I resize, the lavendar-fade-to-white logo across the top will or will not overlay the maroon left-side menu image. Also, the menu across the foot of the page can likewise overlap (or not) the maroon left-side menu image, depending on how wide or narrow I resize my browser.

I'm not sure if that is a problem for you or not? I would think you would want the design to look the same (more or less) in whatever size browser, but maybe that is just me??

[Marbledog]

Thanks, Sheila - I should have been more specific. It's OK for the top graphic to overlay the left border - it should stay centered no matter what window size. And the bottom - the stuff below the horizontal line - I haven't decided whether to let it overlay or not - for now it's OK for it to overlay until I make my mind up.

The part I'm concerned about is the text to the right of the left border & button bar - that should stay completey separate from the left border. Also making sure nothing weird shows up in very obviously wrong places as was happening on AOL browsers earlier. So it sounds like the text overlap and "weird things" problem is solved at least on the browsers you tested.

Taking a site over from someone else is kind of weird in & of itself, especially when they used a very old design program

Thanks again - very helpful. Anyone have an AOL/PC browser to check this on?

[sheila]

Oh, yes, the content text stays separate from your left-column nav menu.

In all the browsers I viewed it in.

(in which I viewed it?)

;)

[0degree]

The text has now stopped overlapping the left column in any window size.

Tony.