I'm stumped, nested tables?

[Evoir]

I am building this web page, and I have managed to avoid building pages with rolleovers and design based on nested tables. I build mainly in Dreamweaver, and with all this javascript, I sure won't do much hand editing (though normally I do)

I created images and rolleovers javascript in Image Ready 2.0

They came out great. I just can't get them to match up perfectly. I had to do them seperately because of the layout of the page.

http://www.sfcm.edu/index2.html

Basically, I see a little line where the table seperates the top from the left navigation, and when I put the stuff you'll see on the bottom of the page, all heck breaks loose.

What's the trick to getting slices from different parts of the page to line up? If I don't use a table to surround it, it lines up just fine but then the rest of the page doesn't work.

Can someone explain how this works? I am on deadline, of course. Oh, and I did NOT design this page. :D

http://www.sfcm.edu/index2.html

I beg you for help :)

[sheila]

All of your images do not have a border=0 tag on them. Most of them do, but you have some "spacer" images that do not. If you set their border=0 does that help?

[Evoir]

Hey Sheila, :)

I'm working on it.

[Evoir]

I think I got it. funny I just made the backround of that table match the images. Does it work for you now?

[sheila]

Originally posted by Evoir:
I think I got it. funny I just made the backround of that table match the images. Does it work for you now?
Huh. I thought of suggesting that, but didn't...

One thing I've found on my site, is that I have put images inside of tables with supposedly matching colors. But when I've sometimes viewed my site on other computers (especially on Macs), or even computers with (I guess?) a different type of monitor, then sometimes the color of the image is slightly off from the color of the table background. Mind you, it hasn't caused me to redesign my site. But I am keeping that in mind for the next time I do a site.

It looks fine to me on my ol' Pentium running Win98 using Mozilla 0.9.5.

[Evoir]

Thanks much Sheila. I do appreciate that you took the time to look. :D

[Mandi]

Sheila, I know that look! Do you mean that you get that effect when you use a hexadecimal color in the table background?

[Evoir]

I am building on a mac :D and use only websafe colors in photoshop.

Do you see that effect on the above page?

[sheila]

I used only "web-safe" colors on the pages where this ocurred for me, as well.

Here is one page where I have seen it happen:
http://www.thinkspot.net/materdei/

I can't guarantee that you will see it. On some computers (like my home computer) it looks fine and the colors match EXACTLY. Can't tell where the graphic ends and where the table background begins. But on some of the computers I used at work, I could tell the difference, and I didn't like it.

Anyhow, the images with the words in the gray areas were created with the exact same color as I've used in the background for the tables.
bgcolor="#C0C0C0"

This is a web safe color.

[Justin]

I think the color issue is more in how the browser renders the images. The actual background colors should render exactly the same, since it's a true-color 24 bit number you are specifying in Hex. But images are different.

I've found that IE does not render PNG images correctly when you use less than 256 colors; but Mozilla on the same machine does them exactly the way they looked in Gimp/Photoshop. Of course Mozilla doesn't always do transparencies correctly on PNG images, where IE does... I've reverted back to GIF personally because of these issues.

As for the table not lining up -- the problem might be all the extra white space you have. I noticed the code is neatly indented, which may look nice, but when you have white space in a <TD> before the content (most notably, when you start a new table inside a <TD>), some browsers will show a gap... I am pretty sure it goes against spec, but that's web browsers for you...

[Mandi]

I've always assumed that slightly patchy look is a monitor issue more than anything. I don't know if that's accurate though.

My own workaround is to avoid using hexadecimal colors where I want the background to match a graphic's background . . . instead, I create a tiny (say, 4x4 pixels) graphic that IS the same as the background (using my graphic editor's color picker) and make a background=tinygraphic.gif instead of bgcolor=#hexcode. It'll tile in and fill up the table or page ground, and you're guaranteed a match, regardless of monitor weirdness.

[PaulKroll]

I've always assumed that slightly patchy look is a monitor issue more than anything.
Sometimes it is. My flat panel has a subtle "texture" to the screen, as did all previous monitors I can remember. At least I think they did... :)

Part of that means I need to clean the silly thing. :)

And part of it may be that when you look at a truly, absolutely, solid color, your brain just doesn't deal with it well. I mean, there's no where in nature that you get such a blank wall of solid color... so I suspect there's some optical illusion effect going on there. (Similar to the one that you get if you stare at a wall, at a single point, for a minute, and then look away: you'll see a complementary-color image of the wall superimposed on whatever else you're looking at. And that's BEFORE the rum and coke...)

As Justin said, images are different: aside from PNG and GIF issues, jpgs don't necessarily match colors exactly. And then there are folks running 16 bit/65536 colors ("Thousands of colors" for Mac folks) mode, which in theory gives you enough to have exact matches match... um... exactly... but in practice, it give s One More Place for the computer to make a bad decision and suddenly, you have a visual glitch.

The reverse can happen too, by the way: if you work in "thousands of colors" mode, it's possible that a graphic that seems to be exactly matching your background on your computer, is actually NOT precisely the same, and folks with machines set to "millions of colors" (24 or 32 bit color) will readily see the difference.

[sheila]

Originally posted by Mandi:

My own workaround is to avoid using hexadecimal colors where I want the background to match a graphic's background . . . instead, I create a tiny (say, 4x4 pixels) graphic that IS the same as the background (using my graphic editor's color picker) and make a background=tinygraphic.gif instead of bgcolor=#hexcode. It'll tile in and fill up the table or page ground, and you're guaranteed a match, regardless of monitor weirdness.
Hey, that's a good idea. I never thought of that one! Thanks for the tip, Mandi!

[Evoir]

ACK!!!!! I thought I had this sorted out, and now that the client is looking at it, it is still messed up in IE on a PC. ARG.

I took out all the indenting, cleaned up all the spacing issues, made sure all the images are set to border=0

Anyone else have a suggestion?

[Evoir]

ah.. I got it. :)

it was valign="top" that fixed it. :):):)