Wed, 2007-03-21 09:47
My website at http://www.chi.dk/index_e.htm works OK in IE and FF - but after having set the font-size in the style-sheet to 62.5% (1em = 10px) Safari seems to blow up the font-size about 20-30% - maybe because it does not recognize the 62.5% and thus reads the font-size to big/as it is written in the html-doc? The question is: how do I fix it for Safari?
Tai Chi in Denmark
E.g. the text in the menu is set like this:
Stylesheet font-code:
h1 {
color: #000000;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 1.15em;
font-style: normal;
font-weight: normal;
line-height : 125%;
text-indent: 3.33em;
margin: 0;
padding: 0
}
Odd enough, the following style behaves normally in all browsers, including Safari:
h3 {
position: absolute;
top: 0.2em;
left: 0.5em;
color: #000000;
font-family: Arial, sans-serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
line-height : 110%;
margin: 0;
padding: 0
}
Wed, 2007-03-21 10:40
#1
Correction!
Sorry - a mistake.
The style for the h1-tag is for text in the articles - but as also this is blown up, the example still stands.
The h3-tag btw is for the text by the pictures.
Wed, 2007-03-21 10:43
#2
Well the only obvious
Well the only obvious difference in your examples (one that works,the other that doesn't) is the font-size em expression one at 1.15em the other at 1em have you tried changing the 1.15 value or are you compounding values somewhere?
Wed, 2007-03-21 21:43
#3
Different....
I'm not quite sure I understand your comment. The h1 and h3 font-sizes are set to be (and remain) different - only the h1 seems not to be affected by the 62.5%-rule, whilst the h3 behave as expected - and I cannot figure out why h1 doesn't get the 62.5%-message.
Wed, 2007-03-21 21:53
#4
I looked at the linked
I looked at the linked page.
Where IS the h1 tag in the html? Am I missing something?
Wed, 2007-03-21 22:49
#5
Ok...
It's of course on some of the pages inside, sorry, should have thought of that.
You can use these:
http://www.chi.dk/tai_chi_tcm.htm
http://www.chi.dk/tai_chi_research.htm
Wed, 2007-03-21 22:59
#6
Where to start? On the
Where to start? On the tai_chi_tcm page
You have used the id BI twice on id's. You cannot re-use id's.
You have used h1 over and over again. You should have only one h1 per page.
You have a class called h1 as well in the css. Undoubtably this will cause problems.
Thu, 2007-03-22 22:07
#7
Corrected...
You're quite right, I'm a newcommer to CSS, trying to get the grip. It's the feeling of the whole CSS phenomenon I haven't captured yet, I think.
I've now substituted the h1 with a p-tag, deleted the h1-class and will soon adjust the id for BI.
Still, after having corrected both the h1-issues, the text is still 20-30% bigger in Safari. Any surgestions on how to solve this matter will be most welcome.
Thu, 2007-03-22 22:33
#8
Hi given the code you are
Hi
given the code you are using, maybe your doctype should be xhtml 1.0?
It is some time since I experimented with font-sizes, but setting a body font-size was very buggy.
Essentially, I found the only safe range was 100.1% to 100.9% and 100.1% was the most reliable.
You set the body to 62.5% and then use the star selector to set everything to 100.1%.
Is the problem still there if the body is set to 100.1% and you remove the star selector. I am always loath to use such a general setting as this.
Fri, 2007-03-23 00:14
#9
Dr. Z wrote:Still, after
Dr. Z wrote:
Still, after having corrected both the h1-issues, the text is still 20-30% bigger in Safari. Any surgestions on how to solve this matter will be most welcome.
It is still a fact that the web isn't paper, and one of the facets of that is that you as a page designer really have no control over the font size any visitor will see. Every modern browser includes simple key combinations (usually {ctrl}{+} and {ctrl}{-}) that will let any visitor instantly change the font size in various ways.
What's constant then? Well nothing, but one thing we can say is that the default font and font-size of the user's browser will in general be either (1) the user's preferred font and font size, or (b) at least one that doesn't offend them so much as to make them learn how to change it.
This being so, for normal text, surely it follows that the best policy (in the sense of "the one least likely to drive the visitor away") is to design your page to look good at the browser's default font size and font face.
Myself, I'm old and my seeing ain't the greatest anymore, and the screen resolution on my LCD monitor is quite high, so to make the screen readable I set my default font size in my browsers to be 20px, around 25% larger than the usual built-in default of 16px. When I go to a site where someone has specified a font-size of 12px (fairly common, alas, even on CSS-Discuss) I either don't bother reading the page or, if I am attracted by the content to stay awhile, I enlarge the font in my browser. In all too many pages this then breaks the layout.
On the other hand if you are a youngster who likes his fonts at 10px, why would I want to offend you by forcing your browser to display the font at my preferred 20px?
So I suggest the "best practice" for font sizes in general is to simply design your pages to look fine at a large variety of sizes, and CSS provides tools to do this fairly easily. Since text is naturally liquid it really isn't that hard to do.
There is a good discussion of this point at the Truth and Consequences of Web Design site, which I recommend.
Fri, 2007-03-23 07:05
#10
Ed Seedhouse wrote:There is
Ed Seedhouse wrote:
There is a good discussion of this point at the Truth and Consequences of Web Design site, which I recommend.
I had a good read of that site (i.e. I went back up to the TC folder). Quite interesting.
CT
Fri, 2007-03-23 09:02
#11
Yes...
I'm all aware of that discussion - but before this thread turns into a discussion on pros and cons of font-sizing, I'd like to return to the matter: I cannot get Safari (and ONLY that browser) to show the font in a size equal to the one that other browsers display. You see, that leaves me with a rather anoying problem: I cannot size textboxes (e.g. for pictures) or pageheight for that matter, as these varies to much in the case of Safari. This means I cannot make a crossbrowser design - and I know it's because I've made a mistake somewhere - and I'm here to ask for somebodys help to understand what mistake I've made.
So far I've been very happy about ClevaTreva pointing out, that I had to change the h1-tag to a p-tag, which was a silly mistake, I should have seen myself. However, changing h1 didn't solve the problem I have. I still haven't tried to change the doc-type, as I do not know much about the difference and the effects - but I will try it and see if it helps.
So the first thing to do is to click on the link "Give your site a valid doctype" - I guess 
- which I'll do in a second...
Fri, 2007-03-23 10:06
#12
Alrigth, I've tried to
Alrigth, I've tried to validate the following page: http://www.chi.dk/tai_chi_explained.htm - which - when you compare them in Firefox and Safari - quite clearly illustrates my problem: in Firefox everything is alright, while Safari renders the text far to big and the text thus drops out down below (and quite a bit).
Validation of the page was almost ok. One thing I do not inderstand, however, is this comment:
...e" content="text/html; charset=iso-8859-1" />
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a paragraph) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).
- which is a comment on this tag:
I mean, I have to close the meta-tag with a / - don't I? How can this be uncorrect?.....?
Also, when I delete the / at the end of the meta-tag, validation just shows the next tag-end /> as a new error - and I guess that would go on. That's when I stopped, feeling that something was wrong with the validation.
This leaves me quite bewildered - also because the meta-tag above just might have something to do with my problem - I believe...
Fri, 2007-03-23 15:25
#13
you want to use utf-8 I
you want to use utf-8
I think overall the problem lies in the way the page/site is constructed. Your overuse of absolute positioning is getting the best of you. While you have considered the elastic nature of font-resizing with the use of ems for sizes, you still have developed a fairly rigid template, one that has very little margin of error (as seen in Safari).
The fact that you have similar results in so many browsers amazes me, to be truthful. Different browsers use different algorithms for calculating font-sizes and height and width - in the end everything must be converted to pixels. To blame Safari is not quite right either. If you decrease the body font size to 62 (from 62.5) Safari actually renders fonts smaller than that of Firefox. And while I haven't tested, it wouldn't surprise me if other browsers were 'off' a bit as well.
If it were me, I would redesign the page without the absolute positioning, so that all content stayed within the normal document flow.
Fri, 2007-03-23 17:34
#14
wolfcry911 wrote:you want to
wolfcry911 wrote:
you want to use utf-8
OK. Do you know a reliable source to find info about that?
wolfcry911 wrote:
I think overall the problem lies in the way the page/site is constructed. Your overuse of absolute positioning is getting the best of you. While you have considered the elastic nature of font-resizing with the use of ems for sizes, you still have developed a fairly rigid template, one that has very little margin of error (as seen in Safari).
It's true, that I do want a certain amount of control over the design. I'll try to look into the absolute position-theme when I get the time, though - so thanks!
wolfcry911 wrote:
To blame Safari is not quite right either.
I don't (do I ??). I just want to know what to do