Table cell full size click

Table cell full size click

The table cells change color as you hover over the box and I also need to make the box fully clickable rather than just the text in the middle without changing the height and width of the boxes. I've wrapped my divs in a tags but to no avail.

div.container {    display: table;  }  div.column {    display: table-cell;    height: 100px;    width: 100px;    vertical-align: middle;    text-align: center;    background-color: #c2ad80;  }  div.column a {    color: white;    font-family: Arial;    font-size: 12px;    text-decoration: none;    height: 100px;    width: 100px;  }  div.column:hover {    background-color: #a2884f;  }

    
 Solution Assessment    
    
 Design    
    
 Build    
    
 Deploy    
    
 Test    
    
 Live (BAU)    
    

Answer by CBroe for Table cell full size click

You need to add display:block for the links ? otherwise width and height are not allowed to have any effect, because a is an inline element.

(And then you might want to add line-height:100px as well, to have the text content of the links still vertically centered.)

Answer by Praveen Kumar for Table cell full size click

Add a display property for with either block or inline-block, as inline elements do not have box model.

div.container {    display: table;  }  div.column {    display: table-cell;    height: 100px;    width: 100px;    vertical-align: middle;    text-align: center;    background-color: #c2ad80;  }  div.column a {    color: white;    font-family: Arial;    font-size: 12px;    text-decoration: none;    height: 100px;    width: 100px;    display: inline-block;  }  div.column:hover {    background-color: #a2884f;  }

    
 Solution Assessment    
    
 Design    
    
 Build    
    
 Deploy    
    
 Test    
    
 Live (BAU)    
    

Answer by user5173426 for Table cell full size click

div.column a {    color: white;    font-family: Arial;    font-size: 12px;    text-decoration: none;    height: 100px;    width: 100px;    display: block;    //add display:block; since Anchor tags  are inline elements.  }  

Answer by Cheslab for Table cell full size click

There's much simpler solution

div.container {    display: table;  }  div.container a {    display: table-cell;    height: 100px;    width: 100px;    vertical-align: middle;    text-align: center;    background-color: #c2ad80;    color: white;    font-family: Arial;    font-size: 12px;    text-decoration: none;  }  div.container a:hover {    background-color: #a2884f;  }

    Solution Assessment    Design    Build    Deploy    Test    Live (BAU)  

Answer by Davington III for Table cell full size click

I've come up with the solution having asked another bod in the office.

CSS Changes

div.column a {      color:white;      font-family: Arial;      font-size: 12px;      text-decoration:none;      display:block;      height:100px;      width:100px;      display: table-cell;      vertical-align: middle;  }  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72