Font-size extremely large!

HTML & CSS
1

I am working on a two language website and I have a very strange thing gong on when changing the language as you can see in this image

As you can see is the text suddenly very large while this are the font properties for body, wrapper, header and header content:


body {
 font-family: 'Open Sans', sans-serif;
 font-size: 100%;
}

#wrapper {
 font-size: .75em;
}

#header_panel {
 font-size: 1em;
}

#header_info ul {
 font-family: 'MS Sans Serif', Geneva, sans-serif; 
}

#header_info ul li a {
 font-size: 1em;
}

#header_info ul.languages {
 font-family: 'MS Sans Serif', Geneva, sans-serif;
 font-size: .83em; 
}

As you can see do I use Google font-family: ‘Open Sans’, sans-serif; on the body tag and are in my opinion the font settings for the other divs not out of the ordinary! I even changed the websafe font: font-family to ‘MS Sans Serif’, Geneva, sans-serif; for the content showing this. After I refresh the page a few times every everything is back to normal again.

What could be the reason that this is happening
Thank you in advance

2

People will need a link to this, but as you posted one in another thread, I’ve had a look and can’t see that text anywhere. You’ll have to narrow this down for us a bit.

3

Ralph the text is top right and is the language selection section (En/GR):

http://www.hotelamaryllis.gr/hotel-amaryllis-photographs.cfm?language=gre

However it is not enlarged in any of my browsers Mac/PC.

4

Oh, right. Perhaps some browsers respond to the invalid font declaration here?

#header_info ul li a {
color: #4A4C4B;
text-decoration: none;
font-style: normal;
[COLOR="#FF0000"]font-size: 100;[/COLOR]
text-transform: lowercase;
}
5

I opened the link in FF and couldn’t see a problem, so I closed it again. Then I re-read Paul’s post, went back to look again, and it was displaying as in donboe’s screenshot. I refreshed the page, and all was well. I can’t reproduce the effect in Chromium.

6

Hi Ralph . I saw that one as well. I corrected that but it is still there. At least on the browsers I use. The problem is, just like Paul O’B said. there are many people that didn’t see the problem so it’s very hard to say what’s going on

7

Hi TechnoBear. I have the same and i don’t see anything I did wrong except for what Ralph noticed.

8

I’m going cross-eyed trying to look at this in Firebug, so I’m not entirely sure, but you have this in cssSite.css:

#header_info ul li a {
 color: #4a4c4b;
 text-decoration: none;
 font-style: normal;
 font-size: 100;
 text-transform: lowercase;
}

I’m not sure what that font-size should be - 100%? - but Firefox seems to render it initially as 100px.

9

At the moment the #header_info ul li a has a font-size of 1em, and it seems FF has no difficulties with it (after emptying the cache :wink: ).

10

Same here, now.

When I tested it yesterday, each time the enlarged text appeared, Firebug was showing font-size:100px for it, but when I reloaded and the text corrected, it went back to font-size:100 (with no units).

11

Must have been a silly mistake from me using ctrl-z after I had changed it when Ralph notified me about the invalid font declaration because when I looked again that declaration was there again. I now corrected it and everything is working fine. thank you all for the input :tup:

12

Glad to hear it’s fixed now - and that I’m not the only one who does that kind of thing. :slight_smile:

13