Ok experts explain this and solve

R

Roy A.


If that is how it's intended, why do you have a height of 105px on
the .t1 class?
FF2 shows the same field with the area extending beyond intended and
adding(??) space.

The table field should be contained completely within the division but
it is not. I can live with that but looks awkward.

Then remove the height on the .t1 class.
So how does one correct for FF?

FF is correct. To make it correct in IE too, you have to
use a proper doctype declaration that don't force browsers
to render your page in quirks mode, i.e. change

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2
http://www.w3.org/QA/2002/04/valid-dtd-list.html
 
J

Jonathan N. Little

richard said:
http://oldies.1littleworld.com/screen1.jpg

http://oldies.1littleworld.com/test1.html


IE7 shows the table field as intended.
FF2 shows the same field with the area extending beyond intended and
adding(??) space.

The table field should be contained completely within the division but
it is not. I can live with that but looks awkward.

So how does one correct for FF?

http://www.google.com/search?hl=en&safe=off&q=quirksmode+IE+broken+box+model&btnG=Search
quirksmode IE broken box model - Google Search
 
R

richard

Remove the padding (padding: 10px) from class "t1".

In 99% of the cases it is IE that is nonconformant. What you meant was
"How do I correctly define the style rule(s) so that the layout displays
the same as possible in all browsers?"


Playing around some I now see where FF behaves differently with
padding. Using padding-top alone seems to solve the problem.
 
R

richard

If that is how it's intended, why do you have a height of 105px on
the .t1 class?

The only fix to get rid of the Vert scroll bar.
Then remove the height on the .t1 class.

If I do that, both scroll bars show.
FF is correct. To make it correct in IE too, you have to
use a proper doctype declaration that don't force browsers
to render your page in quirks mode, i.e. change

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Made no real change in the look except I did notice a slight decrease
in height in FF.
 
C

Chris F.A. Johnson

The only fix to get rid of the Vert scroll bar.

Which it doesn't do if the font-size is large.

Setting a height in px is more likely to _cause_ a vertical
scrollbar than prevent one.
 
R

richard

Which it doesn't do if the font-size is large.

Setting a height in px is more likely to _cause_ a vertical
scrollbar than prevent one.


I tried it with a point size of 24 and found no vert scroll bar.
I just tried it with a 72 point and still no vert.
I found I needed a minimum of 6em to remove it.
 
C

Chris F.A. Johnson

I tried it with a point size of 24 and found no vert scroll bar.
I just tried it with a 72 point and still no vert.

What does 72 point mean? It bears no relation to anything when
talking about monitors. Do you mean 72px?
I found I needed a minimum of 6em to remove it.

I don't know just what the point size is at which the vert.
scrollbar appears, but it is certainly much less than 72px
(probably in the high 20s).

If you remove the height specification, there will never be a
vertical scrollbar.
 
R

Roy A.

The only fix to get rid of the Vert scroll bar.





If I do that, both scroll bars show.

OK, but that is an IE 6 and IE 7 specific bug. Don't let the
fix affect other browsers. In IE 6 and 7 the horizontal scrollbar
appears because of the vertical scrollbar. To fix this without
affecting other browsers I suggest you put the fix in a comment:

<!--[if lt IE 8]>
<style type="text/css">
.t1 {
overflow:visible;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:.25in }
</style>
<![endif]-->

<http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-
vertical-scrollbar-bug.aspx>

Hopefully, the bug will be fixed in IE 8.

"IE8 strict, overflow: auto. scrollbar bug not fixed, new introduce in
microsoft.public.internetexplorer.beta"

<http://www.microsoft.com/communities/newsgroups/list/en-us/
default.aspx?mid=5e7cf402-3fa4-4f0e-a602-
e2e81248c556&dg=microsoft.public.internetexplorer.beta>
 
A

Andy

richard said:
http://oldies.1littleworld.com/screen1.jpg

http://oldies.1littleworld.com/test1.html


IE7 shows the table field as intended.
FF2 shows the same field with the area extending beyond intended and
adding(??) space.

The table field should be contained completely within the division but
it is not. I can live with that but looks awkward.

So how does one correct for FF?


Hi Richard,

Here's an ugly workaround for you....

1: Remove the "width: 100%;" declaration from the .t1 style.

2: After the closing </style> add the following...

<!--[if IE]>
<style>
..t1 { width: 100%; }
</style>
<![endif]-->

Hope this helps


Andy
 
J

Jonathan N. Little

