enforcing display:block-defined background color to fill table cells

[retrositelover]

Hello,

on my sitemap, I use CSS to highlight cells (a:hover); display:block is dedicated to ensure the full cell colored on mouseover.

However, if I resize the browser to extreme levels (smallscreens) some cells have line breaks, and the one-word cells will then only color the background of this particular line, not the complete cell. Couldn't find a workaround in CSS/HTML for this problem; the line-height value doesn't seem to be decisive as this also occurs when not set.

thanks for reading
Joerg

 

[Vragabond]

I was unable to recreate the problem in either FF or IE7. Always, the entire cell will highlight on hover. Can you tell us which browser you're experiencing issues in?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[retrositelover]

It's only at extreme window sizes like ~300px width in cells with just one word, like in the middle column of the first table; tested this in Opera 10.10 (build 4742) and Epiphany 2.26.1 (gecko-1.9) / Ubuntu 9.04.

 

[retrositelover]

meanwhile, I've moved the demo, here ->

http://www.alice-dsl.net/js7/test.html

 

[ChrisHunt]

Sounds like a browser bug.

You could try applying the same background colour to td:hover (in addition to a:hover). Most modern browsers will apply it, and those that don't will still have the link styling to fall back on.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[retrositelover]

The old problem if one would define a 100% width/height -> that browsers wouldn't highlight ending exactly at the table border, and fail to center vertically?

In the above link/first posting, I tried to use that method, and it worked so far, but I guess having hundreds such table cells underneath, some browsers could have issues.

 

[retrositelover]

put the demo, here ->

http://www.alice-dsl.net/js7/demo/hovered_td_fullheight_highlight/test.html