IE issue with images in tabs

Discussion in 'CSS' started by duklaprague, Jan 26, 2008.

  1. #1
    Hope someone can help with this. I've been trying to use rollover images in tabs - the best way to explain is probably just to link to what I mean - towards the bottom of the page below.

    Basically the images are changing as you rollover them correctly in safari and firefox, but not in IE(6) :

    I had a link here, but unhelpfully can't seem to post it.

    For the tabs, the CSS is currently :

    .TabbedPanelsTab1 {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 0px;
    margin: 0px 40px 0px 0px;
    font: bold 1em sans-serif;
    background-color: #FFFFFF;
    list-style: none;
    color:#999999;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width:80px;
    height:110px;
    text-align:center;
    background-image:url(step101.jpg);
    background-repeat:no-repeat;
    }

    x4, called .TabbedPanelsTab1, .TabbedPanelsTab2, .TabbedPanelsTab3, .TabbedPanelsTab4

    and for corresponding styles each for hover and selected :

    .TabbedPanelsTab1:Hover {
    background-color: #FFFFFF;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step105.jpg);
    background-repeat:no-repeat;
    }

    .TabbedPanelsTab1:Selected {
    background-color: #FFFFFF;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step105.jpg);
    background-repeat:no-repeat;
    }

    If anyone could help me get this working correctly in IE that would be much appreciated.

    Cheers.
     
    duklaprague, Jan 26, 2008 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you should clean up your css to start with

    .TabbedPanelsTab1 {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 0px;
    margin-right: 40px;
    font: bold 1em sans-serif #999;
    border: 1px solid #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width:80px;
    height:110px;
    text-align:center;
    background-image:url(step101.jpg) no-repeat #fff;
    }

    What is this line for?
    list-style: none;

    List style is for lists, you're setting the css for a div.
     
    Crimsonc, Jan 26, 2008 IP
  3. mikoleg

    mikoleg Peon

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    damn IE sucks :( i hate IE
     
    mikoleg, Jan 26, 2008 IP
  4. James Gober

    James Gober Guest

    Messages:
    40
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I seem to have the reverse issues, it usually ends up being FF that causes the problems not IE7 for me.. Now IE6... ya I've had way more problems with IE6 than anything.

    I would agree, clean up the css.. and alter the css to work for IE6 specifically.. example below:

    
    * html #TabbedPanelsTab1 { /*IE 6 only CSS */
     margin-left: 0px;
    }
    
    Code (markup):
     
    James Gober, Jan 26, 2008 IP
  5. duklaprague

    duklaprague Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Cheers for the replies -

    Basically I've managed to get it to change each tabs backround image to the same image, using :


    .TabbedPanelsTab {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 0px;
    margin: 0px 40px 0px 0px;
    font: bold 1em sans-serif;
    background-color: #FFFFFF;
    color:#999999;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width:80px;
    height:110px;
    text-align:center;
    background-image:url(step101.jpg);
    background-repeat:no-repeat;
    }


    .TabbedPanelsTabHover {
    background-color: #990000;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step5.jpg);
    background-repeat:no-repeat;
    }

    .TabbedPanelsTabSelected {
    background-color: #FFFFFF;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step5.jpg);
    background-repeat:no-repeat;
    }

    So really, I'm looking to have it whereby the background image changes to a different image for every tab.

    Cheers.
     
    duklaprague, Jan 27, 2008 IP
  6. duklaprague

    duklaprague Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I have managed to get it working now using that IE7.js script, although not without a catch - although the thing now works in IE, the first tab no longer defaults to the selected (ie colour) image.

    So each tab has the following CSS (each numbered 1-4)

    .TabbedPanelsTab1 {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 0px;
    margin: 0px 30px 0px 0px;
    font: bold 1em sans-serif;
    background-color: #FFFFFF;
    list-style: none;
    color:#999999;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width:80px;
    height:110px;
    text-align:center;
    background-image:url(step101.jpg);
    background-repeat:no-repeat;
    }

    .TabbedPanelsTab1:Hover {
    background-color: #FFFFFF;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step105.jpg);
    background-repeat:no-repeat;
    }

    .TabbedPanelsTab1:Selected {
    background-color: #FFFFFF;
    color:#24303C;
    border-bottom: solid 1px #FFFFFF;
    background-image:url(step105.jpg);
    background-repeat:no-repeat;
    }

    Is it possible to set the first tab to be selected when the page loads?
     
    duklaprague, Jan 27, 2008 IP