Geeklog Forums

This isn't really related to Geeklog, but since I'm using Geeklog and spent a few hours unsuccessfully searching for an answer to my question I thought I'd ask here.

I've been making a site for a Japanese client (www.toyokoroedu.com) using Geeklog and I finally got it the way they want it. Almost. They wanted to have a fancy menu instead of just links, so I added a DHTML menu and stuck it in a block. However, I couldn't get the positioning to look perfect in both IE and Firefox through CSS. There was always one problem in IE and if I fixed that something else came up in Firefox.

To solve the menu placement problem I put it within an iframe in the block. This made it be at the exact spot they wanted in any browser. My next problem was that the menu opens horizontally, so if it was in an iframe the far right links would be cut off. To get around that I just made the width of the iframe wide enough to hold all of the links when opened and made the iframe transparent, so the content behind could be seen.

Everything works perfect in IE, but I have a problem with Firefox. The width of the iframe holding the menu is set to 400px, which overlaps the main content. Because it is transparent it looks fine, but in Firefox the text that is behind the iframe, along with any llinks, can't be selected or clicked on. It is a real pain when using Firefox in the admin area, because none of the blocks and other options cane be clicked on since the iframe is extending 400px to the right and thus covering them up.

I don't get this problem at all in IE, it all works perfect. But in Firefox anything behind the iframe isn't selectable or clickable, even though it is transparent. I tried setting the z-index of the iframe lower, but all this did was make the menu completely invisible.

You can see what I'm talking about by going to www.toyokoroedu.com in Firefox and trying to click on the link to the author (Admin) of the latest post. It can't be clicked on. But in IE it works fine.

Is there anyway I can get the stuff behind the iframe to be clickable, while still have the menu in the iframe on top? It does this in IE, but not in Firefox, so I'm thinking there must be some way to do it.

Thanks.


Jonah

ingenious idea, using the iframe. however, web standards don't make allowances for clicking underneath a frame even if it is transparent. Here is where IE doesn't pay attention to standards.

I would suggest setting the menu div to an absolute position. that position will cause the div to be taken out of the html flow so you will have to make a space in the block's TD to accommodate the size. doing this you won't have to have a file called menu.html.. the script could all be in your block.

a better way to go would be to use a relative position (relative to the container div/TD), but if your container is liquid and the divs are not properly nested, then your relative position will appear absolute (taken out of the html flow). hope that helps. I tried this one with your page and it seems to work tho I only tried it in IE and mozilla (with a couple of other tweaks to deal with the page width.

hope that helps

Thanks for the response. I originally had all of the menu script just in the block and it was working great in both IE and Firefox. The only broblem was that if a sidebar on the left was shown in IE (such as the Favorites or History) the position of the menu would mess up. It wouldn't recognize the browser window as being a new size and the menu would show up way too far to the right. It only happens if you are looking at the site, show the favorites window on the side and then go to another link within the site. Once you go to another link it will mess up. My client didn't like this, as it seems as a lot of people in Japan like to have their favorites always shown as a toolbar. I myself never browse like that, but they are paying for it so I had to fix it.

I messed a long time on the script and positioning but just couldn't get it to stay in the same place when that Favorites toolbar in IE was shown. That's when I thought about iframes, and it fixed the position problem but gave me this other problem.

What did you do to get it to work? I just want it to be in the same spot regardless of browser width, but it seems like whatever I do there is always something that messes up in either IE or Firefox.

I was afraid that I wouldn't be able to allow for clicking underneath a transparent iframe. Because it's (the menu) DHTML the positioning is hard. as it won't stay inside a div or anything. I guess I'll just have to figure out some other way to do it. I'll go back into the script and try different positioning things. If you have any other ideas, please let me know.

Thanks,


Jonah

well, I've looked at it now in IE, Moz, and Firefox and I don't see the menu moving anywhere odd with or without the sidebar. and really it shouldn't anyway as the page seems to be a fixed width.

perhaps take a look at Blaine's glMenu, which he uses at portalparts. It is DHTML based AFAIK and looks cool too. At the very least check out how he has positioned it on the page, etc.

sorry I couldn't be more help

It probably looked OK because I had moved the block with the iframe back. This site was suppossed to go live yesterday (that's when they found out the problem with the sidebar), so I didn't want it to look all weird while I was working on it. So I made the blocks I was testing only visible to admins probably right around the time you looked at it.

Anyway, I fixed it. I got rid of the iframe and put it all in a div tag that was aligned relatively. That worked great in IE, but Firefox didn't like it. If I added a litle find position function and threw that in there to change the position when resized Firefox liked it but IE didn't. So what I ended up having to do was specify those two different conditions for IE and Firefox. It's working good so far and I showed it to my client and they are happy. I guess it was a pretty simple fix and I should of thought about it earlier but at least I got it working now.

Thanks again for your help.


Jonah