Ok experts explain this and solve

Discussion in 'HTML' started by richard, Aug 23, 2008.

  1. richard

    richard Guest

    richard, Aug 23, 2008
    #1
    1. Advertising

  2. richard

    Roy A. Guest

    On 23 Aug, 20:30, richard <> wrote:
    > http://oldies.1littleworld.com/screen1.jpg
    >
    > http://oldies.1littleworld.com/test1.html
    >
    > IE7 shows the table field as intended.


    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
     
    Roy A., Aug 23, 2008
    #2
    1. Advertising

  3. richard wrote:
    > 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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 23, 2008
    #3
  4. richard

    richard Guest

    On Sat, 23 Aug 2008 12:18:22 -0700, Jim Moe
    <> wrote:

    >On 08/23/08 11:30 am, richard wrote:
    >> 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.
    >>

    > Remove the padding (padding: 10px) from class "t1".
    >>
    >> So how does one correct for FF?

    >
    > 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.
     
    richard, Aug 23, 2008
    #4
  5. richard

    richard Guest

    On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A."
    <> wrote:

    >On 23 Aug, 20:30, richard <> wrote:
    >> http://oldies.1littleworld.com/screen1.jpg
    >>
    >> http://oldies.1littleworld.com/test1.html
    >>
    >> IE7 shows the table field as intended.

    >
    >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.

    >
    >> 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.


    If I do that, both scroll bars show.

    >
    >> 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">


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

    >
    >http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2
    >http://www.w3.org/QA/2002/04/valid-dtd-list.html
     
    richard, Aug 23, 2008
    #5
  6. On 2008-08-23, richard wrote:
    > On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A."
    ><> wrote:
    >
    >>On 23 Aug, 20:30, richard <> wrote:
    >>> http://oldies.1littleworld.com/screen1.jpg
    >>>
    >>> http://oldies.1littleworld.com/test1.html
    >>>
    >>> IE7 shows the table field as intended.

    >>
    >>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.


    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.

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 23, 2008
    #6
  7. richard

    richard Guest

    On Sat, 23 Aug 2008 22:39:12 +0000, "Chris F.A. Johnson"
    <> wrote:

    >On 2008-08-23, richard wrote:
    >> On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A."
    >><> wrote:
    >>
    >>>On 23 Aug, 20:30, richard <> wrote:
    >>>> http://oldies.1littleworld.com/screen1.jpg
    >>>>
    >>>> http://oldies.1littleworld.com/test1.html
    >>>>
    >>>> IE7 shows the table field as intended.
    >>>
    >>>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.

    >
    > 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.
     
    richard, Aug 24, 2008
    #7
  8. On 2008-08-23, richard wrote:
    > On Sat, 23 Aug 2008 22:39:12 +0000, "Chris F.A. Johnson"
    ><> wrote:
    >
    >>On 2008-08-23, richard wrote:
    >>> On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A."
    >>><> wrote:
    >>>
    >>>>On 23 Aug, 20:30, richard <> wrote:
    >>>>> http://oldies.1littleworld.com/screen1.jpg
    >>>>>
    >>>>> http://oldies.1littleworld.com/test1.html
    >>>>>
    >>>>> IE7 shows the table field as intended.
    >>>>
    >>>>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.

    >>
    >> 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.


    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.

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 24, 2008
    #8
  9. richard

    Roy A. Guest

    On 24 Aug, 00:20, richard <> wrote:
    > On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A."
    >
    > <> wrote:
    > >On 23 Aug, 20:30, richard <> wrote:
    > >>http://oldies.1littleworld.com/screen1.jpg

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

    >
    > >> IE7 shows the table field as intended.

    >
    > >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.
    >
    >
    >
    > >> 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.

    >
    > 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>
     
    Roy A., Aug 24, 2008
    #9
  10. richard

    Andy Guest

    "richard" <> wrote in message
    news:...
    > 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
     
    Andy, Aug 24, 2008
    #10
  11. richard

    Bergamot Guest

    Bergamot, Aug 24, 2008
    #11
  12. Bergamot wrote:
    > Jonathan N. Little wrote:
    >> richard wrote:
    >>> http://oldies.1littleworld.com/test1.html
    >>>
    >>> IE7 shows the table field as intended.
    >>> 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

    >
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 24, 2008
    #12
  13. richard

    richard Guest

    On Sun, 24 Aug 2008 09:39:33 -0500, Bergamot <>
    wrote:

    >
    >Jonathan N. Little wrote:
    >> richard wrote:
    >>> http://oldies.1littleworld.com/test1.html
    >>>
    >>> IE7 shows the table field as intended.
    >>> 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

    >
    >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.
     
    richard, Aug 25, 2008
    #13
  14. richard

    richard Guest

    On Sun, 24 Aug 2008 11:42:35 +0100, "Andy"
    <> wrote:

    >
    >"richard" <> wrote in message
    >news:...
    >> 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.
     
    richard, Aug 25, 2008
    #14
  15. 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.

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 25, 2008
    #15
  16. richard

    Roy A. Guest

    On 25 Aug, 02:09, richard <> wrote:

    > > [...]


    > 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?
     
    Roy A., Aug 25, 2008
    #16
  17. richard

    Neredbojias Guest

    On 24 Aug 2008, richard <> wrote:

    > 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.

    --
    Neredbojias
    http://www.neredbojias.net/
    Great Sights and Sounds
    http://adult.neredbojias.net/ (adult)
     
    Neredbojias, Aug 25, 2008
    #17
  18. richard

    Chaddy2222 Guest

    Chris F.A. Johnson wrote:

    > 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.
    >

    Yeah what he said.
    --
    Regards Chad. http://freewebdesignonline.org
     
    Chaddy2222, Aug 25, 2008
    #18
  19. richard

    Andy Guest

    "richard" <> wrote in message
    news:...
    > On Sun, 24 Aug 2008 11:42:35 +0100, "Andy"
    > <> wrote:
    >
    >>
    >>"richard" <> wrote in message
    >>news:...
    >>> 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
     
    Andy, Aug 25, 2008
    #19
  20. richard

    Chaddy2222 Guest

    Neredbojias wrote:

    > On 24 Aug 2008, richard <> wrote:
    >
    > > 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.
    >

    ROTFLMAO
    --
    Regards Chad. htttp://freewebdesignonline.org
     
    Chaddy2222, Aug 25, 2008
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?S3Vt?=
    Replies:
    1
    Views:
    792
    Peter Blum
    Jun 8, 2005
  2. Richard
    Replies:
    15
    Views:
    636
    Fat Sam
    Jan 19, 2005
  3. vocabulo
    Replies:
    1
    Views:
    273
  4. Peter victor
    Replies:
    3
    Views:
    354
    Mike Schilling
    Apr 16, 2010
  5. Richard

    ok experts.....explain how this works

    Richard, Jan 18, 2005, in forum: Javascript
    Replies:
    14
    Views:
    149
    Fat Sam
    Jan 19, 2005
Loading...

Share This Page