Building Around Browser Bugs

1
Building Around Browser Bugs
Edward Grossman
2
Exterminator?

• Edward Grossman
• Editor-at-Large, internet.com
• JavaBoutique.com, ServerWatch.com,
  WebServerCompare.com, search.internet.com,
  IntranetDesignMagazine.com, WDVL.com
• egrossman_at_internet.com
• http//wdvl.com/Authoring/HTML/BrowserBugs/

3
Bugs Bug

• What Well Cover
• Define Bugs
• How to Kill
• Squash Bugs
• Audience Bugs
• What Well Assume
• You Know What HTML Is
• Youre Building for v4 Browsers
• You Want to Squash Bugs

4
What Are Bugs?

• Display Bugs
• Layout, Rendering
• Application Bugs
• Memory Leak
• Security Bugs
• Expose HD or Personal Information

5
Display Bugs

• Rendering Problems
• Often Caused by Bad Code
• Sometimes Caused by Good Code
• Valid HTML sometimes causes display problems
• Valid HTML rendered differently by different
  browsers platforms
• Sometimes all are OK, just different
• Sometimes one (or some) platform/browser totally
  breaks
• Different Than Not Implemented

6
Platform Matters

• www.internet.com Browser Versions
• IE 5 -- 52
• NS 4 -- 24
• IE 4 -- 19
• Everything Else --
• WebTV -- .3
• Mozilla (NS6) -- .1

Source internet.com Log Files, 2000/03/16
7
Platform Matters

• www.internet.com OS Versions
• Windows NT -- 49
• Windows 95/98 -- 42
• Macintosh -- 5
• Linux -- 2
• Everything Else

Source internet.com Log Files, 2000/03/16
8
Bug Examples

• Underscore Bug
• Table-Space Bug

9
Underscore Bug Example
10
Table-Space Bug Example
11
Squashing Bugs

• The Madness
• The Method
• The Solution(s)

12
The Madness

• Browsers Do an Incredibly Good Job of Displaying
  Bad Code
• Sometimes They Cant Cope
• Browsers/HTML Are Conflicted About Displaying
  White Space
• CSS/XML is Poorly Implemented
• Werent Complete

13
The Method

• Remove Code
• Until Bug Scrams
• Add Code Back
• Until Bug Appears
• Non-Valid Solution?
• Should You Care?
• Sometimes Solution is NOT Valid HTML

• Write Good Code
• Dont Tangle
• Indent
• Comment Tags
• Write Valid Code
• Close Tags
• Nest Properly
• Examine White Space
• Examine Alignment

14
The Method -- Digression

• Or, How I Did It

SRC"/java-mini-yellow.gif ALTjava BORDER0

Click Above Image for
JavaBoutique
15
The Method -- Digression
SRC"/java-mini-yellow.gif ALTjavaBORDER0

Click Above Image
for JavaBoutique
16
The Method -- Digression


Click Above
Image for JavaBoutique
17
The Solutions

• Assume v4 Browsers
• Majority are Windows Surfers
• Kill Bugs!!!!
• Underscore Bug
• Table Space Bug
• CSS Bugs
• Generic Font Declarations
• Lose Style
• Body Padding Bug

18
Underscore Bug

• Netscape Only

19
Underscore Bug Bad HTML
JavaBoutique is Cool.
Here is a Link to
the Site ue.com" WIDTH"114" HEIGHT"43" BORDER"1"
ALT"" Click Above Image for
JavaBoutique
20
Underscore Bug Good HTML
JavaBoutique is Cool.
Here is a Link to
the Site ue.com" WIDTH"114" HEIGHT"43" BORDER"1"
ALT"" Click Above Image for
JavaBoutique
21
Underscore Bug Squashed!
22
Table-Space Bug

• Netscape, IE4, IE5

23
Table-Space Bug Bad HTML
cellpadding"0"
E-Comm is Cool
alt"" bgcolor"000000" E-Comm is Cool

24
Table-Space Bug Good HTML
cellpadding"0"
E-Comm is Cool
alt"" bgcolor"000000" E-Comm is Cool

25
Table-Space Bug Best HTML
cellpadding"0"
E-Comm is Cool
alt""
E-Comm is Cool
26
Table-Space Bug Squashed!
27
Table Space Bug Addendum

• Is it really a bug?
• Yes
• Space Before Doesnt Cause Same Displacement
• Irregular Behavior
• No
• HTML Does Not Require (at this point) the Strict
  Declaration of Text Content ? White Space
  Recognized by Default.

28
CSS Bug Generic Font
NS4
IE4
IE5

• IE 5

29
Generic Font Bad HTML
.cStyle font-familycursi
vefont-size18pt .ssStyle font-familysans-ser
if .mStyle font-familymonospace --
-- -- Cursive Text
Here Sans Serif Text
Here Monospace Text
Here
30
Generic Font Good HTML
.cStyle font-familyScrip
t,Zapf-Chancery,cursive font-size18pt .ssSt
yle font-familysans-serif .mStyle font-family
monospace -- -- -- class"cStyle"Cursive Text Here class"ssStyle"Sans Serif Text Here class"mStyle"Monospace Text Here
31
Generic Font Bug Squashed!
NS4
IE4
IE5
32
CSS Bug Lose Style

• Netscape

33
Lose Style Bug Bad HTML
P font-familyarialfont-
size16pt -- -- -- This is a
paragraph of text
with a table inline
SiteURLd icominternt.com/tr yahooyahoo.com
but the font style is
lost. Here's another par
and the style
is retained.
34
Lose Style Bug Good HTML
P font-familyarialfont-
size16pt -- -- -- This is now
two paragraphs of text. border"1" SiteURL
icominternt.com
yahooyahoo.com
The style is re-established. pHere's another par
and the style is
retained.
35
Lose Style Bug Best HTML
P font-familyarialfont-
size16pt .P font-familyarialfont-size16pt
-- -- -- This is a par of
text
with a table inline border"1" SiteURL
icominternt.com
yahooyahoo.com
and the style is
re-established. Here's another
paragraph
and the style is retained.
36
Lose Style Bug Squashed!
37
Body Padding Bug (aka WDVL-Hell)

• Netscape, IE 4, IE 5

38
Body Padding Bug Bad HTML
cellspacing"0" border"0" bgcolor"black"
Hello
World
color"FFFFFF"NavBar width"70"Content
39
Body Padding Bug
40
Body Padding Bug Good HTML
cellpadding"0" cellspacing"0" border"0" bgcolor"black" color"FFFFFF"Hello World
bgcolor"black" NavBaront Content table
41
Body Padding Bug
42
Body Padding Bug Better HTML
style"margin 0px" cellpadding"0" cellspacing"0" border"0" bgcolor"black" color"FFFFFF"Hello World
bgcolor"black" NavBaront Content table
43
Body Padding Bug
Not HTML4 Compliant
44
Body Padding Bug Back to the Drawing Board
Give IE apadding 0pxand it works. Means IE
Adds 8pxby default. Could it bethat NS
adds0px to a defaultpadding of 8px?
45
Body Padding Bug Best HTML 1
BODY margin-top-8pxmargin-left-8px /style cellpadding"0" cellspacing"0" border"0" bgcolor"black" color"FFFFFF"Hello World
color"FFFFFF"NavBar width70"Content
46
Body Padding Bug
47
Body Padding Bug Best HTML 2
BODY margin-top-8pxmargin-left-8px /style cellpadding"0" cellspacing"0" border"0" bgcolor"black" color"FFFFFF"Hello World
color"FFFFFF"NavBar width"69"Content
nbsp


nbsp
48
Body Padding Bug Squashed!
49
Body Padding Bug Addendum

• Solution ? Exactly The Same Display in All
  Browsers
• Acceptable Compromise!

50
Audience Bugs

• Send bugs to egrossman_at_internet.com

51
Summary

• There Are Bugs
• Underscore, Resize, Cache, Macintosh
• Fighting Bugs
• Examine White Space
• Simplifiy
• Strip Away Code Methodically
• Build Back Up
• We Smashed Bugs
• Examples of Building Better Code

52
Conclusion

• Know Your Audience
• Technically Adept - Newer Browsers
• Consumer and/or Commerce - Play It Safe
• Testing
• Browsers, Platforms
• Validation
• http//validator.w3.org/
• There Will Be Bugs
• IE5, Gecko, Opera, Linux, BeOS, XML, XHTML

53
Resources

• http//wdvl.com/Authoring/HTML/BrowserBugs/
• http//developer.netscape.com80/support/bugs/know
  n/javascript.html
• http//developer.netscape.com80/support/bugs/know
  n/css.html
• http//support.microsoft.com/support/kb/articles/q
  222/0/64.asp
• http//www.w3.org
• http//www.webreference.com/dhtml/diner/resize/
• http//www.webreference.com/html/tutorial4/
• http//www.webreference.com/html/watch/ie5/

54
Building Around Browser Bugs
55
Mac Bug IE Div

• Mac -- IE4

56
IE Div Bug Bad HTML
table
October 5,
1999
Left Hand Column
Left Hand Column Left Hand Column Left Hand
Column Left Hand Column Left Hand Column Left
Hand Column Left Hand Column Left Hand Column

Right Hand Column
Right
Hand Column
Right Hand Column
Right Hand
Column
Right Hand Column
Right Hand
Column

57
Mac Bug IE Div
58
IE Div Bug Good HTML
courier"October 5, 1999
clearall Left
Hand Column Left Hand Column Left Hand Column
Left Hand Column Left Hand Column Left Hand
Column Left Hand Column Left Hand Column Left
Hand Column
Right Hand Column
Right Hand
Column
Right Hand Column
Right Hand
Column
Right Hand Column
Right Hand
Column

59
IE Div Bug Squashed!
60
Mac Bug NS Java VM

• Mac Netscape

61
NS Java VM Bug (

• Netscape has confirmed that the JVM shipped with
  the Macintosh version of NS 4 is not fully Java
  Compliant.
• No plans to fix in a v4 release
• Waiting on v5(6?)/Gecko
• Solutions?
• Determine Need for Java Applet
• Determine Need for Mac/NS Audience
• Rigorous Testing