IE7 overwrites two lines, Firefox 3 doesn't

I suspect an obscure bug, and I'd be grateful if someone can take a
look and suggest a way to change my CSS to avoid the bug while still
remaining standards conforming.

On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines. I would suspect some
interaction between the floated question number and the subscripts on
the first line, except that question 3 also has subscripts on the
first line and IE7 doesn't have trouble with it.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)


The example is at
http://www.tc3.edu/instruct/sbrown/stat/pq10.htm
with CSS at
http://www.tc3.edu/instruct/sbrown/screen.css

Both validate with no errors or warnings.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

I suspect an obscure bug, and I'd be grateful if someone can take a
look and suggest a way to change my CSS to avoid the bug while still
remaining standards conforming.

On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines. I would suspect some
interaction between the floated question number and the subscripts on
the first line, except that question 3 also has subscripts on the
first line and IE7 doesn't have trouble with it.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)


The example is at
http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

In your

<span class="dropnumber" id="Q2">

stick in an inline style="line-height: 1.3" and it *should* behave
better. Then go back and see what is delivering such a zero line-height
or whatever in your very complex CSS

--
dorayme

Fri, 24 Apr 2009 15:14:27 +1000 from dorayme
<doraymeRidThis (AT) optusnet (DOT) com.au>:

In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)

The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

In your
span class="dropnumber" id="Q2"
stick in an inline style="line-height: 1.3" and it *should* behave
better. Then go back and see what is delivering such a zero line-height
or whatever in your very complex CSS

My apologies for not saying "thank you" sooner; it's been a crazy
week. I tried line-height:1.3 and it made the overlap less but the
lines still overlapped. However, it spread the lines out further in
Firefox.

Why do you think there's a zero line-height? Firefox doesn't display
the lines overlapped, and no other question displays the same
problem, even question 3 which also has subscripts in the text.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

In article <MPG.24657eaf236208d898baad (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

Fri, 24 Apr 2009 15:14:27 +1000 from dorayme
doraymeRidThis (AT) optusnet (DOT) com.au>:
In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)

The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

In your
span class="dropnumber" id="Q2"
stick in an inline style="line-height: 1.3" and it *should* behave
better. Then go back and see what is delivering such a zero line-height
or whatever in your very complex CSS

My apologies for not saying "thank you" sooner; it's been a crazy
week. I tried line-height:1.3 and it made the overlap less but the
lines still overlapped. However, it spread the lines out further in
Firefox.

Why do you think there's a zero line-height? Firefox doesn't display
the lines overlapped, and no other question displays the same
problem, even question 3 which also has subscripts in the text.

When I looked, it removed the problem. Perhaps my IE 7 is different to
yours. Anyway, as a practical "fix just this" increase the line-height
to what you want but do this only for IE's eyes via conditionals. I
recall looking through your CSS sheets but thinking... oh oh... this
might take a bit of time to find. I tend to work with much simpler. So I
gave you this filthy bit of advice. I am thoroughly ashamed of myself.
<g>

So I took another look!

Instead, I now suggest you change your:

<div class="newsec"><p class="secondhalf"><span class="dropnumber"
id="Q2">2</span>(points: 3)&nbsp;Suppose H₀ is ³the directors
are honest² and H₁ is ³the directors are stealing from the
company² Write conclusions in Statistics and in English&nbsp;...</p>

and drop the paragraph element altogether.

<div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
3)&nbsp;Suppose H₀ is ³the directors are honest² and
H₁ is ³the directors are stealing from the company² Write
conclusions in Statistics and in English&nbsp;...

--
dorayme

On May 2, 3:49*am, Stan Brown <the_stan_br... (AT) fastmail (DOT) fm> wrote:

Fri, 24 Apr 2009 15:14:27 +1000 from dorayme
doraymeRidT... (AT) optusnet (DOT) com.au>:



In article <MPG.245af7555d3263ad98b... (AT) news (DOT) individual.net>,
*Stan Brown <the_stan_br... (AT) fastmail (DOT) fm> wrote:
On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)

The example is at *http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

In your
span class="dropnumber" id="Q2"
stick in an inline style="line-height: 1.3" and it *should* behave
better. Then go back and see what is delivering such a zero line-height
or whatever in your very complex CSS

My apologies for not saying "thank you" sooner; it's been a crazy
week. *I tried line-height:1.3 and it made the overlap less but the
lines still overlapped. However, it spread the lines out further in
Firefox.

Why do you think there's a zero line-height? *Firefox doesn't display
the lines overlapped, and no other question displays the same
problem, even question 3 which also has subscripts in the text.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
* * * * * * * * * * * * * * * * *http://OakRoadSystems.com/
HTML 4.01 spec:http://www.w3.org/TR/html401/
validator: * * *http://validator.w3.org/
CSS 2.1 spec: *http://www.w3.org/TR/CSS21/
validator: * * *http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
* *http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

I was going to suggest a trick that involved making the container for
each question overflow: hidden. This causes a container that contains
nothing but floated content to have a height.

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Unfortunately it seems that the markup you're using would need some
restructuring for it to work. The first thing I'd suggest is using a
list rather than divs. That's more semantic and will give you a basis
to work from. Example:

