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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Oddity in Firefox...

    If anyone can help with this, you will be my hero. I wouldn't consider myself an amateur when it comes to web development, but every now and then you come across something that stumps you. I've been looking at this for several hours, and desperately need some help. I'm currently using Wordpress for blogging, and I am using a flickr photo gallery plugin. I know this is a CSS issue, but I can't seem to track it down.

    On this page, I have some images that use a hover style to change the background color of the padding around the image.

    In Internet Explorer 6, it looks like this when I mouseover the image:


    In Firefox 1.0.4, it looks like this when I mouseover the same image:


    Can anyone figure out why I'm having this weird Firefox behavior? I would like it to look just like it does in IE...

    Here's a link to my stylesheet, if you want to browse around:
    Style sheet

    Feel free to view the source of the referring page...

    Any help would be greatly appreciated!!

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Mouse over slower, from the bottom. You can see just that bottom green light up. This is just a guess, since I am no CSS guru, but I think you're having the link and the image get hover, and it is only showing in Firefox.

    a:link {
    color: #78A515;
    font-weight: bold;
    text-decoration: none;
    }

    To test that theory, remove the links around the images and see if the problem is still there.

    How to fix it, I'm not sure, but maybe override a:link for that class?

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Firefox and IE treat the pseudo class hover differently. In IE it can only apply to a link. In FF it can apply to almost any element but, if a link is involved, generally the link takes precedence, making its effect upon linked images odd.

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically the issue you are having happens with opera, firefox, and netscape.
    This is caused by a default anchor class with a background color in it. To fix it place your Anchors in a class with background of fff to match your pages bg color. (note background transparent is NOT supported with IE, so we'll skip that idea)

    page code (note the a class="blank" thats the only change):
    Code:
    <div class="flickr-description"><a href="#" onclick="window.open('http://www.flickr.com/slideShow/index.gne?set_id=544964','slideShowWin','width=500,height=500,top=150,left=70,scrollbars=no, status=no, resizable=no')">View as a slide show</a></div>
    <a class="blank" href="http://www.caseypicker.com/gallery.php?album=544964&amp;photo=23762776"><img src="casey_files/23762776_c7efa4fc26_s.jpg" alt="" class="flickr-thumbnail" height="75" width="75"></a>
    now for your style (add this anywhere I tested it in style.css)
    Code:
    a.blank:hover {background-color: #fff;}
    I was fumbling through your style sheet linkage, got a little confused so I didn't take the time to test this on ie, works with everything else though.


    additional information... code for blank tags incase margins borders etc are set.
    Code:
    a.blank:link {border: none; color:#fff; margin: 0px; text-decoration: none;}
    a.blank:active {border: none; margin: 0px; text-decoration: none;}
    a.blank:visited {border: none; margin: 0px; text-decoration: none;}
    a.blank:hover {background-color: #fff; border: none; color:#fff; margin: 0px; text-decoration: none;}

  • #5
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Works for firefox...

    Well, that fixed my problem in Firefox, but now in IE the background color doesn't change on hover. BTW, thanks for all the help guys! Any ideas?

  • #6
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #flickr-img:hover {
            background-color: #78A515;
    }
    looks like IE doesn't make use of hover with an image element, I'll try to find a work around and get back to you on it. I tried moving the box outside the image to see how the anchors hover would react to it, didn't get anywhere with it.

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried to explain and did mention that IE only applies :hover on links. I've used the link hover class to create a passive rollover effect using opacity, however, the implementation is totally different in IE and Mozilla. I think a similar approach is needed here. One set of style for IE, another for Mozilla. I would recommend the * html hack to render IE specific style invisible to Mozilla. How this works, if you don't already know and are just avoiding it, is first you write your style out for Mozilla. Then anything that causes problems in IE, you follow with an additional declaration in the form:
    Code:
    selector.class { */style for other browsers*/
    property:value;
    }
    
    * html selector.class { */IE specific style*/
    property:IEvalue;
    }
    Finally if you have a style for an element, a class of elements or an id that is only for IE, follow all other declarations for that item with (once again):
    Code:
    * html selector { */IE only style value*/
    property:value;
    }
    The 'hack' is in red, green texts are css comments. Use this method to give IE that hover value for the link that otherwise is a problem in Mozilla.

  • #8
    New Coder
    Join Date
    Jul 2005
    Location
    US
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ooh very nice..
    Then with what we talked about, you could do this in your style.css
    Code:
    a.blank:hover {background-color: #fff;}
    *html a.blank:hover {background-color: #78A515;}
    Another thing I noticed the information in the brackets can be commented with two forward slashes "//" in all the browsers I've tried except IE. *note* IE does read "//" if its before the selector class.

    The following gives the same effect.
    Code:
    a.blank:hover {background-color: #fff;}
    a.blank:hover {//background-color: #78A515;}
    or
    a.blank:hover {background-color: #fff;//background-color: #78A515;}
    Yet another way I found on http://www.quirksmode.org/css/condcom.html, the link has more information on IE conditional comments.

    You can put the following in your html page.
    Code:
    <!--[if IE]>
    <style>
    a.blank:hover {background-color: #78A515;}
    </style>
    <![endif]-->
    does anyone have any documentation on this? I use w3c.org as my main reference and was unable to find anything about it.

    and yes jscheuer1 you did say that above, I skimmed passed what you wrote and went with what I was thinking.
    a perfect imperfection
    www.hilands.com

  • #9
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is also the !important hack. I prefer the * html hack for style sheets though. The !important hack works like so:

    Code:
    style="width:109px!important;width:119px;"
    The second value being for IE only. This can be used in a stylesheet but, is more suited to inline style IMOP. Both hacks can cause problems in IE5 Mac as often, it interprets things like Mozilla. You can hide from IE5 Mac in a stylesheet like so:

    Code:
    /*exclude IE5 Mac\*/
    * html selector.class {
    property:value;
    }
    /*stop excluding IE5 Mac*/
    Not all IE specific style should be hidden from IE5 Mac though - testing and/or a vast knowledge of IE5 Mac's peculiarities is required. Generally though, anything to do with the box model (padding, borders, cell-spacing and the like) will be treated in IE5 Mac as in Mozilla. There is no way to exclude IE5 Mac from inline style that I know of.

  • #10
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You guys are great! I really appreciate all the help you've given me thus far.

    I implemented the changes that everyone suggested, and it seems that this one worked best:

    Code:
    a.blank:hover {//background-color: #78A515;}
    It is working great for my album page and it should work for the gallery main page (considering they are using the same 'blank' class), but (once again) I get no hover effects in IE. This is only occuring on my main gallery page, and not the album page.

    The only difference that I could see in the two link/img tags, is that the tag on the gallery main page has a 'title' attribute in the anchor tag, and an 'alt' attribute in the img tag. I tried removing these to see if that would make a difference, but it did not.

    I also tried using the different variations of styles that everyone suggested, but to no avail...

    Can anyone else see something I'm missing?

    Once again, you guys have already come through for me in a BIG way. I appreciate it!
    Last edited by maverick999; 07-08-2005 at 09:08 PM.

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Sorry for the bump but I got linked here for a different reason.

    on the IE hover effect:

    http://home.earthlink.net/~harbinger...nsmokeart.html

    has a javascript in it to make the hover class work on the images in IE.

    the .js

    Code:
    function hoverOff(hoverElement) {
    hoverElement.className = "hoverOff";
    }
    function hoverOn(hoverElement) {
    hoverElement.className = "hoverOn";
    }
    the css
    Code:
    .hoverOff {
    filter:alpha(opacity=20);
    -moz-opacity:.20;
    opacity:.20;
          }
    .hoverOn {
    filter:alpha(opacity=80);
    -moz-opacity:.80;
    opacity:.80;
          }
    granted I'm using the opacity filter on the images but the hover class can be used to apply a background color as well in your case.

  • #12
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    when u r having issues with the text hover attributes being added to images, separate the effects...

    ie:
    a:hover { ..whatever common effects... }
    p a:hover {text-decoration: underline; ...any other effects...}

    by separating the hover effects this way, no hacks are necessary...

    maybe even throw in
    img a:hover{ border: 0; ...etc}
    for image specific hover states...

    if u want the hover states to work in IE like it does in all modern web standards compliant browsers... then just include the .htc file which activates it in IE...
    (ive stopped using it, so havent the link handy :P)

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts


  •  

    Posting Permissions

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