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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Browser Compatibility Problems

    Hi,

    I used absolute positioning and it works in FireFox but not in IE.

    What can I do to correct it/use instead?

    For reference: http://www.hawkming.com.tw/1.html

    Thanks in advance,

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You shouldn't use absolute positions everywhere as it has some pitfalls, see http://www.tyssendesign.com.au/artic...ning-pitfalls/

    Google for "horizontal CSS menu" to get plenty of good samples.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check this sample code.....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Rollover</title>
    <script type="text/javascript" src="jquery-1.js"></script>
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    h1 {
        color:#C63A17;
        font:bold 16px Arial, Helvetica, sans-serif;
        line-height:30px;
        text-align:center;
    }
    #rollover {
        text-align:center;
        padding:5px;
    }
    #links {
        width:520px;
        margin:5px auto;
        overflow:auto;
        height:1%;    
    }
    #links ul {
        list-style:none;
    }
    #links ul li a{
        display:block;
        float:left;
        width:120px;
        height:20px;
        padding:2px 5px;
        text-align:center;
        font:bold 14px Verdana, Geneva, sans-serif;
        text-decoration:none;
        color:#C4C4C4;
    }
    </style>
    <script type="text/javascript">
    var pics = new Image()
    pics[0] = '1.jpg';
    pics[1] = '2.jpg';
    pics[2] = '3.jpg';
    pics[3] = '4.jpg';
    pics[4] = 'default.jpg';
    
    $(document).ready(function() {
                               $($("#links ul li a")[0]).mouseover(function() {
                                                                $("#rollover img").attr("src",pics[0])                                                            
                                                                })
                               $($("#links ul li a")[1]).mouseover(function() {
                                                                $("#rollover img").attr("src",pics[1])                                                            
                                                                })
                               $($("#links ul li a")[2]).mouseover(function() {
                                                                $("#rollover img").attr("src",pics[2])                                                            
                                                                })
                               $($("#links ul li a")[3]).mouseover(function() {
                                                                $("#rollover img").attr("src",pics[3])                                                            
                                                                })
                               $("#links a").mouseout(function() {
                                                                $("#rollover img").attr("src",pics[4])                                                            
                                                                })
                               });
                      
    </script>
    </head>
    
    <body>
    <h1>CSS Rollover</h1>
    <div id="rollover"><img src="Default.jpg" title="Image" alt="Image" /></div>
    <div id="links">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    </div>
    </body>
    </html>
    Cheers


  •  

    Posting Permissions

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