#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11

    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
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11
    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
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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.h...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.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Surrey, UK
    Posts
    224
    Rep Power
    11
    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.
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    yeah, it might not work in msie,
    but in all the other browsers mozilla, opera & konq,
    it works fine without supplying a width.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    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.

IMN logo majestic logo threadwatch logo seochat tools logo