Having Problems with CSS Buttons

[robertallen]

Hi all,

I am having problems with getting my CSS buttons to mouseover through the whole entire background color rather than just the text itself.

You can find it at http://www.esiroundtable.org (the 4 blue buttons on the right).

I’ve tried display:table and display:table-cell but to no avail.

Hope you guys can help me.

Here’s the CSS code…

#custom_post_widget-4, #custom_post_widget-6 {

background-color: #00529c;

font-family: MyriadProBold;

font-size: 210%;

margin-top: 10px;

padding-bottom: 20px;

padding-top: 20px;

text-align: center;

text-transform: uppercase;

border-radius: 20px;

}

#custom_post_widget-4 a, #custom_post_widget-6 a {

text-decoration: none;

color: #fff;

}

Any help would be greatly appreciated!

Thank you,
Robert

[Paulie_D]

I’m not seeing a `:hover` state in there.

[robertallen]

Oh I guess I’m missing that. Hmm…what would I put in there besides a background color change (which I would love to do after I figure this out?)

I’m thinking my whole code is completely messed up but I’m not sure where to start.

[Paulie_D]

>Hmm…what would I put in there besides a background color change

Whatever you want to change…it’s entirely up to you.

[robertallen]

Is there something other than that I need? I tried display:table-cell and display:table and it got funky when you mouseover it.

[Paulie_D]

> I tried display:table-cell and display:table

What are you trying to do? In general those aren’t properties I would associate with a hover.

[robertallen]

When you mouseover the text you can click on it and go to another page, but I am wondering if you can mouseover anywhere in that button, not just the text to go to the page the button is associated with.

Rather than create an image, I was thinking CSS.

[Paulie_D]

So you need the link to be as big as the button?

Firstly try adding `display:block` to the `a` element.

Because of the odd way some of the buttons are structured (list item with a p with multiple links inside) you may need to adjust some of the CSS properties &/or restructure the HTML.

[robertallen]

Exactly. I’ll try that.

I figured the p was probably what was doing it. Unfortunately I am using WordPress and they keep insisting on adding that in the widget block :(

[Author]

Posts