|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
March 13th, 2004, 06:07 AM
|
||||
|
||||
|
CSS and tables problem
Hello there, at the moment I have this CSS which I apply to a table cell by <a class='menulink' href='etc etc'
Code:
A.menulink {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:link {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:visited {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:active {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:hover {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #000000;
padding: 0px;
}
The problem I have is with the width:138px. If I apply this class to a cell that isn't 138px, it automatically goes that size. And if I delete the width:138px lines, then the class only works when you go over the word, not when you hover over the cell. So does anybody know how to change the CSS so that a width doesn't have to be defined so that I can apply the class to any size cell? Thanks
__________________
-annihilate- Personal Site | The Staking Machine - Turning gambling into investing
|
|
#2
March 13th, 2004, 06:09 AM
|
||||
|
||||
|
Just had a thought. If I change the width line to 100%, that should work. I'll give it a try now.
It does :-) Last edited by annihilate : March 13th, 2004 at 06:18 AM. Reason: Found the solution
|
|
#3
March 13th, 2004, 06:41 AM
|
||||
|
||||
|
yeah, width 100% should work, but you don't have to supply a width, as a block-elemet has width 100% by default
by the way you could cut down a bit of that css, a most of the style is inherit. just remember to supply a color, when you set a background color, aslo remember the correct order of the pseudo-classes a:link a:visited a:hover a:active http://www.w3.org/TR/CSS2/selector....-pseudo-classes Code:
A.menulink {
TEXT-DECORATION: none;
display:block;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:link {
BACKGROUND-COLOR: #666666;
}
A.menulink:visited {
BACKGROUND-COLOR: #666666;
}
A.menulink:hover {
BACKGROUND-COLOR: #000000;
}
A.menulink:active {
BACKGROUND-COLOR: #666666;
}
Last edited by Akh : March 13th, 2004 at 06:43 AM.
|
|
#4
March 13th, 2004, 06:54 AM
|
||||
|
||||
|
Thanks for your reply. I will cut down some of the CSS like you said. However, I tried removing all the 'width' lines and it didn't work properly. The cell only changed colour when the mouse went over the text in the cell that had the hyperlink. I want the whole cell to be a hyperlink, and for that to work, a width must be specified. So I have it at 100% and it all works fine now.
|
|
#6
March 13th, 2004, 11:41 AM
|
||||
|
||||
|
MSIE shrink-wraps. The converse is that it expands elements to contain the content.
cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS and tables problem |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
