First, I am coding in XHTML 1 Strict and using CSS.
I have identified what I believe to be a bug with the iPhone's Safari browser. I spent many hours stripping away
code line by individual line until I isolated the problems in both the CSS and the HTML. Here is the CSS that is causing
the problem:
The problem I am about to describe I have only run into with iPhone Safari browser. The code works with IE 6, 7 and 8,
Firefox, Netscape, Chrome, and the desktop version of Safari. You will only be able to see what I am talking about on
the iPhone browser. I tested this on the original iPhone with OS 3.0.
When you visit www.stcmedical.com/demosite/products2.html you will see that the top line of text, which is enclosed within
a <p> element, displays in a different font. The line height is difficult to judge because the text is only one line. In the
block of text below the bulleted items, I have typed text that ends with the number "87". This is important for the next
example...
Now, visit www.stcmedical.com/demosite/products.html and you will now see that the font is as it should be. The number 86 in
the last text block is now 87. The only difference in the entire HTML of the two files is that products.html has 87 characters
of text in that last block, and that product2.html has 86 characters.
Finally, visit www.stcmedical.com/demosite/products3.html. If that last line of text is eliminated (which is what I want)
the text on the first line has its font shrunk to very small.
So there are three scenarios: 1) If the last <p> text is not present, the first <p> element's font is very, very small. 2) If
there are 86 characters of text entered in the added <p> element at the bottom, the font increases in size. 3) If there are 87
characters of text in that last <p> element, the font is now correct.
In a desktop browser, character 87 is what causes the line to break. Somehow, I think this is signifant. I don't know exactly
why, but that's what I think.
I verified all of this further by copying the index.html file's code from the text and bulleted areas by copying them into
products.html. No problem.
None of this is an issue if the above CSS block of code is eliminated. Either one or both of those entries together causes the
problem.
I realize I have spent a great deal of time on something rather esoteric, but since our sales force is entirely armed with
iPhones, it has become an issue for us.
The problem is, probably, due to the fact that you have used the em measurement unit, which is relative either to the font-size or even to parent's font-size and the parent parent's font-size...
Take for instance your element with a line-height of 1.4em. That means the element has line-height of 1.4 * the element's font-size. Now if the element's font-size is also set in em, that will make the line-height dependent on the elements' parent font-size, which is, also, dependent of his parent's font-size, and so on till the BODY. When you remove one of the parents, you change the font-size of all the child nodes and also their line-height, and so on.
em is to be used mainly for the font-size, it is a measurement unit related with the fonts, and nothing else. I guess you should use pixels, not ems, in case you have not a common parent for all the elements. Or you must elaborate intricate calculations to bring the elements at the same apparently for eye font-size. Working with relative measurement units like em could be flexible, but it is a tricky mission when you don't know how to manage it properly
Well, this is a kind of solve. For W3C compliant browsers like FF, Opera, Chrome, Safari a CSS size/position value without a certain measurement unit means nothing. Solely IE will presume that 1.4 means 1.4px (pixels), which is also a sort of nonsense, as a browser's interpretor works only with integer values of pixels. But to set the line-height value to a so small value (1 or 2 px) is useless, except for IE6, for which a non line-height block element should have, by default, a value of 8px (the smallest font-size height).
Well, this is a kind of solve. For W3C compliant browsers like FF, Opera, Chrome, Safari a CSS size/position value without a certain measurement unit means nothing. Solely IE will presume that 1.4 means 1.4px (pixels), which is also a sort of nonsense, as a browser's interpretor works only with integer values of pixels. But to set the line-height value to a so small value (1 or 2 px) is useless, except for IE6, for which a non line-height block element should have, by default, a value of 8px (the smallest font-size height).
I have tested my code in FF, IE (7 & 8), Chrome and Sarari. They are all honoring the 1.4 value. All I did was remove the em and it fixed my iPhone Sarari problem, and remained unchanged in the desktop browsers. I tested the value at 1 and with nothing at all, and all of the lines collapsed to the default. So the question is: what does 1.4 by itself mean to FF, Chrome, Safari, et al.?
What can I enter to make all of the browsers happy and fully compliant?
I haven't uploaded it to the live site, but I tried 24px and that seems to be the rough equivalent of 1.4 all by itself. I took you literally and entered 1px, and of course, all of the text collapsed on itself, which was kind of cool to see.
Reply With Quote
Originally Posted by Kor
Bookmarks