Hello

Could somebody please tell me the name of the CSS styles which control the font for the control panel and the font that comes with modules such as User Online.  At the moment I am editing:

body { font: small Verdana, Geneva, Arial, Helvetica, sans-serif line-height: 1.1;   }

 td,th,div,span,p,a,input,textarea{font-family:Verdana, Arial, Helvetica, sans-serif; color:#303030; font-size: 9px;}

.Head   {
    font-size: 1.1em;
    font-weight:  bold;  color: #fff;
}

.SubHead    {
    font-size:  0.9em;
    font-weight:    bold;
}

.SubSubHead {
    font-size:  0.9em;
    font-weight:    bold;
}

.Normal, .NormalDisabled, .NormalTextBox, .NormalRed, .NormalBold,.NormalTextBox
{font-size: 1.0em;
    color: #303030;
    font: normal 0.9em verdana, tahoma, arial, helvetica, sans-serif;
}

.NormalRed
{
 font-size: 1.0em;
    font-weight: bold;
    color: #ff0000
}

.NormalBold
{
 font-size: 1.0em;
    font-weight: bold
}

But the font is displayed as extra extra large, (approx: 50px;) any suggestions?

Are these the styles I need or am I missing something?

Thanks

Laura

. 

Hi Sam

Thanks for the advice but somehow what ever changes I make are ignored.  e.g. the font displayed in my Users on Line is massive.

Also the background colour I have set for my containers is also ignored.

I don't know what to try next. I am obviously doing something wrong, but what?

Any suggestions.

Thanks

Laura

Laura,

The text sizing control works by having the base font-size defined for Body, .Normal, .NormalTextBox, TH, TFOOT, THEAD, TD, SPAN, DIV, A. All other classes use relative font-sizes (defined using "em" units). If text size appears abnormally large or small, it is most likely because the style that is active on the element has an incorrectly defined relative value. You can find out the exact cause by doing a bit of detective work.

First, download the IE Developer Toolbar here: http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en

Once this is installed, go to the page with the problem, then select "View DOM" from the toolbar. This will cause your browser window to be split horizontally and a new menu will appear. Next, click Find > Select element by Click... Now, you will be able to go to any element of the page and click on it to see exactly what properties and CSS attributes it has. You can diagnose the problem by seeing exactly what CSS classes are acting on the text that is sized incorrectly and fixing those. Sometimes, you have to work your way up through its parent elements to find the true culprit.

This is how I troubleshoot CSS issues and it makes the process a lot easier than guesswork.

HTH.

Nik