CSS - Problem In Displaying Tooltip Box With Jquery And Css

Sample can be seen at this link

I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo . This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image.

Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text.

and just some of the relevant css

Code:

#maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}

/* tooltip styling */
            .tooltip {
                display:none;
                background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
                height:163px;
                padding:40px 30px 10px 30px;
                width:200px;
                font-size:11px;
                color:#fff;
            }

            .switches {width: 400px;}
            .switches ul{
                font-size: .85em;
                margin: 1em 0 .5em 0;
                }
            .switches li{
                list-style-type:none;
                color:#800000;
                }

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?

Ok

I managed to fix my problem with firefox...

Now I am having a MAJOR problem with IE7.

I am creating a shopping page, and none of my lists are displaying correctly in IE7

I have spent hours and hour and hour and hours looking for hacks and fixes and I can not find any reason why.

I have a shopping menu to the left side of my main content... and it displays off to the side, very very beautifully, in EVERY browser except IE 7... even thought it displays in the right spot in IE6!!!
In IE 7, the shopping menu displays INSIDE the main content, not to the LEFT of the Main, like it does in EVERY other browser


I NEED to get this off to my client VERY soon, and I am out of ideas of what is causing this. I DONT want to have to redesign my entire page just to accommodate one stupid browser, because i LOVE how it looks fits my clients japanese site...

Here is my CSS

#shopping-bracket{
width: 950px;
min-height: 200px;
margin:0 auto;
}


#shoppinglist {
width:100px;
height: 600px;
float: left;
position: fixed;
visibility: visible;
top:60px;}

#shoppinglist li {
float: right;
list-style: none;
background-image: url(images/shoppingmenu-bgsmall.gif);
width: 100px;
min-height: 10px; }

#main {background-color: #ffffff;
margin: 0px auto;
top: 81px;
width: 732px;
min-height:600px;
}


my page is here http : // www pinktanpopodesigns com / babyconcept3 / shopping . html

please please please, I really need to get this fixed...

thank you for your help

Hi. i have a table with all my content inside and im trying to change the background color of the area outside of the table in my css file im using:
body {
background-color:#000000;
}

in dreamweaver it displays the area as black but when i upload the css file and try to view the page it shows it as white. i've checked it in IE And firefox.. what am i doing wrong?

I have recently changed my web site from being totally formatted using tables to being CSS based. I am not an expert at CSS so I have probably got some pretty bad code, so I cower somewhat in asking for help. Please don't be upset with me.

I have a problem with my web site displaying on IE 5.2 on a Mac OS X (10.3.6). I have no assess to this but a user has sent me a screen capture, and it doesn't seem to even be recognising the CSS. It displays okay on IE6 for Windows.

My web site is at:
http://www.elviscostello.info/

Your help would be greatly appreciated.
Thanks a lot,
JohnE