How to change 'complete' background on hover??

[Seminara]

Hello all

This is my first post as I'm a total newbie as far as css goes. I've attempted the following roll overs in CSS:

http://www.nores.org.uk/misc/Untitled-3.htm

The roll overs seem to work aside from the fact that the complete TD is not being filled - only that area covered by the text. Is this possible or do I simple need to use images in layers?

Note: I would like the solution - if it exists - to be as browser friendly as possible.

Cheers!
Steiner

P.S. The CSS style looks like this:

a.effect1:link {color: ;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
background-color: transparent;
}
a.effect1:active {color: ;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
background-color: #666666;
display: block;
background: repeat;
}
a.effect1:visited {color: ;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-style: normal;
background-color: transparent;
}
a.effect1:hover {color: ;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
display: block;
background-color: #666666;
}

 

[Vragabond]

1. You don't need to repeat styles for every pseudo class if nothing changes.

2. Try with display: block on everything and set height and width to 100%.

3. Pseudo classes must follow correct order to work correctly: :link, :visited, :focus, :hover, :active.

a.effect1:link, a.effect1:visited {
  text-decoration: none; 
  color: #FFFFFF; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 10px; 
  font-style: normal; 
  background-color: transparent; 
  display: block;
  width: 100%;
  height: 100%;
} 

a.effect1:hover, a.effect1:active {
  background-color: #666666; 
}

 

[Seminara]

Hello Vragabond, many thanks for this - it works really well. Only one slight problem. For some reason, the text in the TD seems to now gravitate towards the top of the cell - despite having a vertical alignment of 'middle'. Is there any way of adjusting this?

 

[oxEz]

Use some javascript in your <td>s like this:
<td onMouseOver="this.style.background='color2'" onMouseOut="this.style.background='color1'">gfgfds</td>

where color1 is your default color and color2 is the color when the mouse in on the button

 

[Vragabond]

oxEz?

Seminara, it is because you (seemingly) have the vertical align set to the table cell (td) and aligning an object that is 100% high is actually useless. Despite of the aligning the object will take up the same amount of total cell all the time. You could try putting vertical align to the link class, however, I don't think any browser will support that. You could solve your problem with some top padding but then you will have to trade off the height: 100% in favor of the fixed number. Alternatively, you could play with line-height to get it properly aligned.

 

[Seminara]

Hi Vragabond, re. your last suggestion of padding and line height, could you please give me a code example of what this should look like? Sorry to ask but this is all new to me.

Also, if you know of any good online tutorials for learning css (for beginners) I would really appreciate the link. I was starting to redo my website but am now wondering if I should wait until I could do it entirely via CSS.

On this point - one other question. Is a site built solely out of CSS viewable by older browsers?

Thanks again!

 

[theEclipse]

Seminara-

on the subject of css in older browsers, most do ok with it. CSS has been around long enough that people that are still working with older browsers can probably handle it. Check out

http://www.blooberry.com/indexdot/css

for information on specific properties. For example the "color" property has been supported since IE3/NS4/Op3.5.

I took a look at your site mentioned above and cant see the vertical alignment issues you speak of.

IE6 / Moz - WinXP SP2

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[theEclipse]

um...and I believe "free lance" is one word ;-)

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[Seminara]

Hi Eclipse, thanks for the link - I'll check it out now.

I've placed an updated file and CSS at:

http://www.nores.org.uk/misc/Untitled-3.htm

Strange, I still see it slightly above centre. I added padding to the arrows to try and match what I'm seeing - not sure this works.

Re. 'Free - Lance' you're right of course, but I'm playing with the word as Condottiero is an Italian word which stands for Medieval mercenaries (lances for hire).

From what I've got so far - would this be very difficult for me to place in a pure CSS layout?

Cheers
Steiner

 

[Vragabond]

Try adding [tt]line-height: 19px;[/tt] to your link declaration. As for padding solution, you might try something like [tt]padding-top: 4px; height: 15px;[/tt]. Be aware that padding and height together must not exceed 19px (because that is the size of the cell). Hope it helps. If it doesn't, I suggest you try playing around with those numbers.

 

[theEclipse]

sem-

interesting....here on my laptop the text and arrows are at the top of the cell. Same browser (firefox 1.0.4), same os.

also some other differences: at work I didnt see many things that I do now. ex.: the two images at the top left and the about us background. There were no arrows. The text aligned vertically to the center of the cells but when I hover over them the entire cell didnt highlite, just the line height of the text (in other words there was a stripe of grey that didnt change colors above and below that which did change).



Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[Seminara]

@Eclipse

Yes, that sounds like what I'm seeing - can't understand why they float towards the top.

Re. the missing images, I've only just added them to the folder so that's why you didn't see them before.

Cheers
Steiner