Font size problem since changing page to XHTML

Poster: upton
Dated: Tuesday March 7 2006 - 17:55:53 GMT

The page in question is http://www.upton.uk.net/index.shtml

DHTML menu version is the latest.

Today I worked through the page in question, whilst validating it at http://validator.w3.org/ and now it has passed validation.

I've set up a style sheet, upton.css which is only called by this page at the moment:

body {background-color: white;font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 100%;}
h1 {font-family: Arial, Helvetica, sans-serif;color: black;font-size: 100%;font-weight: bold;}
h2 {font-family: Arial, Helvetica, sans-serif;color: black;font-size: 90%;font-weight: bold;font-style: italic;}
p {font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 100%;}
p.small {font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 80%;}
a {font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 100%;}
a.small {font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 80%;}
table.small {font-family: Arial, Helvetica, sans-serif;color : Black;font-size : 70%;}
td.small {font-family: Arial, Helvetica, sans-serif;color: Black;font-size: 70%;}

(The last line was an attempt to solve the problem.)

However, my DHTML menu on this page is presenting with large text - all the other pages which I have not changed to XHTML are as I want them.

In the page header I have:

<script type="text/javascript" src="http://www.upton.uk.net/scripts/milonic_src.js"></script>
<script type="text/javascript">
//<![CDATA[
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
//]]>
</script>
<script src="http://www.upton.uk.net/scripts/mmenudom.js" type="text/javascript"></script>
<script src="http://www.upton.uk.net/scripts/menu_data.js" type="text/javascript"></script>

The menu is in a table:

<table border="0" align="left" cellpadding="0">
<tr>
<td class="small">
<script type="text/javascript">
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="vertical";
left=0;
followscroll=1;
aI("text=Home;url=http://www.upton.uk.net/index.shtml;status=Back To Home Page;");
aI("text=Accommodation;showmenu=accomm;status=Accommodation;");
aI("text=Contact;url=http://www.upton.uk.net/contact.html;");
aI("text=Eating Out;showmenu=eatingout;");
aI("text=Events;showmenu=events;");
aI("text=History;showmenu=history;");
aI("text=Genealogy;showmenu=gene;");
aI("text=General Information;url=http://www.upton.uk.net/general.html;");
aI("text=Maps;showmenu=maps;");
aI("text=Public Houses;showmenu=pubs;");
aI("text=Reports/Newsletters;showmenu=reports;");
aI("text=Services;showmenu=services;");
aI("text=Social;showmenu=social;");
//aI("text=Sport;showmenu=sport;");
aI("text=Things to do;showmenu=amenities;");
aI("text=Views;showmenu=views;");
aI("text=Floods;showmenu=floods;");
aI("text=Industry;showmenu=industry;");
aI("text=Links;showmenu=links;");
}
drawMenus();
</script>
</td>
</tr>
</table>

menu_data:

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
bordercolor="#808080";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial, Verdana, Tahoma";
fontsize="9";
fontstyle="normal";
headerbgcolor="#000000";
headercolor="#000000";
offbgcolor="#FFFFF5";
offcolor="#515151";
onbgcolor="#FFFFE3";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=3;
pagebgcolor="#FFFFE3";
pagecolor="black";
separatorcolor="#808080";
separatorsize=1;
subimage="http://www.upton.uk.net/scripts/arrow.gif";
subimagepadding=2;
}

I've tried without fontsize="9"; but that made no difference.

Can anyone help please.

Thanks

Jackie

Poster: upton
Dated: Tuesday March 7 2006 - 18:50:02 GMT

Following advice in http://www.milonic.com/tablemenu.php I've moved the

<script type="text/javascript" src="http://www.upton.uk.net/scripts/milonic_src.js"></script>
<script type="text/javascript">
//<![CDATA[
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
//]]>
</script>
<script src="http://www.upton.uk.net/scripts/mmenudom.js" type="text/javascript"></script>
<script src="http://www.upton.uk.net/scripts/menu_data.js" type="text/javascript"></script>

into <body> but it hasn't made any difference...

Poster: Migru
Dated: Wednesday March 8 2006 - 8:42:06 GMT

Hi

I´m not using any "percentage" settings for fontsizes as for cross-browser capability:
browsers interprete this different. I´m using something like

fontsize="12px";

and that works.

If there is a conflict with css settings, it is recommended to use onclass and offclass definitions.
Please see
http://www.milonic.com/cssbasedmenus.php

Michael

Poster: vikenk
Dated: Wednesday March 8 2006 - 13:16:21 GMT

Hi,

Have you fixed your issue? When I look at the site, the font size seems very small, not very big.

Anyway. I think that the main issue is the CSS styling. The menu will take your font size from the <body> style, so If you've set the font-size in the body to 100%, then you should set the menu font-size relative to that, if you want to keep using percentages (which is what is suggested by CSS purists).

So, if you want your menu font-size to be smaller than that of the body, the you should set fontsize="80%"; or fontsize="0.8em"; and not fontsize="9";

Or, as Michael suggested, just use a fixed size in pixels :>)

Hope this helps.

Poster: Migru
Dated: Wednesday March 8 2006 - 13:22:16 GMT

Hi Viken

thanks for your "supplement".

I have another issue, would you please look at

http://www.milonic.com/forum/viewtopic.php?t=7233

and confirm? Or not - of course ! I don´t know how to get someone of Milonic to look after that, or do you think it is - as it is - correct?

Michael

Poster: John
Dated: Wednesday March 8 2006 - 13:56:30 GMT

As Viken suggested, px will give a much better cross-browser 'look' than %. There's no way to get it exact, short of something like browser-type sniffing and then applying different menu styles accordingly. In my book - not worth it.

Poster: vikenk
Dated: Wednesday March 8 2006 - 15:33:57 GMT



Michael,

It seems as if Andy has confirmed that it is a bug and is working on it.

See you soon.

Poster: Migru
Dated: Wednesday March 8 2006 - 15:49:40 GMT

Hi there

thanks, I´m aware.

Michael

Poster: upton
Dated: Thursday March 9 2006 - 9:51:05 GMT

Thanks for all the help.

I'm getting there in sorting out the font size. I've removed the font size from the body in the css file and changed all the font sizes to px instead of percentages.

I now need to find out why sub menus are appearing in a larger font, but links under these are as I would want them.

Until I have sorted it out, the front page is using a different css file to other pages.

Jackie

Poster: Migru
Dated: Thursday March 9 2006 - 12:36:33 GMT

Hi

as you have the menu in a table td and you´re setting the td class=small, then of course there is a conflict with the fontsize setting of the menustyle. This has to be considered, when td classes (with fontsizes) are defined.


Michael