Knowledge Base support case for Likno Web Accordion Builder, abstracted and stripped of all user’s private info.


Initial Email From:
Bill
Initial Email Subject: font size in accordion builder
Support Case Month: November 2012

I am testing the trial version so there is no url at this point.

I'm trying to change the font size within all of the panes. Using the font-size property, i get no change in font size if I specify a font size of small or medium or whether I use 10px or 12px. The changes do show up in the preview screen in the tool but there is no effect in the browser. I am using Microsoft Web Expression as my primary web tool if that makes a difference.

Any help with this would be appreciated.

I'm a long time user of your allwebmenus product and look forward to working with this as well.

Regards, 
Bill

Reply From: Likno Customer Support

Dear Bill,

This happens because you are using a table, which by default resets the font size when you do not have a valid DOCTYPE for your page.

Can you please try changing this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

With this:

<!DOCTYPE html>

<HTML>

The above is the standard DOCTYPE for HTML5. If for some reason you want to use the old HTML4 Transitional DOCTYPE, then use this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Bill

Well almost...
I'm not much at html coding so maybe you can see what's going on.
When I sub the changes (tried both) it gives me the results that you'll see at http://ocdirect.com/staging/faq_test1.html (no menu item for this one.)
If you compare it to the normal linked faqs page you can see that the page 'breaks'
I can't seem to find where the problem is coming from.
If you have any ideas on how I can get the page back to normal, I'd appreciate it.

Regards,
Bill

Reply From: Likno Customer Support

Dear Bill,

I found a couple of changes that will fix the problem. The whole brake is related to the last table row, so you will need to fix it there.

Please try changing this:

<tr>

                <td height="32" width="165"><img height="32" border="0" width="165" src="images/main_5.jpg"></td>

                <td height="32" background="images/main_6.jpg" width="558">

                <p align="center"><font size="1" face="Arial" color="#F7DA8A">Copyright &copy;

                2010-2012 Woodbine Hill Kennel</font></p></td>

                <td height="32" width="224"><img height="32" border="0" width="224" src="images/main_7.jpg"></td>

</tr>

Into this:

<tr>

                <td height="32" width="165"><img style="display: block;" height="32" border="0" width="165" src="images/main_5.jpg"></td>

                <td height="32" background="images/main_6.jpg" width="558">

                <p align="center" style="margin: 0px;"><font size="1" face="Arial" color="#F7DA8A">Copyright &copy;

                2010-2012 Woodbine Hill Kennel</font></p></td>

                <td height="32" width="224"><img style="display: block;" height="32" border="0" width="224" src="images/main_7.jpg"></td>

</tr>

Note that there is also a big difference between having a valid DOCTYPE or not, especially in IE:

If you have DOCTYPE, then the “width” and “height" you set in the CSS do *not* include the padding. If you have an invalid DOCTYPE (or none at all) then the padding is most likely included in the width/height.

This is in case you see other sizing issues elsewhere.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Bill

Kostas,

Thanks so much for your help with this. You pinpointed the problem perfectly. I've changed to the new code that you've been suggesting and everything works just great.
Thanks for hanging in there with me.

Regards,
Bill