Help! Tab content not working in FF

[Ekiena]

Hi, I'm having problems with a tab content script/css in the way it displays in Firefox.

http://www.godirect.com.sg/etravel3/test/etravel.htm

It looks perfectly alright in IE, but in Firefox the big shaded tab on the far right just wouldn't line up. I have used 'html>body' for Firefox so the layout in IE remains unchanged. However, no matter how I try to extend the last tab out, anything over the padding margin set currently, the last tab gets swipe down below.

However, the code in Firefox works without a table enclosing it like this one:
http://www.godirect.com.sg/etravel3/Untitled-2.htm

I noticed that if you click on the last tab, there's an extended invisible margin to the right of it. That could be the reason why the tab pushes down when placed in a set table width. As I'm not allowed to redesign this, plus I'll probably burn in hell for using DIVs with tables. My question is, why does Firefox render the code like that, is there something I can do to fix this so it lines up properly like it does in IE? I'll appreciate any help I can get. Thank you very much.

(This tab content script was taken from Dynamic drive. It uses a JS file and CSS. http://www.godirect.com.sg/etravel3/test/tabcontent.js)

Below is the CSS that the tab panel uses (for Firefox)

.shadetabs1{
padding: 0px 0px -5px 0px;
margin-left: auto;
margin-right:auto;
margin-top: 0px;
margin-bottom: 0px;
font: bold 15px tahoma;
list-style-type: none;
text-align: left;/*set to left, center, or right to align the menu as desired*/

}
html>body .shadetabs1 li{
display: inline;
margin: 0;
margin: 5px 19px 5px -40px;
}

html>body .shadetabs1 li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 19px 62px 4px 20px;
margin-right: 5px;
border-bottom: 0px solid #778;
color: #2d2b2b;
width:206px;
background-image: url(images/tab_up.jpg);
background-repeat:repeat-y;
}
.shadetabs1 li a:visited{
color: #2d2b2b;
}

.shadetabs1 li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs1 li a.selected{ /*selected main tab style */
position: relative;
width:1px;
top: 0px;
}

.shadetabs1 li a.selected{ /*selected main tab style */
background-image: url(images/tab_down.jpg);
border-bottom-color: white;
}

.shadetabs1 li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

[MidiMagic]

Remember that Firefox puts all surrounding styles (margin, border, padding) outside any measured block object size. IE crams them inside the measured size.

The trick is to nest box objects the way you want them, one with measured size, the other with surrounding styles.

[Ekiena]

Hi MidiMagic,
Thanks for that tip! I was wondering why no one had replied, then probably no one has ever encountered this problem before. However (and thankfully) it has been solved. The trick was to wrap the entire tab plus divs and position them according to browser alignment using normal css syntax for IE and adding html>body for firefox browsers. However that was not the end of the nightmare when I saw it in IE7. Apparently in IE7 browsers, it does READ html>body before the css syntax - hence my site was IE6 and Firefox compliant but not in IE7! And with the impending push to IE7, my job was on the line!

So.. what's a girl to do..? I thought of adding Conditional Comments like [if IE]> syntax to differentiate the CSS files link for IE6 and IE7 but that wouldn't work because there isn't an equivalent for Firefox (unless someone knows - Please do tell!) and IE7 would just read the default CSS file meant for Firefox. It would have been OK if IE7 and Firefox displayed the same using one CSS but the positioning was different as explained by MidiMagic

Firefox puts all surrounding styles (margin, border, padding) outside any measured block object size. IE crams them inside the measured size.

In the end, I found my solution using CSS hacks that I found in this website http://www.webdevout.net/css-hacks :

IE 6 and below
    * html {}
IE 7 and below
    *:first-child+html {} * html {}
IE 7 only
    *:first-child+html {}
IE 7 and modern browsers only
    html>body {}
Modern browsers only (not IE 7)
    html>/**/body {}
Recent Opera versions 9 and below
    html:first-child {}

It was tedious and but I managed to get all IE6, IE7 and Firefox looking good now. I hope this was helpful for those who have trouble getting their CSS layouts similar in all browsers.