Why Am I hovering text only and not entire cell?

[MRoberto]

Please look at my website and let me know if you have any ideas. My hover effect to change background color is only changing the color behind text that is in a cell, and not the whole cell itself.

http://www.microberto.com/greenacres/dept_building/building_home.htm

 

[monksnake]

I can tell you now that your anchor tag is not shown as display:block. Anchor tags are inline elements so the hover will only cover the items within the anchor tags. Put display:block on your anchor tags in the navigation area, and you may have to specify a width and height as well, but it should take care of it.

<.

 

[MRoberto]

not sure exactly where I need to put the display:block attribute?

 

[monksnake]

Right here:

<style type="text/css">
<!--
[!].bluelink a {display:block;}[/!]
.bluelink a:link {text-decoration: none; color: #0000FF;}
.bluelink a:visited {text-decoration: none; color: #0000FF;}
.bluelink a:active {
	text-decoration: none;
	color: #0000FF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.bluelink a:hover {text-decoration: none; color: #0000FF;}
-->
</style>
<!-- For Black Link Colors in Menu Nav Bar and Menu Box -->
<style type="text/css">
<!--
[!].blacklink a {display:block;}[/!]
.blacklink a:link {text-decoration: none; color:#000000;}
.blacklink a:visited {text-decoration: none; color: #000000;}
.blacklink a:active {
	text-decoration: none;
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.blacklink a:hover {text-decoration: none; color: #000000;}
-->
</style>

<.

 

[MRoberto]

TYVM. It works.

However I had to do it in the .rollover css not the black or bluelinks.

awesome,

thank u

<style type="text/css">
<!--
.rollover a {display:block;}
.rollover a:hover {
	text-decoration: none;
	background-color: #7BB992;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
.rollover ul {list-style-type: none;}
.rolllover p {
	margin:0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
-->
</style>

 

[monksnake]

Sorry my bad, glad to see you got it working.

<.

 

[monksnake]

Taking a look at it, you may want to specify a width and height on the anchor tags (not so much the height as the width) so that you don't have to exactly mouseover the text to pop up the highlight. That you would do where I specified by mistake earlier in the CSS (blacklinks and bluelinks).

However, that's just a matter of taste.

<.

 

[MRoberto]

yeah I was just looking at that. I want the mouseover effect to be on the whole table cell, not just the text. Its weird the first td changes color anywhere in the box when the rest of them dont.

I will look at fixing now.

thanks again

Mike

 

[MRoberto]

Why do you say that it needs to be in the bluelinks and blacklinks section? Those css are basically just to have the color of my links black in the menu box and nav drop-downs. Everything else on the page in the main body section of the page will be blue as normal.

anyways I tried adding

.rollover a {display:block; width;151;}

both into the blacklink css and the rollover css and it didnt work. is that the right syntax? 151 is the width of the cells in that table

 

[MRoberto]

got it. didnt have the px in there

 .rollover a {display:block; width;151px;}

 

[bam720]

 .rollover a {display:block; width[red]:[/red]151px;}

Also you may need to change the semicolon to a colon as denoted in red

 

[monksnake]

After looking at your code, it appears you only need to add it to the .blacklink class declaration. I'm saying to apply to .blacklink because it's best not to resize the anchor tag on a hover.



The following code doesn't even need to be written as such, for most it is easier to understand to change this:

.rollover a {display:block;}
.rollover a:hover {
	text-decoration: none;
	background-color: #7BB992;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

to this:

.blacklink a {display:block;}
.blacklink a:hover {
	text-decoration: none;
	background-color: #7BB992;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

and the declaration for width is this:

.blacklink a {
   display:block; 
   width[!]:[/!]151[!]px[/!];
}

<.