Browser Compatibility Problems

Ecstasy. · 07-11-2011, 09:54 AM

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,

abduraooft · 07-11-2011, 10:14 AM

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.

vikram1vicky · 07-11-2011, 10:37 AM

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