Hi, at the example page I set up below, the JQuery scrollable navigation at the bottom works great in IE, but not in Firefox for some reason - where the icons stop at a certain point and not displaying all of the icons. However, after you hit "refresh" in Firefox, the navigation works as it should. Does any kind soul here have an idea of what could be the issue?
http://iongeo.com/ru_innovation_test_dev/
Any help would be greatly appreciated.
Thanks
Pat
Also, below is my .css code for the JQuery scrollable menu:
HTML Code:
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 120px;
width: 500px;
overflow: auto;
background-color: #CCCCCC;
margin-left: 200px;
}
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* removing default styling */
margin: 0;
background: url('navigation.png');
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 15px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
display: none;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
Last edited by chrishirst; 02-01-2010 at 05:54 PM..
|
