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 to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Photo Hover CSS won't work in IE 6, 7 --- HELP

    I've seen a lot of posts about how CSS doesn't work quite right in IE 6 or 7 when it comes to Hover boxes - or in my instance, a photo hover.

    I'm here to post my code because I simply cannot figure out why it won't work, please help! I appreciate it.

    CSS CODE:

    Code:
    *
    {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    
    /* =Basic HTML, Non-essential
    ----------------------------------------------------------------------*/
    
    a
    {
    	text-decoration: none;
    }
    
    body
    {
    	background: #fff;
    	color: #777;
    	margin: 0 auto;
    	padding: 50px;
    	position: relative;
    	width: 620px;
    }
    
    h1
    {
    	background: inherit;
    	border-bottom: 1px dashed #ccc;
    	color: #933;
    	font: 17px Georgia, serif;
    	margin: 0 0 10px;
    	padding: 0 0 5px;
    	text-align: center;
    }
    
    p
    {
    	clear: both;
    	font: 10px Verdana, sans-serif;
    	padding: 10px 0;
    	text-align: center;
    }
    
    p a
    {
    	background: inherit;
    	color: #777;
    }
    
    p a:hover
    {
    	background: inherit;
    	color: #000;
    }
    
    /* =Hoverbox Code
    ----------------------------------------------------------------------*/
    
    .hoverbox
    {
    	cursor: default;
    	list-style: none;
    }
    
    .hoverbox a
    {
    	cursor: default;
    }
    
    .hoverbox a .preview
    {
    	display: none;
    }
    
    .hoverbox a:hover .preview
    {
    	display: inline;
    	position: relative;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }
    
    .hoverbox img
    {
    	background: #fff;
    	border-color: #aaa #ccc #ddd #bbb;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	padding: 2px;
    	vertical-align: top;
    	width: 100px;
    	height: 75px;
    }
    
    .hoverbox li
    {
    	background: #eee;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 3px;
    	padding: 5px;
    	position: relative;
    }
    
    .hoverbox .preview
    {
    	border-color: #000;
    	width: 200px;
    	height: 150px;
    }
    HTML - it's a huge page of photos, here is a bit of the html:

    Code:
    <h2>NWIBRT 2010 Golf Outing</h2>
    <ul class="hoverbox">
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-1.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-1.jpg" alt="" width="327" height="246" /></a> </li>
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-3.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-3.jpg" alt="" width="327" height="245" /></a></li>
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-4.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-4.jpg" alt="" width="327" height="245" /></a></li>
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-5.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-5.jpg" alt="" width="327" height="245" /></a></li>
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-8.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-8.jpg" alt="" width="327" height="245" /></a></li>
    <li><a href="#"><img src="/data/dmsnwibrt/image/Untitled-9.jpg" alt="" width="327" height="245" /><img class="preview" src="/data/dmsnwibrt/image/Untitled-9.jpg" alt="" width="327" height="245" /></a></li>
    </ul>
    <p style="clear: both; text-align: center;"><a href="/index.cfm/fuseaction~home.home/pid~43/page~NWIBRT_Safety_Seminar_2010_Photos">View Full Gallery</a></p>
    <p> </p>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,004
    Thanks
    15
    Thanked 236 Times in 236 Posts
    Javascript with onmouseover and onmouseout will work fine on just about any browser, including those. You can have it change the display property. You can use the css and javascript both.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    IE6 doesn't support :hover on anything but a tags - this might be problematic in IE6:

    Code:
    .hoverbox a:hover .preview
    IE7 should be OK though. EDIT: And so should IE6 with a it of messing about.

    A link to your page would help since we're talking about images here. Failing that, what is it that's going wrong in IE6/7 - are you just not getting the hover behaviour at all? And it's OK in Firefox? Do you have a valid doctype on your page?
    Last edited by SB65; 10-20-2010 at 12:32 PM.

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Here is the link to the site: http://www.nwibrt.org/index.cfm/fuse...26/page~Photos

    Thank you for your replies.

    I'm new to this type of thing and unsure how to do this w/o having to redo the entire CSS. There are loads of photos.

    The site is okay in Firefox and IE8. I just want the hover to work, and also I was told for the IE6/7 the pics were going behind everything else instead of hovering to the front.

    It's a huge mess, one which I'm not sure how to fix.

    If I use javascript, how do I add there, or should I say where? I'd rather, and hope, the fix would be as simple as some extra or deleted CSS. I think that's a far reach though.

    Jen

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,004
    Thanks
    15
    Thanked 236 Times in 236 Posts
    You have a huge blank space at the top of your page. The doctype should be on the very first line.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    jenjen, having googled hoverbox, it looks like you are missing the IE fixes provided here. Have a try with adding these conditionally to your page.

    Below this code already in your header:

    Code:
    <style type="text/css">
    /**************************
    HEADER
    **************************/
    #header {
    background-color: #ffffff;
    background-image:url(/data/dmsnwibrt/images/bg.jpg);
    background-repeat: repeat-x;
    height: 171px;
    }
        #leftnav a{
            background-image:url(/data/dmsnwibrt/images/buttonbg.jpg);
            background-repeat:no-repeat;
            font-family:Tahoma, Geneva, sans-serif;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            display:block;
            width: 181px;
            height: 36px;
            margin-bottom: 10px;
            text-decoration: none;
            padding-top: 7px;
        }    
        #leftnav a:hover{
            background-image:url(/data/dmsnwibrt/images/buttonbghover.jpg);
            background-repeat:no-repeat;
            text-decoration: none;
            color: #000;
            font-weight:bold;
            
        }    
        
        </style>
    add this:

    Code:
    <!--[if lte IE 7]>
    <style type="text/css" media="screen">
    .hoverbox a
    {
    	position: relative;
    }
    
    .hoverbox a:hover
    {
    	display: block;
    	font-size: 100%;
    	z-index: 1;
    }
    
    .hoverbox a:hover .preview
    {
    	top: -38px;
    	left: -50px;
    }
    
    .hoverbox li
    {
    	position: static;
    }
    </style>
    <![endif]-->
    which will apply conditional css to IE7 and under.


  •  

    Posting Permissions

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