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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .borderit img and IE

    Open my test page in anything other than IE and the .borderit script I got from here works exactly as I want. ( Try http://www.snapafun.co.nz/whgrnr_tables.html ~ the guitars are to be links for these folk and the blue border on mouse over works for me.)

    However, nothing happens at the guitars using IE6 though the links are active.

    Any suggestions ? I don't mind learning further, it's just that I don't know where to look from here.

    The script I used :

    <table width="800" align="center" border="0">
    <style type="text/css">

    .borderit img{
    border: 0px solid #cccccc;
    }

    .borderit:hover img{
    border: 2px solid navy;
    }

    .borderit:hover{
    color: red; /* irrelevant definition to overcome IE bug */
    }

    </style>
    <tr>
    <td>
    <!-- Menu table layout -->
    <table width="160" align="left" border="0">
    <tr>
    <td align="center" valign="center" height="60" border="0">
    <a href="newsletter.html" class="borderit">
    <img border="0" align="center" valign="center" width=150 height=54 src="blueGuitar_news.png" alt="NewsLetter"/></a>
    </td>
    </tr>

    <snip from here>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Styles in the head

    Place those style definitions in the head section of your document where they belong; I would've expected IE of all browsers to swallow this, but it's incorrect nevertheless.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    OK. I'm showing my age ~ but thanks for the heads up.

    Still no different though. Blue borders in all but IE on mouse over.

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Your style still isnt in the head section of your document.

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Additionally, subject to confirmation…

    I know that the .borderit class is only being applied to an anchor element, but it might help to spell it out in the CSS itself.
    (IE<7 doesn't support pseudo-classes on non-anchor elements, so it might be possible that it isn't acknowledging that the pseudo-classes are actually being used on anchors because it isn't made explicit in the selectors.)

    So, …
    Code:
    a.borderit img {
    border: 0px solid #cccccc;
    }
    
    a.borderit:hover img {
    border: 2px solid navy;
    }
    
    a.borderit:hover {
    color: red; /* irrelevant definition to overcome IE bug */
    }
    Just a thought.

    It's not something I've considered until now. If anyone can confirm whether or not IE/Win needs it to be made explicit in this way, I'd be grateful. It'd save me from cranking up t'other machine (WinXP).

    Ta

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image properties

    I did some testing, but IE6.0/Win2000 stubbornly refuses to assign properties, any properties, to the image using selector ".borderit:hover img".
    I tried a different class name, different properties: nada. Added a element selector, no dice.
    I don't know if this is a registered IE bug, but if it is there might be a hack for it; an easier solution would be however to set that border on the a instead of on the img, which does work.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New to the CF scene
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks NancyJ : Definitely showing my age: Updated local and not my site.

    Tried your idea Bill Posters, nada my system at present but it doesn't appear to break anything so I will leave it there for now.

    an easier solution would be however to set that border on the a instead of on the img, which does work.
    Now the newbie in me is really going to show. Could you expand this a little further ronaldb66 ?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    a.borderit {
    border: 2px solid #cccccc; /*make this a color that matches your background*/
    }
    
    a.borderit:hover {
    border: 2px solid navy;
    }

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expanded!

    _Aero_,

    I couldn't have said it better!
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #10
    New to the CF scene
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    We have a fix............... Thanks everyone.

    http://www.snapafun.co.nz/whgrnr_tables.html (have your midi plugin plugged in to really celebrate.)


  •  

    Posting Permissions

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