I have a large text document that I’m displaying on screen using the following CSS and divs. The idea is that the user reads down the text, after 3 minutes they record the line number they reached and this gives a reading speed per minute.
The problem is that IE and Chrome display slightly different amounts of words per line, so Chrome has 189 lines over the entire page, whereas IE goes to around 195. Is there any way to standardise words per line? or a better way to do this?
Any help would be welcome!
An extract of the code is below:
.row01 {
width: 870px;
margin: 0 auto;
padding: 15px 0 0 0;
}
.col01 .numbers {
float: left;
padding-right: 4px;
padding-left: 4px;
color: #6BACC9;
font-size: 0.75em;
line-height: 1.6em;
margin-top: 1.6em;
}
.col01 .text {
float: left;
margin-left: 2px;
margin-top: 1.6em;
font-size: 0.75em;
line-height: 1.6em;
width: 830px;
}
<div class="row01">
<div class="col01">
<h2>The Time and Stress Crisis by Dr David Lewis</h2>
<div class=numbers>1. <br />2. <br />3. <br />4. <br />5. <br />6. <br />7. <br />8. <br /></div>
<div class=text>Let me introduce you to a young acquaintance of mine - Chris. I think you may find you have common interests.<br />
<br />
Chris came into the office an hour early to tackle a mountain of urgent paper work. Intimidated by the sheer size of the backlog, he found it hard to concentrate or decide his priorities. As a result, by the time other staff arrived, his sole accomplishment had been to transform that mountain into several smaller mounds. For the rest of the day, constant interruptions - by subordinates seeking guidance, colleagues needing to discuss departmental projects, demands from his superiors, endless telephone calls and unscheduled visitors - meant he made little further progress in catching up with his work. Twelve hours after his working day had started, an exhausted and demoralised Chris left for home, with the backlog almost unchanged.<br />
<br /></div>
</div>
</div>
Update
Even after changing the font size to absolute I still had issues with IE9 on long text documents. So I ended up forcing IE9 to adopt IE8 standards:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
The difference lies probably in the browser settings:
You can set up a standard font and font size to use in your browser (in firefox and chrome this is times new roman 16).
If an element is displayed with a font of 16 pt (standard browser settings), then ‘2em’ is 32 pt.
I suggest you use actual font sizes (in points or pixels) in your css.