DD Tab Menu II

[joshzam]

Script: DD Tab Menu II

I love the fact that this script is controlled with CSS and HTML. Very nice.

So anyway, I'm trying to create a tab menu and I'm getting different results on different browsers. I know it indicates that the script works with IE, but it seems to work fine in FireFox and NOT in IE. Here are the differences:

My page is currently at http://www.joshzam.com/ibertoldo/
It's a work in progress. You can see it for yourself and check out the source code if you like.

Looking good in FireFox


A gaping space in IE


I think I've found the culprit! There is a line in the body:
<br style="clear:left" />
If I leave it as it is, I get the aforementioned results. If I remove this line completely, the page looks fine in IE but now FireFox has no #tabcontentcontainer and the text spills out like this:

Spilling out of FireFox


Now looking good in IE


Can anyone please help me find a happy medium - a solution to please both browsers. I don't have much hair left to pull out. Thanks in advance.

Josh

[JF sly]

Maybe try just removing the "BR" and leave the rest there so it would be:

<style="clear:left">

[joshzam]

I tried getting rid of just the "br" like was suggested, but that was essentially the same as getting rid of the entire tag (like I had tried before). I got the same results. Thanks for the suggestion, but still no luck.

I don't want to have to resort to programming a browser-check and then program two different options depending on the browser, but if that's the only solution...(?!)

This disparity doesn't appear in the example on the script's example page. I checked the example in both FF and IE. They look alike. It's only mine that changes with the browser. Any ideas? This one's a mystery.

[joshzam]

I reconstructed the page one element at a time to see when that extra space would appear and I have a new suspect! I no longer blame the <br style="clear:left" /> tag.

Each of my ddimagetabs (the first level buttons) are 129px with 0px between them. That should total 774px (129*6=774). And that is exactly how wide both the tabcontentcontainer and the table in which it is placed are. Should work no problem. But IE doesn't agree awith my math and creates an extra line:



So, just for fun, I made both the tabcontentcontainer and the main table 777px wide. This is what now happens:



As you can see, that gap is finally gone but there are now extra pixels at the end of the 2nd level. Obviously! 129*6=774 and I gave it a 777px container. That's why those extra 3px at the end are empty. But if I make the container any smaller (even 776px) that extra gap between levels comes back! That's what I don't understand.

This larger container solves the "extra gap" problem, but looks pretty unprofessional with that new empty space at the end of the 2nd level. Does anyone know how to get the contents to fit the container? I feel that someone who understands how this script works could point me in the right direction. Please...

PS - this problem only appears in IE. FireFox handles everything perfectly just as I would expect it to.

[joshzam]

I've been playing around for a few days now and still no luck. Any comments or advice (for admin or not) would be very welcome. I think the pretty screenshots I've included spell out my problem nicely and would make anyone want to help. Don't you agree?

[joshzam]

Please, people. I'm getting desperate here. I hate it when people bump their own threads, but I find it hard to believe that almost 500 people have viewed this thread and no one can give me a hand with this. I promise this is the last time I'll write if no one replies. *Any* advice would be much appreciated. Thanks in advance.

[cr3ative]

I've analyzed your problem and tried many solutions, none of which work without side effects.

Sorry
cr3ative

[joshzam]

Hey, thanks to everyone who took a look at this. I really do appreciate it. Shame no one knows how to fix this. I never though anything in programming was impossible before.

Does anyone know of another script or method of creating this effect?

[ddadmin]

I ran into this bug while implementing the example, but somehow got past it after fumbling with the HTML. However, this is an issue, and from what I can tell a fundamental one as far as how Firefox and IE renders a DIV tag differently as far as spacing. I'm not sure there's necessarily a fix based on tghe current script setup, but I'll take a second look when time permits.