SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE issue with images in tabs

    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) :

    http://www.pioneerautomotive.co.uk/indexnew701.shtml

    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;
    }

    The full CSS page is at :

    http://www.pioneerautomotive.co.uk/S...anels701.shtml

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

    Cheers.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically I've managed to get it to change each tabs backround image to the same image at

    http://www.pioneerautomotive.co.uk/indexnew401.shtml

    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Looking at your first example you are linking to Dean Edwards's IE7 script (which will provide hover on elements other than anchors) but you have placed it in a stylesheet link. It should be a script element like this:

    Code:
    <!--[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
    <![endif]-->
    Adding that code and removing this:

    Code:
    <link href="IE7.js" rel="stylesheet" type="text/css">
    Should make your first example work as expected. You wouldn't then need Stu Nichols drop down code because the hover is covered by the javascript anyway.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you - that was a real d'oh! moment!

    So it's working here :

    http://www.pioneerautomotive.co.uk/indexnew101.shtml

    Where 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, as was happening here :

    http://www.pioneerautomotive.co.uk/indexnew401.shtml

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is it possible to set the first tab to be selected when the page loads, as was happening here :
    Add a class to the body tag on the home page like so:

    Code:
    <body class="home" onload="MM_preloadImages('step105.jpg','step106.jpg','step107.jpg','step108.jpg')">
    Then target the tab through that home class.

    e.g.
    Code:
    .home .TabbedPanelsTab1{
        background:#fff url(http://www.pioneerautomotive.co.uk/step105.jpg) no-repeat;
    }
    The image will show its rollover state only on the home page.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nearly - but it stays highlighted even when the other three are moused over :

    http://www.pioneerautomotive.co.uk/indexnew101.shtml

    But I'm trying to get it so that the first tab defaults to the highlighted background image when the page loads, but reverts back to step1.jpg when any of the other three are highlighted, like this :

    http://www.pioneerautomotive.co.uk/indexnew401.shtml

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,
    Nearly - but it stays highlighted even when the other three are moused over :
    Well that's the way you would usually do it with css .

    I think you need to consult the documentation for that spry menu as that behaviour would be controlled by the javascript.

    It looks like the JS ads a class of "TabbedPanelsTabHover" and "TabbedPanelsTabSelected" dynamically to the element and therefore oyu only have one hook to change which means you can only refer to the same image which is waht is happening.

    You had a rollover effect by changing the css from that described in the documentation and you applied hover effects to the tabs.

    e.g. You had this:

    .TabbedPanelsTab4:Hover

    when in fact the documentation says this:

    .TabbedPanelsTab4Hover

    You also had this:

    .TabbedPanelsTab4:Selected

    which doesn't exist in CSS because there is no selected pseudo class.

    One way you could get the effect you want is to make that rollover image as one image. e.g. one image is stacked above the other and then on hover you would change the background position.

    e.g.
    Code:
    .TabbedPanelsTabHover {
        background-position:0 -120px
    }
    
    .TabbedPanelsTabSelected {
        background-position:0 -120px
    
    }
    You would define the initial tabs as before but the code could be shortened as follows.
    Code:
    .TabbedPanelsTab1,
    .TabbedPanelsTab2,
    .TabbedPanelsTab3,
    .TabbedPanelsTab4 {
        position: relative;
        top: 0px;
        float: left;
        padding: 4px 0px;
        margin: 0px 30px 0px 0px;
        font: bold 1em sans-serif;
        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:#fff url(http://www.pioneerautomotive.co.uk/step101.jpg) no-repeat 0 0;
    }
    .TabbedPanelsTab2{    background:#fff url(http://www.pioneerautomotive.co.uk/step102.jpg) no-repeat 0 0;}
    .TabbedPanelsTab3{    background:#fff url(http://www.pioneerautomotive.co.uk/step103.jpg) no-repeat 0 0;}
    .TabbedPanelsTab4{    background:#fff url(http://www.pioneerautomotive.co.uk/step104.jpg) no-repeat 0 0;}
    
    * html #TabbedPanelsTab1 { /*IE 6 only CSS */
     margin-left: 0px;
    }
    .TabbedPanelsTabHover {
        background-position:0 -120px
    }
    .TabbedPanelsTabSelected {
        background-position:0 -120px
    }
    That assumes that you have made those two states of the image into one image stacked one on top of the other and that they are are 120px high. On rollover the background position is shifted up to reveal the image that was below the fold.

    I have tested this locally with an image I made up and it works fine.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think I just about get you - I was clutiching around slightly in the dark, but didn't realise the :hover and :selected worked differently, but figured I was almost there as the hover was working.

    When you talk about making the images as one, are you just talking about the first or all of them?

    I think I get the principle, ie instead of changing the image on rollover, one image moves up out of the way to reveal the other.

    But I'm not sure how you mean about stacking them?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You must make pairs of each image.
    Here's the first two that I did quickly.

    http://www.pmob.co.uk/temp/images/step1.jpg
    http://www.pmob.co.uk/temp/images/step2.jpg

    The starting point of the second image is 120px below the starting point of the first image and therefore you need to set the selcted and hover tab styles to a negative top margin.

    e.g.
    Code:
    .TabbedPanelsTabHover {
        background-position:0 -120px
    }
    .TabbedPanelsTabSelected {
        background-position:0 -120px
    }
    Remember that these classes are added to the elements by the javascript and you are not using CSS for the hover effects at all. You just style those classes as you need and when you hover over the element the javascript applies a class to the element directly. Whatever styles have been applied to that class then come in force.

    This:
    .TabbedPanelsTabHover

    is not the same as :

    .TabbedPanelsTab:Hover

    Which was your original error but did give a hover effect because you do have a class of .TabbedPanelsTab.

    If you make two more images like I have shown and then follow the code I posted before then it will work properly as i have tested this out locally with the images I made.

    Hope that explains it a bit better

  10. #10
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes sense - I was thinking in terms of layers when you mentioned stacking them before.

    Think I've gotten it working -

    http://www.pioneerautomotive.co.uk/indexnew901.shtml

    I did have to spot and remove the home class tho', which almost got me for a second, and I presumed :

    Code:
    ....
        text-align:center;
        background:#fff url(http://www.pioneerautomotive.co.uk/step1both.jpg) no-repeat 0 0;
    }
    .TabbedPanelsTab2{    background:#fff url(http://www.pioneerautomotive.co.uk/step2both.jpg) no-repeat 0 0;}
    .TabbedPanelsTab3{    background:#fff url(http://www.pioneerautomotive.co.uk/step3both.jpg) no-repeat 0 0;}
    .TabbedPanelsTab4{    background:#fff url(http://www.pioneerautomotive.co.uk/step4both.jpg) no-repeat 0 0;}
    Should have been :

    Code:
      
    ....
    text-align:center;
    }
    .TabbedPanelsTab1{    background:#fff url(http://www.pioneerautomotive.co.uk/step1both.jpg) no-repeat 0 0;}
    .TabbedPanelsTab2{    background:#fff url(http://www.pioneerautomotive.co.uk/step2both.jpg) no-repeat 0 0;}
    .TabbedPanelsTab3{    background:#fff url(http://www.pioneerautomotive.co.uk/step3both.jpg) no-repeat 0 0;}
    .TabbedPanelsTab4{    background:#fff url(http://www.pioneerautomotive.co.uk/step4both.jpg) no-repeat 0 0;}

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure I can see what you mean. The first image that I see is this one.

    http://www.pioneerautomotive.co.uk/step1both.jpg

    It seems to be working ok for me unless you meant something else

  12. #12
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've edited that post now - the page still the step105.jpg reference in the 'home' class from another version.

    Thank for your help with this - very much appreciated.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ahh OK - I should have remembered we put that in earlier

  14. #14
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just noticed a serious issue with this - the drop down sub menus in the main navigation are no longer working in IE(6). The navigation CSS is navigationnew4.css

    Any clues as to what's causing this conflict with the tabbed rollovers?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The drop downs are not working because of the Dean Edwards ie7 script that you have in your page.

    Code:
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
    With this script in place you don't need the conditional comment fixes to make the drop down work. Use either one method or the other but not both.

    Code:
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
    If you remove the script then the drop downs start working. I'm not sure what you were using the script for exactly so there may be other dependencies on it. The script provides hover functions and many other fixes to make ie6 behave like ie7 and therefore you don't need stu nichols drop down as the menu will work the same way that ie7 does now.

  16. #16
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I forgot that the IE7 script was redundant since you came up with the other solution for the rollovers.

  17. #17
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bump this one up again, but I've just had it pointed out that there's an issue in IE7 - basically only one of the two blue lines of text below the rollover icons is displaying in IE7

    eg in IE6 :

    'You can take a look at our current stock of quality
    vehicles by looking at our 'Vehicles for Sale' page'

    in IE7 :

    'You can take a look at our current stock of quality

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't see where that text is in your page.
    You can take a look at our current stock of quality
    vehicles by looking at our 'Vehicles for Sale' page
    It's not on the front page.

    If its running to two lines then its probably hidden because the element is bigger than the height you set. You would need to make sure that you have enough height for it to show. IE6 always stretches an element to accommodate content but other browsers will let it overflow.

    As I said above I couldn't see where the text was anyway so I couldn't check.

  19. #19
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul - my first thought was that specifying a height would hopefully fix it, but have a recollection of specifying heights being bad form, and that there might be another solution.

    Not sure why you can't see any of the text tho' - it's the blue text beneath the rollovers, so you have the rollover graphics, then the part that changes below as you rollover each - so the heading graphic with the white text on the blue background, and the two brief lines between that and the :

    'Detailed Descriptions and No Surprises'

    header...

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I must be looking at the wrong link. What's the current page you are talking about


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
  •