Please don't paste code here - you'll get more responses if you create a test case on jsfiddle.net (don't paste the WHOLE html, but the appropriate elements - same for CSS and JS).
___ Oskar Krawczyk http://nouincolor.com On Wed, Nov 10, 2010 at 10:19 AM, Quest <[email protected]> wrote: > Hey there > I have a strong problem using Tips on a website. > There are several elements, Images and floating Divs that shall have a > Tooltip. > The first element in each row always has a correct tip, the others in > the same row not. > Looking at firebug I can see that the Tips element is created and > filled with the correct data for each element. > But the value for the CSS-attribute 'left' is about 1000 px too low so > the tooltip is out of the left border of my window. > > Here is the HTML code for my page: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <!--<meta http-equiv="Content-Type" content="text/html; > charset=ISO-8859-1" />--> > <link rel="stylesheet" type="text/css" href="css/screen.css" /> > <script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></ > script> > <script type="text/javascript" src="js/mootools-1.2.5.1-more-nc.js"></ > script> > <script type="text/javascript" src="js/upload/Fx.ProgressBar.js"></ > script> > <script type="text/javascript" src="js/upload/Swiff.Uploader.js"></ > script> > <script type="text/javascript" src="js/scripts.js"></script> > <title>Showroom</title> > </head> > <body> > <div id="page"> > <div id="head"> </div> > <div id="crumbs"> > <div id="crumb" rel="Overview" style="display: inline;"> > Übersicht > </div> > </div> > <div class="clear"></div> > > > <div class="rack" id="rack"> > > <div class="rack_layer toplevel" rel="ProductCategory"> > <label> > A Label </label> > <img class="rack_element" src="files/Mediafile/ > f8f383eb76b7aab7d8372785c0cdc943.jpg" alt="DIN Lang, 8 Seiten" > title="a title" rel="Mediafile/1" height="120" width="120" /> > > <img class="rack_element" src="files/Mediafile/ > f8f383eb76b7aab7d8372785c0cdc943.jpg" alt="DIN Lang, 8 Seiten" > title="a title" rel="Mediafile/2" height="120" width="120" /> > <div class="clear"> </div> > <div class="rack_element more" rel="ProductCategory/1" alt=""> > <label> > mehr ... > </label> > </div> > > <div class="clear"> </div> > </div> > </div> > <div class="border_bottom"></div> > <div class="mirror_bottom"></div> > </div> > <div id="overlay"> > </div> > <div id="loading"> > </div> > </body> > </html> > > > The code that is executed after page load: > function initRack(){ > $('loading').fade('hide'); > $('overlay').fade('hide'); > var tips = new Tips(); > $('rack').store('tips', tips); > $$('.rack_element').each(function(el){ > rel = el.get('rel').split('/'); > title = (el.get('tag') == 'img') ? el.get('title') : > el.getChildren('label')[0].get('html'); > el.store('crumbtitle', title) > .store('type', rel[0]) > .store('object_id', rel[1]) > .store('tip:title', title) > .store('tip:text', el.get('alt')); > }); > $$('div.rack_layer').each(function(el){ > el.store('navlevel', 1); > }); > tips.attach($$('.rack_element')); > } > > window.addEvent('load', function(){ > initRack(); > }); > > > CSS: > html, body { > color: #606060; > font-family:Arial,Helvetica,sans-serif; > font-size:12px; > margin: 0px; > } > > body > div { > width: 990px; > margin: 0 auto; > } > body > div > div { > width: 990px; > } > > div#page { > z-index: 10; > } > div#loading { > z-index: 20; > background: url(../img/loading.gif) #efefef no-repeat center > center; > position: absolute; > height: 100%; > width: 100%; > top: 0; > left: 0; > visibility: hidden; > } > div#overlay{ > z-index: 30; > background: #efefef; > position: absolute; > height: 100%; > width: 100%; > top: 0; > left: 0; > visibility: hidden; > } > div#head { > height: 113px; > background: url(../img/back.jpg) no-repeat; > } > > div.border_bottom { > width: 984px; > height: 1px; > position: relative; > background: #ccc; > } > > div.mirror_bottom { > height: 40px; > background: url(../img/content_mirror.png) no-repeat; > } > > div#crumbs { > background: url(../img/path_icon.gif) 23px 4px no-repeat; > float: left; > margin: 5px 0 10px;; > padding: 0 10px 0 28px; > height: 15px; > overflow: hidden; > } > > div#crumbs > div { > display: inline; > color: #a0a0a0; > font-size: 11px; > padding: 0 7px; > cursor: pointer; > } > > div#crumbs > div + div { > background: url(../img/path_separator.gif) no-repeat center left; > } > > div#createForm { > position: absolute; > top: 100px; > left: 100px; > width: inherit; > background: #fff; > z-index: 40; > } > > div#createForm > form { > margin: 5px; > } > > div#createForm > form > label { > width: 150px; > display: block; > float: left; > } > > div#createForm > form > br { > clear: both; > float: none; > } > > div.rack { > } > > div.rack_layer { > /*border-bottom: 3px groove #005FAA;*/ > background: url(../img/content_bg.jpg) repeat-y; > width: 990px; > } > div.rack_layer.toplevel { > /*background: #efefef;*/ > } > div.rack_layer > label { > width: 990px; > height: 25px; > line-height: 24px; > padding-left: 19px; > display: block; > margin-left: 1px; > background: url(../img/racktitle.jpg) no-repeat; > font-weight: bold; > } > .rack_element { > cursor: pointer; > width: 120px; > height: 120px; > border: 1px solid #dfdfdf; > margin: 5px; > } > div.rack_element{ > float: left; > overflow: hidden; > } > div.rack_element.more { > height: 25px; > line-height: 24px; > border: none; > margin: 5px; > float: right; > } > div.rack_element > img { > height: 120px; > width: 120px; > } > > div.clear { > height: 0px; > font-size: 0px; > line-height: 0px; > float: none; > clear: both; > } > > /*** Tooltips ***/ > .tip-wrap { > z-index:1000; > } > .tip { > background:url("../img/tip-text.png") repeat-y scroll left top > transparent; > font-family:tahoma,arial; > width:275px; > } > .tip-top { > background:url("../img/tip-top.png") no-repeat scroll left top > transparent; > height:20px; > width:275px; > } > .tip-title { > color:#606060; > font-weight:bold; > margin:0 30px 0 24px; > } > .tip-text { > color:#606060; > padding:10px 30px 10px 24px; > } > .tip-bottom { > background:url("../img/tip-bottom.png") no-repeat scroll left > bottom transparent; > height:20px; > width:275px; > }
