Tooltip and overflow (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

carrie -> Tooltip and overflow (7/17/2007 15:59:33)

Hi all,

I'm using a DHTML tooltip script in addition to other .css elements on this page: http://www.getinkpr.com/press.asp
Notice that the tooltip on the right-most clips extends under the scrollbar (.css overflow: scroll) in Firefox on Mac (and apparently that's the only browser with the problem). I believe this is a .css problem, and not dhtml.
How can I make sure the tooltip displays on top?

Let me know if you need further info.

Thanks for any help,
Carrie



Tailslide -> RE: Tooltip and overflow (7/17/2007 16:33:51)

You could try giving both the menu and the tooltips z-indexes with the tooltips getting the higher number - that might help.

Also I noticed that you're using this DOCTYPE along with an xml declaration: 

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


You really want to change that as the xml declaration will throw IE into quirks mode and also IE doesn't actually understand XHTML 1.1

Try replacing with this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



carrie -> RE: Tooltip and overflow (7/17/2007 16:48:18)

Thanks Tailslide,

I actually did have a different doctype, but had to change it to this to have the site properly centered.
I know it sounds silly, but certain things would not work until I changed the doctype to this.
Ironically, as far as I can see, it is displaying fine in every major browser aside from Firefox in Mac.
I will try the z-index.

Carrie



Tailslide -> RE: Tooltip and overflow (7/18/2007 2:58:32)

I get what you say about the DOCTYPE - but basically what you've done is throw IE into error mode which is always risky.

The best way to centre a layout is to add text-align:center in the body rule (which you have) for older IE versions and then add margin:0 auto; to the containing div which will centre that div. Add in text-align:left to normalise the text alignment.

It might sound pointless as you've got it generally working at the moment however it's risky trying to specify a flavour of markup that you're not actually using (XHTML 1.1) and it's risky relying on IE's error displaying always being the same.

If for some reason your web server actually takes the XML declaration seriously and serves it as XML then you won't be able to even open the site in IE (it will ask if you want to download the page instead). Some web servers ignore what we put in the page itself and just server the page as text/html anyway. Some don't (mine doesn't) and will actually do what you're telling them to do. The problem might arise if in future yours changes too...

I'm not trying to give you more work pointlessly - I just worry about stuff like this!



carrie -> RE: Tooltip and overflow (7/19/2007 10:14:38)

Tailslide,

The z-index for the tooltip is already set at 100. There is no z-index on the div with the overflow set to scroll.
I read that z-index only works when the element is positioned, so I set the position to static, and the z-index to -1. I don't however, have a mac to preview in Firefox. Any chance you do? or anyone else?

http://www.getinkpr.com/press-3.asp

Carrie



Tailslide -> RE: Tooltip and overflow (7/19/2007 10:52:33)

Seems ok in FF 1.5 on the mac for me.

You don't need to set the index to -1 - any figure less than 100 would do the trick.



carrie -> RE: Tooltip and overflow (7/19/2007 10:59:56)

Really?

Tooltips on right edge and top right are not popping up under scrollbar anymore?

Carrie



Tailslide -> RE: Tooltip and overflow (7/19/2007 12:14:09)

Ah no sorry - my mistake, they are still under the scrollbars - it's a case of RTFQ on my part!

I give up! I don't know if the problem persists if the page is fluid - i.e. doesn't get a scrollbar. It might be worth going for a fluid design with a simpler setup - e.g. a centred div with a width of say 80% or whatever. But it looks to me like a FF mac issue as it's fine on other mac browsers.

I'd try asking on the DD forum - they're very good at problem solving their scripts there and they've probably been asked this before.

edit: ah I see you have - no doubt they'll work it out if it's workoutable.






carrie -> RE: Tooltip and overflow (7/19/2007 13:02:16)

Tailslide,

I think it's within this function that this problem will be resolved:

function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

The above function has to do with tooltip positioning. All other browsers show the tooltip normally. In Firefox on windows, if you mouseover the rightmost image on that page, the tooltip will display on the left side of the mouse instead of going 'under' the scrollbar. I think if I can adjust this function, I can adjust the position of the tooltip.
That may work, but then what about the top right images outside of the overflow container. Those are going under the scrollbar as well. Maybe it will work for those too.
What do you think?

Carrie



Tailslide -> RE: Tooltip and overflow (7/19/2007 16:37:47)

I'm not nearly good enough at JS to help unfortunately - keep us up to date if you find the solution elsewhere though.



carrie -> RE: Tooltip and overflow (7/19/2007 16:45:35)

JS is not my forte either, I can't write it but I can modify.
How does the page look now in FF on Mac?

Carrie



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875