A href hover CSS

HTML & CSS
1

Hey,

Can anyone help me with this page: http://www.loumolloy.com/testing.php

On page load you will see a rather off putting lightbox effect box. You can see the tabs “Step1, Step-2, Step-3”…

Now when i hover over them they should be blue, not straight away… Can anyone help?

How can i change the styles so that when i first see the page the tabs are in white and when i hover over they are blue?

Thanks again

2

For me running Chrome dev latest on Mac, they are white at first at blue on hover.

Don’t really see what the problem is, can you explain further? Have you tried different browsers to isolate the issue?

3

Hey,

I have attached what i see, check the image…

I am using firefox and i can see the blue text sits behind the white text when it shouldn’t be like that. The blue text should only appear on hover…

Can you see what i mean? See attached image.

Thanks again

4

Ah, I see the problem now, thanks for explaining further. Will try and help.

5

I guess it comes pretty natural because the li tag has the blue text as background by default in your CSS, and the hover background image has transparency so that the blue shines through.

ul.tabs li.tab-1 {
  background:url("images/step-1-on.png") no-repeat scroll transparent;
  width:78px;
}

Restructure that and the problem should be gone.

Another simpler solution is to just add a background color to your CSS for the li anchor/link default styling. For example:

ul.tabs li.tab-1 a {
  background:url("images/step-1.png") no-repeat scroll #151515;
  width:78px;
}

Hope it solves the issue, only tried messing around in Firebug.

6

Screenshot of the simple solution of adding a background color to the anchor:

http://skitch.com/nintera/n6wgc/fullscreen

7

Hey,

Thanks for taking the time out to help me :slight_smile:

If you take a look at the page now: http://www.loumolloy.com/testing.php

You can see that it does work, however the hover stated is not right, i will attach another image of what it should look like, the hover image is bigger in height.

See image attached. Can i do this?

Thanks again :wink:

8

Great fix, works perfectly on both Chrome and Firefox on my Mac at least.

Can’t see the attachment because it’s pending approval so if you could upload it somewhere and link to it, I may be able to help. Maybe, because I don’t know if I have time today.

I’m off for an hour or so now, just so you know, so see you later!

Upload options

FTP of course

http://tinypic.com/
I dearly recommend Skitch for screenshots, it’s truly amazing if you have a Mac.

And if you’ve got Twitter there’s plenty of others, such as yFrog, built into most clients or you can use the website, just Google or check your client. If you don’t have Twitter, get it! :wink:

Anyway, you could also email me the attachment, my email is on my website in the signature.

9

Hi Billy, I’m jumping in this late, however, post the image as a direct link here, that way we don’t have to wiat for it to be approved.

I hope that what you want will be clear once the image is sshown :slight_smile:

10

Hey Ryan,

Hopefully you can help.

I have uploaded the image onto the server, here it is:http://www.loumolloy.com/test.jpg

You will see how it needs to be, at the current location where i am creating it it doesnt quite look right, see here: http://www.loumolloy.com/testing.php

Can you help mate?

Thanks

11

Hi, on the anchors hover you set the background to transparent, aka parent backgrounds will now show.

The nearest parent has a background (the <li>). The <li>'s image is sliced in a way that the text appears further down. THe image itself needs to be corrected.

12

Hey,

The images look slightly better now, just one thing, how can i get the tabs to site nicely on top of the first Question??

Like the test image i showed…

Any ideas?

Thanks

13

Hi, not quite sure if I understand, but if you want the “1) Are you” and then the radio button on the same line, you’d haveto change the HTML (since you have them on different rows) to have them be in seperate <td>'s within the same <tr> :slight_smile:

14

No sorry i meant where it says “Step 1, Step 2, Step 3”…

I want these to be just above the first question. If you look at my reply in #7 you can see the image shows how it’s supposed to be…

Any ideas?

15

Hi, have you managed to fix it? It’s sitting nicely along that line :slight_smile:

16

yes i fixed this :slight_smile: thanks Ryan