...

View Full Version : 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/articles/css/absolute-positioning-pitfalls/

Google for "horizontal CSS menu" to get plenty of good samples.

vikram1vicky
07-11-2011, 10:37 AM
Check this sample 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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum