 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / HTML / August 2008Ok experts explain this and solve
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://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?"  Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) >> http://oldies.1littleworld.com/test1.html >> [quoted text clipped - 9 lines] >"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. > 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 >> http://oldies.1littleworld.com/screen1.jpg >> [quoted text clipped - 4 lines] >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. [quoted text clipped - 3 lines] > >Then remove the height on the .t1 class. If I do that, both scroll bars show. >> So how does one correct for FF? > [quoted text clipped - 8 lines] ><!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 >>> http://oldies.1littleworld.com/screen1.jpg >>> [quoted text clipped - 6 lines] > > 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. SignatureChris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) >>>> http://oldies.1littleworld.com/screen1.jpg >>>> [quoted text clipped - 11 lines] > 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. >>>>> http://oldies.1littleworld.com/screen1.jpg >>>>> [quoted text clipped - 14 lines] > 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. SignatureChris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) > On Sat, 23 Aug 2008 12:21:43 -0700 (PDT), "Roy A." > [quoted text clipped - 19 lines] > > 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> > http://oldies.1littleworld.com/screen1.jpg > [quoted text clipped - 8 lines] > > So how does one correct for FF? http://www.google.com/search?hl=en&safe=off&q=quirksmode+IE+broken+box+model&btn G=Search quirksmode IE broken box model - Google Search SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com >> http://oldies.1littleworld.com/test1.html >> [quoted text clipped - 3 lines] > http://www.google.com/search?hl=en&safe=off&q=quirksmode+IE+broken+box+model&btn G=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. SignatureBerg >>> http://oldies.1littleworld.com/test1.html >>> [quoted text clipped - 6 lines] > 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. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com >>> http://oldies.1littleworld.com/test1.html >>> [quoted text clipped - 7 lines] >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. ... > 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. SignatureChris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) > ... > > Points, ems, and even pixels have set definitions. Yet browsers seem [quoted text clipped - 13 lines] > 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 > I haven't totally snubbed my nose at strict, just haven't gotten > around to doing it yet. [quoted text clipped - 7 lines] > 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. SignatureNeredbojias http://www.neredbojias.net/ Great Sights and Sounds http://adult.neredbojias.net/ (adult) > > I haven't totally snubbed my nose at strict, just haven't gotten > > around to doing it yet. [quoted text clipped - 10 lines] > 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 >> > I haven't totally snubbed my nose at strict, just haven't gotten >> > around to doing it yet. [quoted text clipped - 14 lines] > -- > Regards Chad. htttp://freewebdesignonline.org :} Glad to see a few of us still have a sense of humor. SignatureNeredbojias http://www.neredbojias.net/ Great Sights and Sounds http://adult.neredbojias.net/ (adult) >>Some people tried to warn him about snubbing his nose at HTML 4.01 >>Strict. > > Well dear boy, according to your attitude, I'd be surfing the web > using a 300 baud acoustical modem and dos. Huh? What does that have to do with anything? > I haven't totally snubbed my nose at strict, just haven't gotten > around to doing it yet. Uh huh, sure. > 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. No, the problem is your failure to understand quirks vs standards mode. You have brought the display problems upon yourself because of it. > Points, ems, and even pixels have set definitions. Yet browsers seem > to use their own set of definitions. Um, your problem has nothing to do with the units you've chosen. Ever hear of the CSS box model? > Ask a publisher of newspapers > what a point, or an em, is and he will tell you. That's irrelevant to the problem you are experiencing. SignatureBerg > http://oldies.1littleworld.com/screen1.jpg > [quoted text clipped - 8 lines] > > 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 >> http://oldies.1littleworld.com/screen1.jpg >> [quoted text clipped - 26 lines] > >Andy Did not work for me. Do note that there is nothing in the CSS on this version for .t1. > > [...] > 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? >>> http://oldies.1littleworld.com/screen1.jpg >>> [quoted text clipped - 30 lines] > > 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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.