cniknet wrote
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
Hi Nik
Thanks for the advice, I found the toolbar very useful, I managed to locate the problem for my extra large text.
Originally: 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;}
Changed to:
body, html {margin:0px; padding:0px 0px 5px 0px; background-color:#5B7C7C; background-image:url(pagebak.jpg); background-position:top left; background-repeat:no-repeat; height: 100%; text-align:center; }
/*Common*/
.Normal, .NormalTextBox, th, tfoot, thead, td, span,div, a, input, textarea{
font-family: Verdana, Arial, Helvetica, Sans Serif; font-size: 10pt; font-weight: normal; color:#303030;line-height: 1.1;}
I am pleased to say that this worked. My fonts are now displayed as intended.
However, I am still puzzled about the background of the container title. No matter what I do it remains black.
Using the IE Developer toolbar.
I click on the module on the page and it displays the current style sheet, for the container holding the module.
However, as well as the styles pertaining to the current container. An added property element is also shown which does not appear anywhere in my skin.css nor my container.css.
The element in question is: backgroundColor: black. Where can this be coming from, I have scoured my skin.css and container.css and unable to locate it's source?
I looked on the default.css and deleted the whole section entitled
/* LEGACY STYLES from DNN 1-2 */ which contained the only black background I could find.
.TabBg {
background-color: black;
}
I have even tried using downloaded containers. But the result is the same.
Below is the containers. css file taken from the Red Leaf container from DnnCreative.com.
/* style for module title */
.Title_Sponsor {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
color: #fff;
}
.containerholder_sponsor
{
border: 1px solid #006633; /*dark green */
margin-bottom: 10px;
background: #E8FFE8; /*pastel green text box container */
}
.containerholder_transparentbox
{
border: solid 1px #706633; /*very dark green */
background-color: transparent;
margin-bottom: 10px;
}
.actions_sponsor
{
border-bottom: 1px solid #006633;
padding: 2px 5px;
background-color:#5B7C7C; /*titlebackground */
}
.container_sponsor
{
padding: 6px 5px 0px 5px;
/* height: 100%; */
}
.footer_sponsor
{
}
.sponsor
{
font-size: 1.0em;
}
I have changed the default red to a green to suit my skin.
However, when it is uploaded it too shows as black.
I would be grateful if somebody could please offer me a direction where I might look next.
I have been trying to find a solution to this for days.
I have even looked at the default.css and removed the only reference to a black background that I could find, it didn't help either.
Thanks
Laura