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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    a href in css overlay not working in IE

    Our site has a css overlay for parent navigation, including an href in the overlay to link to the destinations.

    It works fine in FF, Safari, etc. Only IE doesn't work.

    Site: http://www.lifestyleandprosperity.com/zencart/
    the parent nav buttons are: home, community, contact us, about us.

    Relevant code below.

    If I uncomment the red border, the overlay shows up in the right place, showing that the CSS functions properly.

    So why won't the html <a href> links link properly - only in IE?

    I'm basically a hacker, I can edit code but I'm not a css expert, so if you could please tell me what to add or replace that keeps the FF/Safari functioning still in tact, that would help.

    Thank you!!
    Confused girl

    ========

    [CODE]

    html lines:

    <!--bof-ParentNavigationOverlay-->

    <a class="overlay" id="home_overlay" href="http://www.lifestyleandprosperity.com/"> </a>
    <a class="overlay" id="comm_overlay" href="http://www.lifestyleandprosperity.com/community.html"> </a>
    <a class="overlay" id="prod_overlay" href="http://www.lifestyleandprosperity.com/zencart/"> </a>
    <a class="overlay" id="contactus_overlay" href="http://lifestyleandprosperity.com/zencart/index.php?main_page=contact_us"> </a>
    <a class="overlay" id="aboutus_overlay" href="http://www.lifestyleandprosperity.com/aboutus.html"> </a>

    <!--eof-ParentNavigationOverlay-->


    CSS code:

    /* bof LNPnavigationBar */

    #logoWrapper{
    position:relative;
    }

    .overlay{
    display: block;
    position:absolute;
    background:transparent;
    /* border:1px solid red; */
    }

    #home_overlay{
    top:53px;
    left: 475px;
    width:65px;
    height:30px;
    }

    #comm_overlay{
    top:53px;
    left: 545px;
    width:95px;
    height:30px;
    }

    #prod_overlay{
    top:53px;
    left: 644px;
    width:170px;
    height:30px;
    }

    #contactus_overlay{
    top:53px;
    left: 815px;
    width:100px;
    height:30px;
    }

    #aboutus_overlay{
    top:53px;
    left: 919px;
    width:82px;
    height:30px;
    }

    /* eof LNPnavigationBar */

    [CODE]

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mayagg,
    It's funny, only a few days ago I made a page showing exactly this bug and how to deal with it and it still took me ten minutes of looking at your site to recognize it.

    Have a look here and see if this helps.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mayagg (02-18-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Macintosh Nailed it!

    Ohhh, thank you so much. All I did was add this one line:

    [CODE]
    background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
    [CODE]

    to each block so that it was like this:

    [CODE]
    #home_overlay{
    top:53px;
    left: 475px;
    width:65px;
    height:30px;
    background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
    }
    [CODE]

    ...and it worked absolutely like a charm.

    THANK you!!!

    Tested FF, Safari, IE, all look great.

    Very very grateful,
    Maya-G

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by mayagg View Post
    Ohhh, thank you so much. All I did was add this one line:

    [CODE]
    background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
    [CODE]

    to each block so that it was like this:

    Code:
    	#home_overlay{
    	top:53px;
    	left: 475px;
    	width:65px;
    	height:30px;
    	background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
    }
    I wonder if this wouldn't be easier -
    Code:
    .overlay{
    display: block;
    position:absolute;
    background: url(fakeimage.jpg); 
    /* border:1px solid red; */
    }
    You should get away with a single entry that way.

    Either way, I'm glad you got it working. How funny I only just came across this odd bug last week or so.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mayagg (02-21-2011)


  •  

    Posting Permissions

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