Css sprites and opera

HTML & CSS
1

Hiya,

I read an article on A List Apart about css sprites and decided to use this method for a navigation bar.

I got it working well in Chrome, IE, FF Safari BUT NOT OPERA??

Welcome to Tralee | Home

Does anyone know why the following is not working in Opera. (the links are not set up yet- i’m concerned about the hover states right now)

Any help or advice at all much appreciated,
Thanks in advance.

Eve

2

Just a wild guess here, but I wonder if the brand image is sitting over the top of it. You could try this:

.brand {
  padding: 36px 0 0;
  position: relative;
  z-index: 1;
}

It would be better to have that brand image as a background image.

3

Thank you! (A LOT)

It was changing the brand image to a background image that made it work.

4

I’m glad to help, although I feel compelled to let you know that it’s not actually valid code to have a block level element (the <div>) inside an inline element (the <a>).

A better approach would be to separate the “welcome to Tralee” text from the background image. Then put the background image on the container itself (container_12). Then under the menu have the H1, and you could then move the actual H1 text off screen and replace it with the title image.

That way, you’ve got a more reliable setup that the validators will like too.

5

Thanks for the extra advice. I’ll get to changing the mark-up now.

Ta very much

6

I tired to do as you said by splitting the text from the image and using a background image on the container div but i couldn’t get it all to align properly or even show properly using min-heights etc so I created a text image and placed this inside the brand div (which has the background image) positioned absolutly over the background image…

perhaps this is what you meant or perhaps not…i feel like my code might be a bit jumbled now.

Just wondering if you had an opinion. (still located at link in previous post)

Thanks in advance