SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css sprites and opera

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Just a wild guess here, but I wonder if the brand image is sitting over the top of it. You could try this:

    Code:
    .brand {
      padding: 36px 0 0;
      position: relative;
      z-index: 1;
    }
    It would be better to have that brand image as a background image.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! (A LOT)

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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the extra advice. I'll get to changing the mark-up now.

    Ta very much

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •