IE7 overwrites two lines, Firefox 3 doesn't
Stan Brown
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
dorayme
Stan Brown <the_sta...@fastmail.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
Stan Brown
<dorayme...@optusnet.com.au>:
> In article <MPG.245af7555...@news.individual.net>,
> Stan Brown <the_sta...@fastmail.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.
> >
> > 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.
dorayme
Stan Brown <the_sta...@fastmail.fm> wrote:
> Fri, 24 Apr 2009 15:14:27 +1000 from dorayme
> <dorayme...@optusnet.com.au>:
> > In article <MPG.245af7555...@news.individual.net>,
> > Stan Brown <the_sta...@fastmail.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) Suppose H<sub>0</sub> is �the directors
are honest� and H<sub>1</sub> is �the directors are stealing from the
company� Write conclusions in Statistics and in English ...</p>
and drop the paragraph element altogether.
<div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
3) Suppose H<sub>0</sub> is �the directors are honest� and
H<sub>1</sub> is �the directors are stealing from the company� Write
conclusions in Statistics and in English ...
--
dorayme
Gordon
> Fri, 24 Apr 2009 15:14:27 +1000 from dorayme
>
>
>
> > In article <MPG.245af7555d3263ad98b...@news.individual.net>,
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.
Jeff
> 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
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.
Have you thought of something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul span{
display: inline-block;
vertical-align: top;
}
.question{
width: 40%;
padding: 8px;
}
</style>
<ul>
<li><span style="font-size: 3em;">2</span>
<span class="question">(points: 3) Suppose H0 is �the directors are
honest� and H1 is �the directors are stealing from the company� Write
conclusions in Statistics and in English ...
</span>
<p>(a) ... if p = .0125 and ? = .01.</p>
<p>(b) ... if p = .0045 and ? = .01.</p>
</li>
</ul>
IE6 requires use of span instead of p. You will need to set some width
for the question, but you have wide margins.
Jeff
Stan Brown
<grj....@googlemail.com>:
> > > In article <MPG.245af7555d3263ad98b...@news.individual.net>,
> > > �Stan Brown <the_stan_br...@fastmail.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.
> >
> 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
> > > In article <MPG.245af7555...@news.individual.net>,
> > > Stan Brown <the_sta...@fastmail.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
>
>
> <div class="newsec"><p class="secondhalf"><span class="dropnumber"
> id="Q2">2</span>(points: 3) Suppose H<sub>0</sub> is �the directors
> are honest� and H<sub>1</sub> is �the directors are stealing from the
> company� Write conclusions in Statistics and in English ...</p>
>
> and drop the paragraph element altogether.
>
> <div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
> 3) Suppose H<sub>0</sub> is �the directors are honest� and
> H<sub>1</sub> is �the directors are stealing from the company� Write
> conclusions in Statistics and in English ...
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
> 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
<the_sta...@fastmail.fm>:
> Sat, 02 May 2009 19:02:36 +1000 from dorayme
> <dorayme...@optusnet.com.au>:
> > > > In article <MPG.245af7555...@news.individual.net>,
> > > > Stan Brown <the_sta...@fastmail.fm> wrote:
> > > > > The example is at http://www.tc3.edu/instruct/sbrown/stat/pq10.htm
> >
> >
> > <div class="newsec"><span class="dropnumber" id="Q2">2</span>(points:
> > 3) Suppose H<sub>0</sub> is �the directors are honest� and
> > H<sub>1</sub> is �the directors are stealing from the company� Write
> > conclusions in Statistics and in English ...
>
> 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. :-)
dorayme
Stan Brown <the_sta...@fastmail.fm> wrote:
> Mon, 4 May 2009 13:15:11 -0400 from Stan Brown
> <the_sta...@fastmail.fm>:
> > Sat, 02 May 2009 19:02:36 +1000 from dorayme
> > <dorayme...@optusnet.com.au>:
> > > > > In article <MPG.245af7555...@news.individual.net>,
> > > > > Stan Brown <the_sta...@fastmail.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) Suppose H<sub>0</sub> is �the directors are honest� and
> > > H<sub>1</sub> is �the directors are stealing from the company� Write
> > > conclusions in Statistics and in English ...
> >
> > 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
Disco Octopus
> 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 athttp://www.tc3.edu/instruct/sbrown/stat/pq10.htm
>
> 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
Is this still a problem? It still looks to me like it is a problem.
If so, then try this....
Instead of this...
<sub>0</sub>
... do this...
<span style="position:relative; top:3px; font-size:50%">0</span>
... also do it to the...
<sub>1</sub>
Play around with the exact measurements you want to make it look
better.
(give it a class, and put it where it belongs in you css file.)
GTalbot
[snipped]
> on question 2 of the quiz (URL
> below) IE7 overwrites the two lines.
Stan,
I have saved the markup code and CSS code and will look at this. I
will probably add it to my IE 7 bugs webpage too later.
> The example is athttp://www.tc3.edu/instruct/sbrown/stat/pq10.htm
> with CSS athttp://www.tc3.edu/instruct/sbrown/screen.css
>
> Both validate with no errors or warnings.
I read your
Trouble Viewing These Pages?; Thinking about Upgrading?
http://www.tc3.edu/instruct/sbrown/viewing.htm#Upgrade
I sincerly think you should clearly and outright say that IE 6 and IE
7 are not recommendable browsers, are 2 browser versions with lots of
bugs, incorrect implementations, etc.. and suggest to upgrade to IE 8
if people are not willing to switch to latest version of Firefox 3 or
to latest version of Opera 9.
Current international web sites warning against Internet Explorer 6
http://blog.peterhaza.no/current-international-web-sites-warning-against-internet-explorer-6/
Ballmer throws more weight behind drop IE6 campaign
http://www.tu.no/it/article201452.ece (in German)
"
Microsoft recommends end users that are browsing the web with Internet
Explorer 6 to upgrade today to benefit from numerous improvements
including security features and usability enhancements.
"
Google urges IE6 users to upgrade
http://www.wisdump.com/web-programming/browser-wars-firefox-up-ie-down-google-dumps-ie6/
http://www.usabilitypost.com/2008/09/05/drop-ie6-support-give-people-a-reason-to-upgrade/
http://superfluousbanter.org/archives/2008/09/the-final-word-on-ie6/
http://www.37signals.com/svn/posts/1072-apples-mobileme-drops-support-for-ie-6
There are at least 4 coutries with active campains to phase out IE 6:
Philippines, Sweden, Denmark, Finland
http://ie6.forteller.net/index.php?title=Main_Page
Regards, Gérard
--
Internet Explorer 7 bugs: 173 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 48 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
GTalbot
I added it to the IE 7 bugs collection:
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug174
Regards, Gérard
--
Internet Explorer 7 bugs: 174 bugs so far
Stan Brown
<news...@gtalbot.org>:
> I read your
> Trouble Viewing These Pages?; Thinking about Upgrading?
> http://www.tc3.edu/instruct/sbrown/viewing.htm#Upgrade
>
> I sincerly think you should clearly and outright say that IE 6 and IE
> 7 are not recommendable browsers, are 2 browser versions with lots of
> bugs, incorrect implementations, etc.. and suggest to upgrade to IE 8
> if people are not willing to switch to latest version of Firefox 3 or
> to latest version of Opera 9.
Good point. You may have noticed the revision date on that page --
I'm going to bring it up to date this week and use your comments.
Stan Brown
<news...@gtalbot.org>:
> Stan,
>
> I added it to the IE 7 bugs collection:
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug174
>
> --
> Internet Explorer 7 bugs: 174 bugs so far
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
> Internet Explorer 8 bugs: 48 bugs so far
> http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Thanks. I didn't want to change the published copy while this was
all under discussion, but now I will. :-)
BTW, there seems to be something good about your signature delimiter.
Gravity is usually quite good about not quoting sigs. Are you
perhaps missing the space after the two hyphens?
Ed Mullen
> Wed, 6 May 2009 20:39:44 -0700 (PDT) from GTalbot
> <news...@gtalbot.org>:
>> Stan,
>>
>> I added it to the IE 7 bugs collection:
>> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug174
>>
>> Regards, G�rard
>> --
>> Internet Explorer 7 bugs: 174 bugs so far
>> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
>> Internet Explorer 8 bugs: 48 bugs so far
>> http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
>
> Thanks. I didn't want to change the published copy while this was
> all under discussion, but now I will. :-)
>
> BTW, there seems to be something good about your signature delimiter.
> Gravity is usually quite good about not quoting sigs. Are you
> perhaps missing the space after the two hyphens?
>
Yes, he is. :-)
--
Ed Mullen
http://edmullen.net
We have enough youth. How about a fountain of smart?
John Hosking
>>
>> Regards, G�rard
>> --
>> Internet Explorer 7 bugs: 174 bugs so far
>
> BTW, there seems to be something good about your signature delimiter.
^^^^
There's some equally good about your line above. ;-)
Or were you just trying to look for the positive value in everything?
> Gravity is usually quite good about not quoting sigs. Are you
> perhaps missing the space after the two hyphens?
It's because he's posting via GoogleGroups, which strips trailing
spaces. The result is broken sig delimiters.
--
John
Not to mention a backlash against GGers.
Also not mentioning the UIP: http://improve-usenet.org/
dorayme
<c4ce1be9-c8e7-4dce...@r36g2000vbr.googlegroups.com>,
GTalbot <news...@gtalbot.org> wrote:
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug174
>
So many odd IE float bugs! It is not particularly about inline elements.
It is more to do with line-height and IE getting confused with its sub
and the large font. Remove either of these and the problem disappears.
IE has always been funny about widths or lack of them or working out
what 100% is of what or simply choosing to make up its own mind about
these things as it sees fit, never mind us. And especially with floats.
Giving widths to containers or heights triggers IE into behaving better.
<http://dorayme.netweaver.com.au/talbotStanBug.html>
and here is one way to avoid. There are other ways:
<http://dorayme.netweaver.com.au/talbotStanBugFixedForIE.html>
--
dorayme
Stan Brown
<Jo...@DELETE.Hosking.name.INVALID>:
> Stan Brown wrote:
> > Wed, 6 May 2009 20:39:44 -0700 (PDT) from GTalbot
> > <news...@gtalbot.org>:
>
> >>
> >> Regards, G�rard
> >> --
> >> Internet Explorer 7 bugs: 174 bugs so far
>
> >
> > BTW, there seems to be something good about your signature delimiter.
> ^^^^
> There's some equally good about your line above. ;-)
> Or were you just trying to look for the positive value in everything?
>
> > Gravity is usually quite good about not quoting sigs. Are you
> > perhaps missing the space after the two hyphens?
>
> It's because he's posting via GoogleGroups, which strips trailing
> spaces. The result is broken sig delimiters.
I'm trying to imagine what I *meant* to write that could have changed
to "something good". I'm failing.