Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    86
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question CSS image links trouble

    Hi all.

    I was wondering if anyone can help me out with some image css links i have been working on.

    The buttons seem to work fine in FF but they dont load correctly in IE 7.

    Please visit my site by clicking here to see what i mean.

    The problem is with the buttons on the right.

    I would suggest you view the site in FF first so you can see how it is supposed to work.

    The css code for the hover image links is as follows:

    Code:
    .rolloveravanti a {
    display:block;
    width: 230px;
    height:51px;
    background: url("img/banner_navigation_07.jpg") 0 0 no-repeat;
    }
    .rolloveravanti a:hover { 
    background-position: 0 -35px;
    background: url("img/images_07.jpg") 0 0 no-repeat;
    color: #049;
    }
    .rolloveravanti a:active {
    background-position: 0 -70px;
    color:#fff;
    }
    If anyone can shed some light on this matter I would be very greatful as it has been causing me major trouble!

    Cheers

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xdous,
    Your going to have to be more specific when explaining the problem. I see no difference between IE7 and FF2.

    I can show you a CSS rollover that won't flicker like yours does. Your method has to download the hover image when you mouseover the link.
    This method has button and the hover image all in one.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    86
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for your example.

    I have tried to amend my code but this does not work for some reason. I am guessing i am doin something wrong.

    I have tried copying your code and amending it with my images and sizes but it does not work

  • #4
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    I see the problem, and it isn't your images. I THINK it's because you have that element floating to the right. Try replacing your sidebar style with this:
    Code:
    #sidebar
    { width:215px; 
      padding:10px;
      margin-left:15px;
      float:left; 
      font-size:80%;
    }
    And follow the advice of Excavator about the image rollover. It wasn't intended to fix your problem, or at least not the one you were asking us to fix. It's merely a trick that combines your link image and rollover link image into one. This prevents the lag-time the image causes when someone hovers over a link for the first time (which is caused because the image has to load).
    Last edited by Majoracle; 01-07-2008 at 10:19 PM.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    86
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you for your response Majoracle but this still does not seem to fix the problem is there any other tips. I hate IE its the worst!!

  • #6
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Your site looks the same to me in FF2 and IE7. I would certainly implement the pixy technique suggested by excavator for the rollovers. It will prevent the delay when you first hover over a button.

    John


  •  

    Posting Permissions

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