Anchor activate to active anywhere within enclosed block.

[CB150Special]

This is a styling issue but is there another way to do this ?

 

Here is my code.

<li style="display:inline-block;"><a href='home_page.php'>Home</a></li>

 

This line is in a list with the following CSS

    #list li {
        width: 70px;
        margin: 5px auto;    
        padding: 5px 15px 5px 15px;  
        border-radius: 5px;  
        border-style: solid;
        border-width: 1px;
    }

and the hover

   #list li:hover {
        background:#dbc9a0;
        cursor: pointer;
  }   

The hover works great and any time the cursor moves over the box, I get the change.

 

The problems is that the link only works if I click over the active anchor within the the box and not anywhere else in the box.

 

It does appear that anchors have minds of their own.

[requinix]

This is a styling issue

...and not a PHP issue. Moved.

 

It does appear that anchors have minds of their own.

Well, yeah. Of course they do.

 

You're applying a padding to the

, which means there will be space inside the

that is not covered by any child elements - like the . Now, consider what would happen if you were to instead expand the itself.

[CB150Special]

I know what the problem is but looking for a way to make it work.

 

Is it possible to check the width of a item and then pack the <a> name with spaces on either side to correctly fill the container ?

[Jacques1]

requinix just told you how to make it work. This is a simple cut-and-paste job. Oh, well, you need one extra line for display: block.

[CB150Special]

Maybe I'm blind but can you show me where exactly where requinix showed me how to make it work?  All I see is a discussion.

 

I already have display:block, if you read the question, I believe the issue is with padding and I can't see anyway around it

[Jacques1]

Dude.

• What you currently have: an automatically sized anchor within a fixed-sized list entry. That gives you a small clickable area in a big box.
• What you need: a fixed-sized anchor within an automatically sized list entry. That gives you a big clickable box.
• How to achieve this: Move the CSS rules from the list entry to the anchor.