Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:26
How to centre a tabs menu with FireFox?
Poster: Steve(spt)
Dated: Thursday November 8 2007 - 18:24:10 GMT
Hello folks,
Thanks for reading this. I keep reading that web sites should use CSS for the style part of your site.
So I thought I would do a test page and ran into a problem with centring my tabs in FireFox.
heres the test page ;- http://www.jupiter-ace.co.uk/test.html in IE 7 is fine, but in FireFox the tabs are left of centre.
I've tried all day to work this out and I must be overlooking something. The rest of the site, does centre in FireFox correctly because I used
this in the CSS code in my original code:
.tabs
/* FireFox */
{background-image: url(graphics/background.gif);text-align: -moz-center; }
But it fails the W3C CSS Validator when used in my new test file that mostly generated with a new CSS file.
So, is the centring of the TABs a browser problem with IE or FireFox or something I'm overlooking/ not set?
Many thanks in advance for any help.
Steve(spt)
Re: How to centre a tabs menu with FireFox?
Poster: Ruth
Dated: Thursday November 8 2007 - 19:28:32 GMT
Hi,
It's going to have something to do with the divs and widths. There is a fix, but many don't like using things like tables. This should take care of the issue, and as far as I could check it didn't show as invalid at the w3c validation. Change your div id=menu to the following. Notice I added a table with center tags and a width equal to the total of the tabs.
Code:
<DIV id=menu><center><table cellpadding=0 cellspacing=0 border=0 width=640>
<tr>
<td><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
// -->
</SCRIPT>
<SCRIPT src="jupiter_menu_data-test.js" type=text/javascript></SCRIPT></td>
</tr>
</table></center>
</DIV><!-- Menu End --><!-- menu bar -->
<tr>
<td><SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
// -->
</SCRIPT>
<SCRIPT src="jupiter_menu_data-test.js" type=text/javascript></SCRIPT></td>
</tr>
</table></center>
</DIV><!-- Menu End --><!-- menu bar -->
The following is the main menu code changes.
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
position="relative"; // added
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative"; // added
style=menuStyle;
That seemed to fix it, but you might want to test in whatever browser and versions you have.
Ruth