DD Tab Menu II HELP!!!

[x2interactive]

Hey guys!

I am trying to use the DD Tab Menu II in a web site that needs to be cross-browser. My problem is that in the CSS the padding-top has a different reaction in IE6 and OP7 than it does in FF1.5 and NS7. In the last 2 browsers I get large chuncks of open space under my menu, something that isn't good for my design.

Could you please help me?

[ddadmin]

.

Yep, I'm aware of this issue, just never gotten around to addressing it. I'll try and do it today, and update this thread.

[ddadmin]

Hmmm okay do you have a URL to the problem page on your site? I suspect you're using a <p> tag directly following the menu contents?

[x2interactive]

-------------

Script: DD Tab Menu II
http://www.x2interactive.co.uk/dokimes/cosmodata/test.html

Rest of your thread here...

-------------

Thanks for replying, I have posted the URL where you can find this page.
Have a nice day!

[ddadmin]

Ok, try adding a "margin-top" declaration to the CSS like so:


#ddimagetabs{
margin-top: 6px;
}

It's not 100% in Firefox, but the gap is gone as a result.

[x2interactive]

I am afraid, it didn't work... The result is even worse. Maybe you should remove the notice for the DD TAB Menu II that it works in FF and Netscape.

I will have to use something else. I was thinking of a script that sniffs out the browser and then chooses a different CSS file. Do you have anything like that on the web site? I saw you have a "Different CSS depending on OS (Mac or PC)", how about a "Different CSS depending on browser" script?

Thanks anyway for your time and effort
Have a nice day!

[ddadmin]

Hmmm I did a local testing of your page with margin-top added, and basically the tabs aligned as a result in FF 1.5. Defintely shouldn't look worse. Can you put the attribute back onto your test page so I can take a look?

[x2interactive]

<style type="text/css">

#ddimagetabs{
margin-top: 6px;
}

#ddimagetabs a{
display: block;
text-decoration: none;
font: bold 10px tahoma; /*tab font */
color: white; /*font color */
width: 91px; /*width of tab image */
height: 36px; /*height of tab image */
float: right;
display: inline;
margin-left: 0px; /*spacing between tabs */
padding-top: 8px; /*vertical offset of tab text from top of tab*/
background-image:url(img/general/tab_on.gif); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}

#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(img/general/tab_off.gif); /*URL to tab image onmouseover */
color: #2853A1;
}

#tabcontentcontainer{
width:598px; /*width of 2nd level content*/
height:36px; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=1 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>

Is this what you need?

[ddadmin]

Well, I meant add the extra attribute to the page http://www.x2interactive.co.uk/dokimes/cosmodata/test.html so we can get an actual look at the result.

[x2interactive]

Thanks for your help, but time was pressuring and we had to do something else. So we removed the script and just worked the text hovers with CSS.
Bye