<ol class="questionList">
<li class="question" id="q1">
<p><span>Question 1</span>: Blah blah blah blah blah</p>
<p>Some additional information</p>
</li>
<li class="question" id="q2">
<p><span>Question 2</span>: Blah blah blah blah blah</p>
<p>Some additional information</p>
</li>
<li class="question" id="q3">
<p><span>Question 3</span>: Blah blah blah blah blah</p>
<p>Some additional information</p>
</li>
<!-- and so on -->
</ol>

Then you'd use a stylesheet to get the presentation you want.

..questionList {
list-style: none outside;
margin: 0;
padding: 0;
}
..question {
clear: both;
}
..question span {
font-size: 2em;
padding-right: .3em;
float: left;
}

Obviously this is a very simplistic example, but it hopefully gets the
idea across.

Sat, 2 May 2009 04:52:27 -0700 (PDT) from Gordon
<grj.mcvey (AT) googlemail (DOT) com>:

In article <MPG.245af7555d3263ad98b... (AT) news (DOT) individual.net>,
*Stan Brown <the_stan_br... (AT) fastmail (DOT) fm> wrote:
On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines.

The example is at *http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

I was going to suggest a trick that involved making the container for
each question overflow: hidden. This causes a container that contains
nothing but floated content to have a height.

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Unfortunately it seems that the markup you're using would need some
restructuring for it to work. The first thing I'd suggest is using a
list rather than divs.

That's a very natural suggestion, and in fact I used to do lists.
But the problem is that a list doesn't accommodate a paragraph of
instructions that apply to several succeeding questions, and fairly
frequently I have to do that.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Sat, 02 May 2009 19:02:36 +1000 from dorayme
<doraymeRidThis (AT) optusnet (DOT) com.au>:

In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
On quizzes, the question numbers are double size and floated left so
that text flows around them. But on question 2 of the quiz (URL
below) IE7 overwrites the two lines.

(You can also see the problem in IE6, if you narrow the viewport
enough that question 2 has to go onto two lines.)

The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

Instead, I now suggest you change your:

div class="newsec"><p class="secondhalf"><span class="dropnumber"
id="Q2">2</span>(points: 3)&nbsp;Suppose H₀ is ³the directors
are honest² and H₁ is ³the directors are stealing from the
company² Write conclusions in Statistics and in English&nbsp;...</p

and drop the paragraph element altogether.

div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
3)&nbsp;Suppose H₀ is ³the directors are honest² and
H₁ is ³the directors are stealing from the company² Write
conclusions in Statistics and in English&nbsp;...

Thanks! I tried this and it works beautifully in IE6. I'll try it
also in IE7 when I'm back at a computer that has it.

I'm still processing the "complicated CSS" remark. It grew gradually
so I'm not the best judge of whether it's complicated. :-) But if
you have any advice for big blocks of stuff that should be eliminated
or significant other simplifications I'm grateful to consider them.

http://www.tc3.edu/instruct/sbrown/screen.css

One thing I can probably do is eliminate all the separate stylings
of <a> elements within various headers by judicious use of
"transparent" or "inherit". I don't think I knew about either of
those when I first wrote those CSS rules.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Sat, 02 May 2009 09:04:36 -0400 from Jeff <jeff_thies (AT) att (DOT) net>:

Stan Brown wrote:
The example is at
http://www.tc3.edu/instruct/sbrown/stat/pq10.htm
with CSS at
http://www.tc3.edu/instruct/sbrown/screen.css

I like floats, but not for everything.

And this sure looks like a list, but it's not marked up as one. Now, I
understand that, as you want a larger numeral.

Thanks for the suggestion. Unfortunately lists don't do it for
making up quizzes because fairly often I need a paragraph of
instructions of information that applies to several following
questions so it is not logically part of just one question.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Mon, 4 May 2009 13:15:11 -0400 from Stan Brown
<the_stan_brown (AT) fastmail (DOT) fm>:

Sat, 02 May 2009 19:02:36 +1000 from dorayme
doraymeRidThis (AT) optusnet (DOT) com.au>:
In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

and drop the paragraph element altogether.

div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
3)&nbsp;Suppose H₀ is ³the directors are honest² and
H₁ is ³the directors are stealing from the company² Write
conclusions in Statistics and in English&nbsp;...

Thanks! I tried this and it works beautifully in IE6. I'll try it
also in IE7 when I'm back at a computer that has it.

And it also works beautifully in IE7. Thanks again!

Now if I can just remember why I put the paragraph tags in there in
the first place. :-)

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

In article <MPG.2469cfbd8ef9bd2698bab7 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

Mon, 4 May 2009 13:15:11 -0400 from Stan Brown
the_stan_brown (AT) fastmail (DOT) fm>:
Sat, 02 May 2009 19:02:36 +1000 from dorayme
doraymeRidThis (AT) optusnet (DOT) com.au>:
In article <MPG.245af7555d3263ad98ba87 (AT) news (DOT) individual.net>,
Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm

and drop the paragraph element altogether.

div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
3)&nbsp;Suppose H₀ is ³the directors are honest² and
H₁ is ³the directors are stealing from the company² Write
conclusions in Statistics and in English&nbsp;...

Thanks! I tried this and it works beautifully in IE6. I'll try it
also in IE7 when I'm back at a computer that has it.

And it also works beautifully in IE7. Thanks again!

Now if I can just remember why I put the paragraph tags in there in
the first place. :-)

That is what I was kind of wondering! <g>

--
dorayme