Bergamot said:
Some people tried to warn him about snubbing his nose at HTML 4.01
Strict. This is what he gets, and it will probably just get worse as he
adds more stuff.

His ears have good filters. Does not matter what is said.
 
R

richard

Some people tried to warn him about snubbing his nose at HTML 4.01
Strict. This is what he gets, and it will probably just get worse as he
adds more stuff.

Well dear boy, according to your attitude, I'd be surfing the web
using a 300 baud acoustical modem and dos.

I haven't totally snubbed my nose at strict, just haven't gotten
around to doing it yet.

The problem I see, is not what you use, but how the browser presents
it. IE seems to follow their own little set of rules. Which is why I
gave up using IE years ago.

Points, ems, and even pixels have set definitions. Yet browsers seem
to use their own set of definitions. Ask a publisher of newspapers
what a point, or an em, is and he will tell you. Ask a programmer, he
can't define it.
 
R

richard

richard said:
http://oldies.1littleworld.com/screen1.jpg

http://oldies.1littleworld.com/test1.html


IE7 shows the table field as intended.
FF2 shows the same field with the area extending beyond intended and
adding(??) space.

The table field should be contained completely within the division but
it is not. I can live with that but looks awkward.

So how does one correct for FF?


Hi Richard,

Here's an ugly workaround for you....

1: Remove the "width: 100%;" declaration from the .t1 style.

2: After the closing </style> add the following...

<!--[if IE]>
<style>
.t1 { width: 100%; }
</style>
<![endif]-->

Hope this helps


Andy


Did not work for me.

Do note that there is nothing in the CSS on this version for .t1.
 
C

Chris F.A. Johnson

On 2008-08-25, richard wrote:
....
Points, ems, and even pixels have set definitions. Yet browsers seem
to use their own set of definitions. Ask a publisher of newspapers
what a point, or an em, is and he will tell you.

By now, you should know better than to equate a web page with a
piece of paper. It isn't, and the same rules *cannot* apply.
Ask a programmer,

You do not write programs in HTML or CSS; they are not
programming languages.
he can't define it.

HTML and CSS define them quite clearly; that is what you need to
deal with, not an imaginary piece of paper.
 
R

Roy A.

Did not work for me.

Did it work to change the doctype declaration to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

, remove the height on the .t1 class, and put in

<!--[if lt IE 8]>
<style type="text/css">
.t1 {
overflow:visible;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:.25in }
</style>
<![endif]-->

after your existing style element?
 
N

Neredbojias

I haven't totally snubbed my nose at strict, just haven't gotten
around to doing it yet.

The problem I see, is not what you use, but how the browser presents
it. IE seems to follow their own little set of rules. Which is why I
gave up using IE years ago.

Points, ems, and even pixels have set definitions. Yet browsers seem
to use their own set of definitions. Ask a publisher of newspapers
what a point, or an em, is and he will tell you. Ask a programmer, he
can't define it.

Ems are aunts from Kansas and points are what a girl has under her blouse
before she flabs out. A pixel _may be_ a straight pixie but I'm not sure.
 
C

Chaddy2222

Chris said:
On 2008-08-25, richard wrote:
...

By now, you should know better than to equate a web page with a
piece of paper. It isn't, and the same rules *cannot* apply.


You do not write programs in HTML or CSS; they are not
programming languages.


HTML and CSS define them quite clearly; that is what you need to
deal with, not an imaginary piece of paper.
Yeah what he said.
 
A

Andy

richard said:
richard said:
http://oldies.1littleworld.com/screen1.jpg

http://oldies.1littleworld.com/test1.html


IE7 shows the table field as intended.
FF2 shows the same field with the area extending beyond intended and
adding(??) space.

The table field should be contained completely within the division but
it is not. I can live with that but looks awkward.

So how does one correct for FF?


Hi Richard,

Here's an ugly workaround for you....

1: Remove the "width: 100%;" declaration from the .t1 style.

2: After the closing </style> add the following...

<!--[if IE]>
<style>
.t1 { width: 100%; }
</style>
<![endif]-->

Hope this helps


Andy


Did not work for me.

Do note that there is nothing in the CSS on this version for .t1.

Are you sure?

I re-applied my fix to the source code in your sample url this morning and
it does fix the issue although I've only tested between IE7 and FF3.

Good luck


Andy
 
C

Chaddy2222

Neredbojias said:
Ems are aunts from Kansas and points are what a girl has under her blouse
before she flabs out. A pixel _may be_ a straight pixie but I'm not sure.
ROTFLMAO
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top