HTML/CSS Problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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:


Re: HTML/CSS Problem wrote:
Quoted text here. Click to load it
  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;"
  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 <a> element
(a:hover). This way it works without JS.

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

Re: HTML/CSS Problem wrote:

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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).

Quoted text here. Click to load it

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


Site Timeline