|
CSS - Css/jquery Menu Problem In Ie7
I have created a navigation menu with sub menu as per code below:
Code:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li class="home"><a href="index.htm">Home</a></li>
<li class="heating"><a href="#">Heating</a>
<ul>
<li><a href="#">Boilers</a></li>
<li><a href="#">Radiators</a></li>
<li><a href="#">Controls</a></li>
<li><a href="#">Hot Water</a></li>
<li><a href="#">Fires</a></li>
<li><a href="#">Water Treatment</a></li>
<li><a href="#">Fan Convectors</a></li>
<li><a href="#">Fittings</a></li>
</ul>
</li>
<li class="plumbing"><a href="#">Plumbing</a>
<ul>
<li><a href="#">Plastic</a></li>
<li><a href="#">Cold Water Storage</a></li>
<li><a href="#">Fittings & Valves</a></li>
<li><a href="#">Pumps</a></li>
<li><a href="#">Water Softeners</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Fixings</a></li>
</ul>
</li>
<li class="bathroom"><a href="#">Bathroom</a></li>
<li class="spares"><a href="#">Heating Spares</a></li>
<li class="branches"><a href="#">Branches</a></li>
<li class="contactus"><a href="#">Contact Us</a></li>
</ul>
</div>
The menu is a jqueryslidemenu that uses a CSS stylesheet and Javascript. The CSS is: Code:
.jqueryslidemenu{
font: bold 14px Arial, sans-serif;
background: #005daa;
width: 97%;
position:relative;
top:5px;
left:10px;
z-index:1000;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
list-style-type:none;
}
.jqueryslidemenu ul li.home{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:30px;
}
.jqueryslidemenu ul li.heating{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:10px;
margin-left:80px;
}
.jqueryslidemenu ul li.plumbing{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:10px;
margin-left:45px;
}
.jqueryslidemenu ul li.bathroom{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:50px;
}
.jqueryslidemenu ul li.spares{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:45px;
}
.jqueryslidemenu ul li.branches{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:45px;
}
.jqueryslidemenu ul li.contactus{
position: relative;
display: inline;
float: left;
list-style-type:none;
padding-left:65px;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #005daa; /*background of tabs (default state)*/
color: white;
padding: 9px 0px;
text-decoration: none;
border-left:0px;
list-style-type:none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: #005daa; /*tab link background during hover state*/
color: #ffcc33;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left:0px;
display: block;
visibility: hidden;
z-index:1000;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li.heatingsub{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li.plumbingsub{
display: list-item;
float: none;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 14px Arial, sans-serif;
width: 140px; /*width of sub menus*/
padding: 10px 10px 10px;
margin: 0;
}
The Javascript is: Code:
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
var jqueryslidemenu={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
The menu seems to work fine in Firefox, Chrome, Opera and IE8 but for some reason in IE7 the submenu is appearing below the main content that appears in the page itself. I have set the z-index of the menu to 1000 and the content to 1 but still no joy. Any ideas? Similar TutorialsHi, I'm new to this forum I hope someone can help. I'm using a jquery slidemenu to make menus pop down from a ul but I'm having trouble in that when the menu opens up, it opens behind a div below. Any tips much appreciated Thanks **sorted myself found a position relative on some bit being underlapped I've been bashing my head with this problem for several days now and i've tried lots and lots of methods with no good result. now, i'm out of ideas. I want to use the superfish/suckerfish menu from : jquery plugin's home The problem is that i want to show the second ul submenu (the one that extends from the first) ~50px to the left over the first ul menu. see the problem in the attached image. it works fine in firefox, but in internet explorer 6 & 7 the second ul submenu is shown below the first one. i thought its a problem with z-index or something but i can't get it to work. here is the html code : Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>A very basic Superfish menu example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<style type="text/css" media="screen" id="test">
.test {margin-left:-50px;margin-top:10px;position:absolute;z-index:9999;}
</style>
</head>
<body>
<ul class="sf-menu">
<li class="current">
<a href="#a">menu item ↓</a>
<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">menu item →</a>
<ul class="test">
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item ↓</a>
<ul>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item →</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
</ul>
</body>
</html>
here is the css code : Code:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: -1;
}
.current:hover sf-menu li {
position:absolute;z-index:-5;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
position:absolute;z-index:999;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
position:relative;z-index:-1;
}
.test a {position:relative;z-index:555;}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
i'm not adding the javascript because i believe that the problem is from css ... can anyone help me ? image : URL Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/ I want example this (for how): what do i do? CSS: Code: .show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
/*margin: 0 0 0 0;
top: 0;
bottom: 0;*/
}
HTML: Code: <ul>
<li>
<div class="show_tooltip">
put returns between paragraphs
</div>
<a href="#">about</a>
</li>
<br>
<li>
<div class="show_tooltip">
for linebreak add 2 spaces at end
</div>
<a href="#">how</a>
</li>
</ul>
jQuery: Code: $("li a").mouseenter(function(){
$(this).prev().fadeIn();
}).mousemove(function(e) {
$('.tooltip').css('bottom', e.pageY - 10);
$('.tooltip').css('right', e.pageX + 10);
}).mouseout(function(){
$(this).prev().fadeOut();
})
Here is the page I am working on. Here is the tabs.css: Code:
#tabBox {
border: 1px solid #000099;
clear: both;
padding-top: 5px;
background: #000099;
}
#contents {
padding: 1.5em;
background: #FFFFFF;
min-height: 100px;
}
#info {
position: relative;
width: 100%;
height: 3em;
}
#info ul#tabs {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
}
#info ul#tabs li {
display: inline;
list-style: none;
}
#info ul#tabs a, #info ul#tabs span, #info ul#tabs a.current {
display: block;
float: left;
padding: 4px 5px;
margin: 1px 3px 0 0;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#info ul#tabs span, #info ul#tabs a.current, #info ul#tabs a.current:hover {
border: 1px solid #000099;
border-bottom: none;
background: #000099;
padding-bottom: 5px;
margin-top: 0;
}
#info ul#tabs a {
background: #FFFFFF;
border: 1px solid #000099;
color: #000099;
}
#info ul#tabs a:hover {
margin-top: 0;
border-color: #000099;
background: #3399FF;
padding-bottom: 4px;
}
Here is the html: Code:
<div id="product">
<h1>Compact Product Page</h1>
</div>
<!--Start tabs-->
<div id="info">
<ul id="tabs">
<li><span>Overview</span></li>
<li><a href="compact_td.html">Technical Data</a></li>
<li><a href="compact_rp.html">Related Products</a></li>
<li><a href="compact_img.html">More Images</a></li>
<li><a href="compact_ms.html">Maintenance & Support</a></li>
</ul>
</div>
<!--end tabs-->
<div id="tabBox">
<div id="contents"></div>
</div>
Ignore the problems with the top navigation - I have another post already going trying to fix that problem. in FF the #tabBox and #contents are at the bottom of the page and not right beneath the #tabs. I borrowed and edited the css/html to do this and have looked over it several times and I cannot figure out why it is doing this. Looks fine in Safari and IE, for some reason the last tab drops down in FireFox... I usually figure these things out but I must admit I am stuck on this one, please help www . goldenbroom-janitorial.com/test Here is the HTML Code:
<body><br>
<div id="wrapper">
<div style="text-align:left; width:800px;">
<table border="0" width="800">
<tr>
<td width="800" style="height:300" align="left"><table style="height:300; width:800px; ">
<tr>
<td width="800" height="268" style="background-image:url(images/logo_header.jpg); background-position: top center; background-repeat:no-repeat;">
</td>
</tr>
<tr>
<td width="800" height="300"><table>
</td>
<td width="800" height="300"><table>
<tr>
<td width="800" height="10"><table>
<tr>
<td width="10" height="10"><img src="images/corner1.gif" alt="" border="0" /><br /></td>
<td width="800" height="10" style="background-image:url(images/topline.gif)"></td>
<td width="10" height="10"><img src="images/corner2.gif" alt="" border="0" /><br /></td>
</tr>
</table></td>
</tr><div id="menu">
<ul>
<li><a href="index.html" class="current"><font color="#FBC431">Home</font></a></li>
<li><a href="cleaning_services_dallas.html">Services</a></li>
<li><a href="house_cleaning_employment_dallas.html">Employment</a></li>
<li><a href="cleaning_services_questions_dallas.html">FAQ's</a></li>
<li><a href="cleaning_services_free_estimates_dallas.html">Free Estimates</a></li>
<li><a href="cleaning_services_dallas_contact.html">Contact Us</a></li>
</ul>
</div>
Here is the CSS: Code:
/*--- Menu ---*/
#menu {
height:138px;
width: 800px;
background: #A8A676;
display:inline;
}
#menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
#menu ul li {
display: inline;
}
#menu img {
display: inline;
}
#menu ul li a{
float:left;
margin-right: 0px;
padding: 25px 0px 0px 0px;
width: 133px;
height: 95px;
font: 14px "tahoma","verdana","impact";
font-weight:bold;
text-align: center top;
text-decoration: none;
color: #1e1717;
background:url(../images/menu_background.gif) no-repeat;
}
#menu ul li a:visited {
color: #1e1717;
}
#menu ul li a:hover, #menu ul li .current {
color: #FBC431;
text-decoration: none;
background: url(../images/menu_hover.gif) no-repeat;
}
/*--- End of Menu ---*/
THE CONTACT TAB IS DROPPING DOWN FOR SOME REASON! Thanks in advance! Hi there i have a small problem and i think it lies in my nav menu, basically i want my menu to float right which it does but i'm left with this large white area on the right side of my webpage. please could someone take a look and help me my website being webbid.co.uk and the code :- Code: ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul#nav {
float: right;
position: relative;
z-index: 597;
}
ul.dropdown li {
float: right;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 598;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 599;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 100%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Thanks in advance. Hi All, I'm desperate for help on this. I did not build this site but am currently working as the developer to get it up to par on IE6. The lower menu on the page listed below is the one that is not currently working in IE6. Works fine in IE7 & FF. **I cannot post the URL as I'm a new member but would be happy to send it to you** **Worked on this myself for quite awhile to no avail** This site has two sets of navigation, both employing rollover CSS menus. The upper menu HOVER state works, the lower menu won't even recognize the links nor does the HOVER state work. The upper menu and the lower menu use almost the same exact code verbatim except for the classes and divs are named differently. Can you help? below is the CSS for the upper menu: Code: .menu2 {
padding:0 0 0 32px;
margin:0;
list-style:none;
width:868px;
height:35px;
background:#fff url(../images/navbar.jpg);
position:relative;
border-width:0 1px;
border-bottom:1px solid #ffffff;
}
.menu2 li {
float:left;
}
.menu2 li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:13px;
font-family:verdana, sans-serif, ariel;
font-weight:bold;
text-align:center;
padding:0 0 0 8px;
cursor:pointer;
outline:none;
}
.menu2 li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.menu2 li.current a {
color:#fff;
background:url(../images/button3-3.gif);
}
.menu2 li.current a b {
background:url(../images/button3-3.gif) no-repeat right top;
}
.menu2 li a:hover {
color:#fff;
background:#000 url(../images/button4-3.gif);
}
.menu2 li a:hover b {
background:url(../images/button4-3.gif) no-repeat right top;
}
.menu2 li.current a:hover {
color:#fff;
background:#000 url(../images/button3-3.gif);
cursor:default;
}
.menu2 li.current a:hover b {
background:url(../images/button3-3.gif) no-repeat right top;
}
/*=== END MAIN MENU===*/
HTML for the upper menu: Code: <ul class="menu2">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Apply</b></a></li>
<li><a href="#"><b>Cash Advance</b></a></li>
<li><a href="#"><b>Payday Loan</b></a></li>
<li><a href="#"><b>FAQ</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
<li><a href="#"><b>Member Login</b></a></li>
</ul>
now here is the css for the lower menu: Code: /*___CASH_ADVANCE_MENU_________________________________________*/
#cashadvancenav {
width:675px;
}
.cashadvancenav2 {
padding:0 0 0 10px;
margin:0;
list-style:none;
width:665px;
height:35px;
background:#fff url(../images/cashadvancebar.jpg);
position:relative;
border-width:0 1px;
border-bottom:1px solid #ffffff;
}
.cashadvancenav2 li {
float:left;
}
.cashadvancenav2 li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:13px;
font-family:verdana, sans-serif, ariel;
font-weight:bold;
text-align:center;
padding:0 0 0 4px;
cursor:pointer;
outline:none;
}
.cashadvancenav2 li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.cashadvancenav2 li.current a {
color:#fff;
background:url(../images/button3-3.gif);
}
.cashadvancenav2 li.current a b {
background:url(../images/button3-3.gif) no-repeat right top;
}
.cashadvancenav2 li a:hover {
color:#fff;
background:#000 url(../images/button4-3.gif);
}
.cashadvancenav2 li a:hover b {
background:url(../images/button4-3.gif) no-repeat right top;
}
.cashadvancenav2 li.current a:hover {
color:#fff;
background:#000 url(../images/button3-3.gif);
cursor:default;
}
.cashadvancenav2 li.current a:hover b {
background:url(../images/button3-3.gif) no-repeat right top;
}
...and the html for the lower menu: Code: <ul class="cashadvancenav2">
<li><a href="#"><b>What's The Limit?</b></a></li>
<li><a href="#"><b>Quick</b></a></li>
<li><a href="#"><b>Low Fees</b></a></li>
<li><a href="#"><b>No Credit Check</b></a></li>
<li><a href="#"><b>Secure</b></a></li>
<li><a href="#"><b>States</b></a></li>
</ul>
I so BEYOND appreciate any enlightenment you can give me on this... Best- Anita-ACA Web I cannot figure out what I am doing wrong. My css drop down menu works perfectly in all of the browsers I have tested, except IE7. I have gone through a couple of different css drop down menu sites like suckerfish, cssplay to see if I could figure out what they have and I don't but nothing is standing out. Here is my CSS for the menu: Code:
#menu1 { width: 100%; background: #eee; height: 36px;}
#menu1 ul { list-style: none; margin: 0; padding: 0; float: left; }
#menu1 a, #menu1 h2 { font: normal 11px Verdana; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px; }
#menu1 h2 { color: #fff; background: url(MenuBackground.jpg); height: 30px; line-height: 30px; text-align: center; border-right: 1px dotted #c0c0c0; font-weight: bold; }
#menu1 a { display: block; color: #FFFFFF; background: #555555; text-decoration: none; }
#menu1 a:hover { color: #FFFFFF; background: #c0c0c0; }
#menu1 li {position: relative; float: left;}
#menu1 li li { width: 13em; }
#menu1 ul ul { position: absolute; z-index: 500; }
#menu1 ul ul ul { position: absolute; top: 0; left: 100%; }
div#menu1 ul ul,
div#menu1 ul li:hover ul ul,
div#menu1 ul ul li:hover ul ul
{display: none;}
div#menu1 ul li:hover ul,
div#menu1 ul ul li:hover ul,
div#menu1 ul ul ul li:hover ul
{display: block;}
and the piece I am having trouble with is the submenu's menu that should flyout to the right of the menu but it drops straight down behind the menu (Other negative listings list should flyout to the right when mouse over) Code:
<ul>
<li style="width: 120px;"><h2> Negative Items </h2>
<ul>
<li><a href="CreditCounseling.php" title="Other Negative Listings">Other Negative Listings</a>
<ul>
<li><a href="CreditCounseling.php" title="Credit Counseling">Credit Counseling</a></li>
<li><a href="PartialPayments.php" title="Partial Payments">Partial Payments</a></li>
<li><a href="student_loans.php" title="Student Loans"> Negative Student Loans</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode. In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule Code: #content {position:relative;z-index:-1;}
If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly. Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu". I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail. I would very much appreciate some assistance. Thanks in advance for your help! Dave On the menu at the top left of my site the spacing in IE is to much i want the same as firefox, but if i make the margin small firefox does not look right please help. Website link CSS file Code: /* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background: url("back.gif") repeat;
}
#wrapper {
width: 579px;
height: 558px;
background: #fff;
margin: 0 auto;
}
#header {
width: 575px;
height: 125px;
background: url("header.jpg") no-repeat;
background-position: top right;
margin: 4px 0px 0px 0px;
}
#nav {
list-style: none;
z-index: 2;
padding-left: 3px;
margin: 0px 0px 0px 0px;
}
#nav li a {
color: #fff;
font: normal 11px verdana, arial, sans-serif;
display: block;
width: 120px;
height: 24px;
background-color: #000;
padding-left: 10px;
text-decoration: none;
margin: 1px 0px 0px 0px;
}
h1 {
width: 120px;
height: 30px;
background-color: #333;
margin: 1px 1px 1px 3px;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
}
h2 {
width: 431px;
height: 30px;
background-color: #333;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
margin: 1px 0px 0px 0px;
}
#sidebar {
width: 129px;
height: 380px;
background-color: #ccc;
float: left;
font: normal 10px verdana, arial, sans-serif;
padding: 0px;
margin-left: 4px;
margin-top: 1px;
}
#content {
float:right;
width: 430px;
background-color:#fff;
margin-top: 0px;
font: normal 10px verdana, arial, sans-serif;
}
p {
margin: 5px;
}
Hello, I have a css menu (no ie) that I am almost finished with. you can view it and the source code here : http://www.ryanfarrell.org/newindex.php I have offset the second tier to the left by 10px so that I and you could see the problem. As you can see I put a red border around the nav div. I have a second div that will go under the whole menu system but right now the red border doesn't go around the whole menu, only the first tier. I could just increase the margin of the bottom div so that its not hidden by the second tier of the menu but when the user increases the text size, it gets swallowed up again. I hope you understand the problem. Any ideas? See anything wrong with the code? Thanks I was just wondering if anyone knew how to fix the UL and LI hierarchy problem in css with tabmenus. I wanted the border under my featured tab to disappear but it doesnt work well in IE. Please have a look; if you look at this code in Firefox it should show the first tab as being white without the black border on the bottom of it. In IE the black border is there because the UL border overwrote the LI border. Does anyone know a work around? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
border-bottom: 1px solid #808080;
height: 21px !important;
height: 20px;
}
li
{
float: left;
margin-right: 10px;
border: 1px solid #808080;
border-bottom: none;
}
li a
{
background-color: #f2f3f5;
color: #808080;
padding: 2px 10px 3px 10px;
display: block;
text-decoration: underline;
font: 12px arial;
}
body .featured
{
background-color: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
text-decoration: none;
font-weight: bold;
}
/* END TAB MENU */
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="featured">Create User</a></li>
<li>
<a href="#">Edit User</a></li>
<li>
<a href="#">View All Users</a></li>
<li>
<a href="#">Reports</a></li>
<li>
<a href="#">Log Out</a>
</li>
</ul>
</body>
</html>
I have this problem that the first level sub-menus don't stretch properly can anybody tell me where in the code to correct this thanks image: h ttp://img4.imageshack.us/i/77512707.png/ (can't post links so just join the h and t) css: Code: @charset "UTF-8";
/*------------------------------------------------------------------------------------------------------/
@section Style Framework */
/* First-level expected directory tag - li */
ul.dropdown li {
padding: 5px;
}
ul.dropdown *.dir {
padding-right: 20px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* Non-first level */
ul.dropdown ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
background-image: url(images/nav-arrow-right2.png);
}
/* Components override */
ul.dropdown-vertical *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
/*------------------------------------------------------------------------------------------------------/
@section Base Drop-Down Styling */
/* ALL LEVELS (incl. first) */
ul.dropdown {
font: 16px/normal Verdana, Arial, Sans-serif;
letter-spacing:-1.5px;
}
ul.dropdown li {
background-color: #333;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
}
/* Links */
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #6a6969 !important;
border-left-color: #6a6969;
background-color: #6a6969;
color: #fff;
}
ul.dropdown ul a.dir:hover { /* proposal */
background-color: #6a6969;
background-image: url(images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown a:active {
background: #6a6969 url(images/nav-sub-press.png) 0 0 repeat-x !important;
color: #fff;
font-family: "Myriad Pro";
}
/* NON-FIRST LEVEL */
ul.dropdown ul {
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
width: 100%;
font: bold 11px/1em Verdana, Geneva, Tahoma, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
ul.dropdown ul ul ul li {
background-color: #595959;
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
/* Custom elements */
#n-movies { width: auto; text-align: center; }
#n-movies ul { right: auto; left: 0; width: auto; text-align: left; }
#n-movies ul ul { left: auto; width: auto; }
#n-movies ul a { width: auto; }
#n-movies ul a.dir { width: auto; }
#n-movies ul ul a { width: auto; }
#n-movies ul ul a.dir { width: auto; }
#n-movies ul ul ul { left: 100%; }
Hi all, I took inspiration from http://www.cssplay.co.uk/ but it has been too long since I was playing with css. Firefox was just emerging and IE7 was something not talked about. I need to get back on the tracks and the new hacks are unfamiliar to me. The sub sub menu's border is interupted and changed to a white line, which is probably from the image below, when over the sub menu. http://www.jefspalace.be/css/index.php thanks! Jef Hello, I hope, somebody help me with my problem. I created website menu, but I don't know, where is a bug, because it doesn't show properly.. Preview: Site: As you can see, something is bad. Can you help me please? Very thanks! CSS: PHP Code: #navhome {float: right; width: 74px; height: 40px;} #navnews {float: right; width: 74px; height: 40px;} #navdates {float: right; width: 74px; height: 40px;} #navbio {float: right; width: 74px; height: 40px;} #navphotos{float: right; width: 74px; height: 40px;} #navdownload {float: right; width: 100px; height: 40px;} #navlinks {float: right; width: 74px; height: 40px;} #navbooking {float: right; width: 74px; height: 40px;} #navcontact {float: right;width: 74px; height: 40px;} .navLinks { background: url(../img/nav_icon.png) no-repeat center left; color: #FFFFFF; font-weight: bold; } .navLinks,.navLinksSelected { display: block; float: left; font-size: 8pt; height: 28px; padding-top: 12px; text-align: center; text-decoration: none; white-space: nowrap; width: 100%; } .navLinksSelected,a.navLinksSelected:hover { background: url("../img/nav_sel.jpg") repeat-x scroll center bottom; color: #b9d62e; font-weight: bold; text-decoration: none; width: 76px; } a.navLinks:hover { background-color: #b9d62e; color:#ffffff; text-decoration: none; } HTML: PHP Code: <div id="navcontact"><a href="#" class="navLinks">CONTACT</a></div> <div id="navbooking"><a href="booking.php" class="navLinks">BOOKING</a></div> <div id="navlinks"><a href="#" class="navLinks">LINKS</a></div> <div id="navdownload"><a href="#" class="navLinks">DOWNLOAD</a></div> <div id="navphotos"><a href="#" class="navLinks">PHOTOS</a></div> <div id="navbio"><a href="#" class="navLinks">BIO</a></div> <div id="navdates"><a href="#" class="navLinks">DATES</a></div> <div id="navnews"><a href="#" class="navLinks">NEWS</a></div> <div id="navhome"><a href="/" class="navLinksSelected">HOME</a></div> I have a problem with my menu when viewed in Firefox it's wrong it looks right in IE. any help would be great URL: www.castlecottagebandb.co.uk Code:
/** CSS Document **/
* {
margin:0;
padding:0;
}
#wrapper {
width: 700px;
height: 658px;
background: #fff;
margin: 0 auto;
}
#wrapper_big {
width: 700px;
height: 1300px;
background: #fff;
margin: 0 auto;
}
body {
background: url("back.gif") repeat;
}
#header {
width: 695px;
height: 125px;
background: url("header.jpg") no-repeat;
background-position: top right;
margin: 4px 0px 0px 0px;
}
#nav {
float:left;
list-style: none;
z-index: 2;
padding-left: 0px;
margin: 0px 0px 0px 0px;
}
#nav li a {
float:left;
clear: left;
color: #fff;
font: normal 11px verdana, arial, sans-serif;
display: block;
width: 120px;
height: 24px;
background-color: #000;
padding:6px 0px 0px 9px;
text-decoration: none;
margin: 1px 0px 0px 0px;
}
#nav a:hover {
background-color:#333;
}
h1 {
width: 120px;
height: 30px;
background-color: #000;
margin: 1px 1px 0px 5px;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
}
h2 {
width: 550px;
height:25px;
background-color: #000;
font: bold 16px arial, verdana, sans-serif;
padding: 5px 0px 0px 10px;
color: #fff;
margin: 1px 3px 0px 5px;
}
h3 {
font: bold 16px arial, verdana, sans-serif;
color:#000
}
#sidebar {
width: 129px;
height: 380px;
background-color: #fff;
float: left;
font: normal 10px verdana, arial, sans-serif;
padding: 0px;
margin-left: 5px;
margin-top: 1px;
}
#content {
float:right;
width: 560px;
background-color:#fff;
margin-top: 15px;
font: normal 14px sans-serif, verdana, arial;
}
p {
margin: 5px;
}
img {
border: 0px;
margin: 5px;
}
.footer {
text-align:center;
}
/* LightBox*/
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
Hi I used an online css menu generator. After tweaking it to my liking, I decided to take a look in IE7, the box that contains the menu is shifted out from the left of the page. It works fine in FF and Opera. Here is the code: Code: <ul class="menu"> <li><a href="#" class="active"><span>Home</span></a></li> <li><a href="#"><span>Trainer</span></a></li> <li><a href="#"><span>Studio</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> CSS Code:
.menu{
padding:0;
width:175px;
list-style:none;
margin-top: 10;
margin-right: 10;
margin-bottom: 10;
background-color: rgb(16,33,72);
background-position: left;
}
}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{
text-align:left;
height:40px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
I have tried putting it in a frame, another div. Moving it lower down the page. But it still does the same thing. I cant figure out what attribute is causing it. Thanks for looking I have a problem with left menu. In FF, Opera and IE8 everything is good. But in IE7 left "Main Menu" submenus are different length. But should be the same. I don't know what else to try. I would be very greatfull for any help. You can see the problem he www kodukomfort.ee I have this site here when i click on the side menu swapz or wantedz the main content part jumps down with it. How can i stop this from doing this It runs on joomla cms Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else. This is the original html template http://www.styleshout.com/templates...ce11/index.html This is my website with drop down menu added but it's not working http://ghazifly.110mb.com/marketplace11/ I guess the template CSS might clash with the dropdownmenu CSS. My index.html navigation code, I think theres nothing wrong with this code. Code: <!-- navigation starts-->
<div id="nav">
<ul><ul id="jsddm">
<li><a href="index.html">Home</a></li>
<li><a href="#">Drop Down Menu</a>
<ul>
<li><a href="#">Other page</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="index.html">Archives</a></li>
<li><a href="index.html">About</a></li>
</ul>
</ul>
<!-- navigation ends-->
My website CSS top navigation code: PHP Code: /* Navigation */ #nav { clear: both; padding: 0; } #nav ul { float: left; list-style: none; background: #E4E4E4 url(nav.jpg) repeat-x; padding: 0; margin: 0 0 0 30px; height: 45px; display: inline; text-transform: uppercase; } #nav ul li { display: inline; margin: 0; padding: 0; } #nav ul li a { display: block; width: auto; margin: 0; padding: 0 15px; border-right: 1px solid #dadada; border-left: 1px solid #fafafa; border-bottom: none; color: #555; font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; } #nav ul li a:hover, #nav ul li a:active { color: #326ea1; } #nav ul li#current a { background: #DBDBDB url(nav-current.jpg) repeat-x; } My dropdownmenu CSS code: PHP Code: /* menu styles */ #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #324143; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #24313C} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white} #jsddm li ul li { float: none; display: inline} #jsddm li ul li a { width: auto; background: #A9C251; color: #24313C} #jsddm li ul li a:hover { background: #8EA344} Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working, So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated. Thanks in advance |
|||||||