Rollover Buttons work in certain browsers in certain ways

Redgie

Redgie

Redgie

Associate
Joined
18 Nov 2008
Posts
2,430
Location
Liverpool
Hey all, problem with HTML / CSS / Browsers here!

My site (http://www.cypherhosting.co.uk/) has buttons at the top that apply a rollover effect when you hover the mouse over them, the effect simply lightens the buttons, the button is also a link to another page, therefore making the clicking hand appear.

This works in certain browsers in certain ways, E.G:

Opera - Works Perfectly
Chrome - Works Perfectly
Firefox - Hand appears on hovering, but no rollover effect
Internet Explorer - No hand, no rollover effect

I'm trying my hardest to avoid JavaScript for compatibilities sake, and have tried doing conditional CSS spreadsheets but the concept doesn't work as well as I'd like.

Thanks for any helps you can give me!
 
Use CSS sprites, easy enough and CSS only.

The cursor in IE could probably be solved by

a:hover { cursor: pointer; }
 
Thanks guys, I'm not entirely sure what I did, as I restructured the whole site a bit, but I certainly removed the anchor tags, so that may of had something to do with it.

What's the best way of linking a Div tag to a webpage then without an anchor tag?
 
Que?

What are you trying to achieve?

You want a div to be a link?

Just put a link inside the div and do "Display: block;" on the link. it'll fill out to the size of the div.
 
Don't waste your time reading, read edit!

Okay so I used what you said and the menu buttons are working great (Thank you!). Since then we have removed the map approach to the central image and replaced it with tables that have hover effects, the idea is for each of these to provide a hover affect and to link to somewhere, so I thought I'd use the same approach as you said to use on the menu buttons:

Code: 
<td><div class="AdSection1"><a href="index.php" style="display: block"></a></div></td>

But this does not provide a link any bigger than the text placed between <a></a>, and as I don't want to place any text between them, that becomes a problem, any ideas?

Thanks!

EDIT: Never mind, applied a style of 100% height & width and it fixed it, thanks anyway :)
 
Last edited:
Word of advice, don't use tables unless you're displaying tabular data. Race results etc...

it's bad web design :)
 
Believe me that I know, I cannot stand tables, I've always dealt without them, but in this instance it's just temporary so we can get an idea of what it looks like :)
 
Why are you using so many divs on the menu? Surely a single div with a <ul> which you then style via css would be better?
 
You must log in or register to reply here.
Back
Top Bottom