Hi -

I have an incredibly vexing problem in a website I'm designing for my
research lab. I have spent two days trying one CSS tweak after
another with no results.

Basically, I have a members directory and when the name is moused
over, a picture of the member is displayed elsewhere on the page.
This is accomplished by making a div visible and works fine.

The problem is that when the picture becomes visible, it expands the
width of the table cell it is in despite being half its width. The
expansion looks to be just a few pixels, but it is distracting and
undesirable. I'd like to keep the table cell its current size or even
make it smaller, so making it bigger is not really an option.

Does anyone have any thoughts on how avoid this weird expanding table
cell? You can see the page at:

http://www.img.ufl.edu/new/memberdisp.php

Thanks,
Matt

mattsplatw@gmail.com wrote:

>
Basically, I have a members directory and when the name is moused
over, a picture of the member is displayed elsewhere on the page.
This is accomplished by making a div visible and works fine.
>

It does not work in Mozilla Seamonkey; no image shows. The page width
does increase, though.

This is invalid markup:
<a onmouseover="ShowContent('pic1'); return true;"
href="javascript:ShowContent('pic1')"
onmouseout="HideContent('pic1'); return true;"
href="javascript:HideContent('pic1')"show1 </a>
Multiple "href", non-standard protocol "javascript:", no fall back for
browsers with JS turned off.

It should be:
<a href="/path-to/pic1"
onmouseover="ShowContent('pic1'); return true;"
onmouseout="HideContent('pic1'); return true;"show1 </a>

The CSS property you should be using is "visibility", not "display".
"visibility:hidden" uses the same amount of space as "visibility:visible".
You can do the same thing with the ":hover" property for the <aelement
(a:hover). This way it works without JS.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

mattsplatw@gmail.com wrote:

I have spent two days trying one CSS tweak after
another with no results.

I'd guess that instead of CIWAH(tml) CIWAS(tylesheets) would be a more
appropiate group. Anyways, CSS tweaks are passee.

The problem is that when the picture becomes visible, it expands the
width of the table cell it is in despite being half its width. The
expansion looks to be just a few pixels, but it is distracting and
undesirable.

Can't see that happening (IE6, Opera 9 /Win2000). What browser, version,
platform?

I'd like to keep the table cell its current size or even
make it smaller, so making it bigger is not really an option.

Now there is your real problem: using nested tables for layout and
wanting sizes (like insisting on using only ca. 50% of my browsers
working area).

Does anyone have any thoughts on how avoid this weird expanding table
cell?

It's 03:30am and debugging CSS/JS/Tables is not an option, sorry.

Osmo