CSS hover image link not working in IE

Discussion in 'HTML and CSS' started by dreamee, Oct 1, 2011.

  1. dreamee

    dreamee

    Joined:
    Oct 1, 2011
    Messages:
    1
    Likes Received:
    0
    Please refer http://solarisdutamas.com/fb/KonzeptGarden/sample.php, mouse over to "Pebbles Wash" and click the image. It working fine in Chrome and Firefox, but the link not working in IE. Here's my code:
    Code (Text):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Konzept Garden</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    #main {
    width: 520px;
    height: 228px;
    background-image: url(stone.jpg);
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;}

    #main ul li {
    list-style: none;
    display: inline;}

    #main ul li:hover {
    visibility: visible;}

    #main ul li a {
    position: absolute;
    z-index: 1;}

    #main ul li a:hover {
    z-index: 100;}

    #main ul li img {
    position: absolute;
    top: 300px;
    right: 999em;}

    #submain1 .butt1 a {
    left: 8px;
    top: 80px;
        width: 90px;
    height: 32px;}

    #main ul .butt1:hover img {
        left: 8px;
        top: 80px;}
    </style>
    </head>
    <body style="margin: 0px; width: 520px;">
    <div id="main">
    <ul id="submain1">
    <li class="butt1"><a href="http://konzeptstone.com/p_pebbles.html" target="_blank"></a><img src="p1.png"></li>
    </ul>
    </body>
    </html>
     
    Anyone any idea? Please help, thanks in advanced.
     
    dreamee, Oct 1, 2011
    #1
    1. Advertisements

  2. dreamee

    partian

    Joined:
    Feb 15, 2016
    Messages:
    6
    Likes Received:
    0
    Your code is all over the shop, however IE has an issue with hovering images, I couldn't find anything to fix it but I only spent a few minutes Googling,
    Also, I would clean your code
    CSS
    Code (Text):

    body {
        margin: 0;
        width: 520px;
    }
    * {margin: 0; padding: 0;}
    #main {
    width: 520px;
    height: 228px;
    background-image: url(stone.jpg);
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;}

    #main ul li {
    list-style: none;
    display: inline;}

    #main ul li:hover {
    visibility: visible;}

    #main ul li a {
    position: absolute;
    z-index: 1;}

    #main ul li a:hover {
    z-index: 100;}

    #main ul li img {
    position: absolute;
    top: 300px;
    right: 999em;}

    #submain1 .butt1 a {
    left: 8px;
    top: 80px;
        width: 90px;
    height: 32px;}

    #main ul .butt1:hover img {
        left: 8px;
        top: 80px;
        }
     
    HTML
    Code (Text):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="STYLESHEET.CSS">
    <title>Konzept Garden</title>
    </head>
    <div id="main">
    <ul id="submain1">
    <li class="butt1"><a href="http://konzeptstone.com/p_pebbles.html" target="_blank"></a><img src="p1.png"></li>
    </ul>


    </body>
    </html>
     
    Link your CSS as another file so you don't over clog your HTML.
     
    partian, Feb 15, 2016
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.