"Sliding Doors" Tabs in a TABLE... help?

[JohnCC]

1) Script Title:

Sliding Doors Tabs Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/style/cs...ors-tabs-menu/


3) Describe problem:

I hope this is a simple fix (and not TOO dumb a question) but can someone help me to bottom-align the tabs of this script inside a table layout? (I tried a search on the forum here for "sliding doors" in case there's already some help posted about this script, but seems to be nothing yet...)

Align to bottom seems to work that way automatically in FireFox but NOT in IE. In IE the tabs are up above in the table row even though I put HTML there to align to the bottom.

This is probably a CSS vs HTML issue and while I have (a little) experience with HTML I am totally clueless on CSS. But I really like this tab menu so hopefully it can be fixed.

Sample code what I'm trying to do is online here:

http://www.johncolletti.com/slidingdoors/

Thanks in advance for any/all replies!

-JCC

[jscheuer1]

I don't see any scripts on that page.

[JohnCC]

Oh, sorry... it's external CSS file (i.e. the line in the HTML here...)

<link href="slide.css" rel="stylesheet" type="text/css">

Here is the contents of the SLIDE.CSS file:

#slidetabsmenu {
float:left;
width:100&#37;;
font-size:90%;
line-height:normal;
border-bottom: 1px solid gray;
}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}

#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

#slidetabsmenu a {
float:left;
background:url(tab-left.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(tab-right.gif) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: black;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}


-end-

[jscheuer1]

Sorry about the misunderstanding. I thought (without looking at your link to the code here on DD, my first mistake) that you were talking about a script that actually opens over an entire web page like sliding doors opening.

Anyways, I see no significant difference between your demo page in FF, Opera, IE 6 or IE 7. Do you mean perhaps IE Mac?

[JohnCC]

Here is a screen capture of what I'm getting in IE versus FireFox. See that white gap below the tabs underline? That's whats bugging me

http://www.johncolletti.com/slidingdoors/ie-ff.gif

I dunno about other versions of FF or IE but if/when it's solved in this one first I'll try to test for that later, I suppose.

-JCC

[jscheuer1]

Oh, I see. Sorry for being so dense. I'd first try getting rid of this:

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

If that doesn't get it, you could (still get rid of the above and) try a supplemental IE conditional style (after the link to the slide styles) like:

<link href="slide.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<style type="text/css">
#slidetabsmenu { /*IE only.*/
margin-bottom: -1em;
}
</style>
<![endif]-->

You can experiment with that -1em value, decimals allowed (-1.25em). Also, other IE only styles may be introduced in that conditional stylesheet, if desired. It can also be a link to a supplemental IE stylesheet instead:

<!--[if IE]>
<link href="ie_slide.css" rel="stylesheet" type="text/css">
<![endif]-->

[JohnCC]

Wow... that did the trick. Thanks a lot!

I just deleted:

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

...and now it seems to look the same in both IE and FF here. Kewl

But, hmm... so... why is this line even THERE in this code to begin with? I mean, it looks like it's some patch/hack that is *necessary* for IE for some reason in the first place -- am I breaking something more important to FIX this dumb spacing issue (cosmetic, really) at all?

Hm.

-JCC

[jscheuer1]

I picked that style because it looked like the one to go after. It obviously was introduced as a hack to overcome some display problem in IE. However, since your page is designed at least slightly differently than the default setup, something you have (or don't have - like a DOCTYPE) makes it so that the hack is no longer needed and instead of compensating for a problem, creates one.