0

I've got a Joomla 1.5 site with CK Forms installed. It all works fine but there is a tooltip on the captcha which won't display right. It displays in 1px font size. If I try to debug the element in Firebug then the font is set correctly. It has two properties:

#ckformcontainer .ckform div.error {
  display: none;
  font-size:12px;
}

If I try to remove the display:none using Firebug then it displays correctly, but when using the rollover the font is really small. Have a look here:

https://www.autismworks.co.uk/expressionofinterest

Scroll to the bottom and look for the 'i' near the captcha.

So far I've worked out that the 1px font size is actually coming from the body element despite being overwritten by other styles?!

The element is:

<div id="errorck_captcha_code" class="error"> Please try to enter the captcha again, the code was not accepted this time. </div>

I'm using Firefox 9.0.1 (will upgrade to test) on Windows 7 but this seems to happen in IE as well.

Adamantus
  • 813
  • 1
  • 12
  • 30

1 Answers1

1

You need to set a CSS rule to force .tool-tip to a larger font size. This will solve it:

.tool-tip {
    font-size: 14px !important;
}

Place that in one of your CSS files.

MrCode
  • 63,975
  • 10
  • 90
  • 112
  • Is this something to do with inline styling? That's the only reason I can see to use !important. – Adamantus Jun 12 '12 at 08:34
  • You might not need `!important` depending on where you place that style. If it works without it then great, if it only works with `!important` then it means some other CSS somewhere is overriding the font size. – MrCode Jun 12 '12 at 08:58
  • I noticed that in my html that tips.css is missing which is a ck forms css file. I downloaded CK forms again but tips.css is not packaged with it. I couldn't find any other reference to .tool-tip in my styles. – Adamantus Jun 12 '12 at 09:34
  • Then you shouldn't need `!important` but you do need a font size on `.tool-tip`. The tool tip library you are using is part of Mootools not CKforms – MrCode Jun 12 '12 at 09:37
  • Thanks that worked fine but I still have no idea why. I searched for the class tool-tip in my html and found nothing. Also found nothing in the js, where is this .tool-tip please? – Adamantus Jun 12 '12 at 10:18
  • As I said, your Tooltips are part Mootools not CKForms. The Javascript is probably causing the tiny height which might explain why you can't find any `.tool-tip` styles. – MrCode Jun 12 '12 at 10:33