Hi All,

 

Hopefully someone will be able to help me out with this?

 

I'm having trouble getting pure CSS buttons to work in any of the Internet Explorer browsers ( 6 - 8 ).

The buttons appear fine in Firefox, Chrome and Safari but can't seem to get it to work in IE.

 

I've followed loads of different tutorials and I just can't seem to get this to work.

The other problem I have is that I'm working on a Mac, so I have to go the long way round to get screen grabs of IE.

 

The link is below:-

http://www.thevictoriankitchen.com/testsite/

 

Any advice would be a great help.

 

Cheers

JD

I can see what you mean. You can easily create that effect just with text rather than with images. This would most likely work in IE.

 

Regards,

Junior

The problem is the text has to be that font, so it has to be a graphic.

weird!! It's perfectly ok to use images as links like that, as long as you've got the link as text in the html code (which you have)

 

The links should be in a <ul> though.

 

As for the reasons it doesn't work... I have no idea but I have a feeling it has something do do with the fact that you have placed each link into an individual div.

 

Try placing them in a <ul> and try again...

Also, try changing those div classes to ids - that might work!!

 

so <div id="buttonhome"> instead of class

 

Shouldn't make a difference but you never know with IE.

 

Also, you should really be using a sprite for the whole nav menu, not 5 different sprites.

Cheers for everyone's help.

I actually found the problem.

 

For some reason IE didn't like the way I'd done the CSS in this website.

 

The original code:-

background: url(../images/button_cheese.gif) 0 0 no-repeat;

 

If you specify them individually IE plays ball.

 

background-image: url(../images/button_cheese.gif);

background-repeat: no-repeat;

background-position: 0 0;

 

Once again thank you for taking a look into this problem.

weird!! It's perfectly ok to use images as links like that, as long as you've got the link as text in the html code (which you have)

 

The links should be in a <ul> though.

 

As for the reasons it doesn't work... I have no idea but I have a feeling it has something do do with the fact that you have placed each link into an individual div.

 

Try placing them in a <ul> and try again...

 

Hello! what do you mean "as long as you've got the link as text in the html code"?

Hello! what do you mean "as long as you've got the link as text in the html code"?

 

It's already coded. Blind people need to use a screen reader that speaks the link text, but you don't want other people to see the link text (like Cheese in the code below) over the link image, so you give it a class and position it outside the viewing window (a screen reader will still read it even though it's invisible).

 

The html is:-

<a href="cheese.html"><span class="displace">Cheese</span></a>

 

and the css is:-

.displace {
position: absolute;
left: -5000px;
}