PDA

View Full Version : core example menu browser compatability



dgerhard
30 Jul 2010, 4:12 PM
Hello, I used the menu example from core and it works very well in IE, but in all the other browsers(firefox, safari, opera, chrome) it works only occasionally. Is there a load order or something I should be thinking about? How can I get the menu to load every time in the four other browsers? Thank you in advance, the code is below.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
<link href="ext-3.2.1/examples/menu/menu.css" rel="stylesheet" type='text/css'/>
<script src="ext-3.2.1/ext-core-debug.js" type='text/javascript'></script>
<script src="ext-3.2.1/examples/menu/menu.js" type='text/javascript'></script>
<script>
Ext.onReady(function() {
new Ext.ux.Menu('simple-vertical-menu', {
transitionType: 'slide',
direction: 'vertical',
delay: 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true, // default
currentClass: 'current'
});
});
</script>


<style type='text/css'>
.ux-menu a.current {
background-image: url('images/menu-item-bg-current.png');
border-color: #cbc0b7;
}



div.sidemenu{
background-color:none;
float:left;
margin-left:20px;
border:none;
background:url(menubackground.png) repeat-y;
}
div.content{
width:1200px;
height:600px;
background:url(background.png) no-repeat;
border:none;
padding-left:25px;
padding-top:125px;
}

a.one{
font:bolder "Courier New", Courier, monospace;
color:#f2d100;
font-size:22px;
background-color:none;
}
a.one:hover{
font:bolder "Courier New", Courier, monospace;
color:#ea7303;
font-size:22px;
background-color:none;
}

body{
paddding:none;
margin:none;
background:url(texture.jpg);
border:none;
}
</style>

</head>
<body>
<center>
<div class='content' id='content'>

<div class='sidemenu' id='sidemenu'>
<ul id="simple-vertical-menu">
<li>
<a class='one' href="#">Home</a>
</li>
<li><a href="#" class='one'>About Us</a></li>
<li>
<a href="#" class='one'>Tour</a>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
<li><a href="#" class='one'>Services</a>
<ul>
<li><a href="#">sub menu item 4</a></li>
<li><a href="#">sub menu item 5</a></li>
<li><a href="#">sub menu item 6</a></li>

</ul></li>
<li><a href="#" class='one'>Legal</a>
<ul>
<li><a href="#">sub menu item 4</a></li>
<li><a href="#">sub menu item 5</a></li>
<li><a href="#">sub menu item 6</a></li>
</ul></li>
<li><a href="#" class='one'>Contact</a>
<ul>
<li><a href="#">Information</a></li>
<li><a href="#">Map</a></li>
</ul></li>
<li><a href="#" class='one'>Links</a></li>

</ul>
</div>

</div>
</center>
</body>
</html>