Testing and Caveats
In this section you take the completed project of the last section and test it in Internet Explorer.
In a project as lengthy and complicated as the Wrox P2P new user registration form, there are bound to be a few incompatibilities. A few of these incompatibilities have already been addressed, but Explorer shows a document that is far from looking like a professional technical book publisher's web site. Figure 8-6 shows a screenshot of the Wrox P2P new user registration form without any hacking applied.
Figure 8-6
To make the Wrox P2P new user registration form appear as sparkling and shiny as it does in Firefox, follow these steps:
As with previous projects, Dean Edwards' IE7 JavaScript is applied to bring more consistency to the project. Add the IE7 conditional commented JavaScript to the register.html document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' id='p2p-wrox-com'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>p2p.wrox.com Forums - Register</title>
<link rel='stylesheet' type='text/css' href='styles/p2p-header.css' />
<link rel='stylesheet' type='text/css' href='styles/p2p-body.css' />
<link rel='stylesheet' type='text/css' href='styles/p2p-form.css' />
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon' />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>Save the document as register-ie.html.
Having applied the IE7 JavaScript, you get output similar to that in Figure 8-7.
Figure 8-7
The project still is not perfect in Internet Explorer:
The top bar containing the logo goes too far to the right.
The <legend> elements are not positioned correctly.
There is too much space between the bread crumbs and the content.
There is also one more bug that isn't so obvious. This bug is demonstrated in Figure 8-8.
Figure 8-8
In Figure 8-8, you see that when the text fields containing backgrounds are filled with enough text to cause scrolling, the background moves. To correct these bugs, follow these steps:
Modify register-ie.html, applying the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' id='p2p-wrox-com'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>p2p.wrox.com Forums - Register</title>
<link rel='stylesheet' type='text/css' href='styles/p2p-header.css' />
<link rel='stylesheet' type='text/css' href='styles/p2p-body.css' />
<link rel='stylesheet' type='text/css' href='styles/p2p-form.css' />
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon' />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type=" text/javascript"></script>
<link rel='stylesheet' type='text/css' href='styles/p2p-ie.css' />
<![endif]-->
</head>Save the preceding markup as register-ie-hacks.html.
Enter the following style sheet into your text editor:
div#header {
/* The Holly Hack fixes positioning
of the cart links */
height: 1%;
}
div#content {
margin-top: -20px;
}
div#innerbody input.i {
background: url('../images/input.png') no-repeat fixed;
}
div#innerbody input.a {
background: url('../images/input-a.png') no-repeat fixed;
}
div#innerbody textarea {
background: url('../images/textarea.png') no-repeat fixed;
padding-right: 20px;
}
fieldset {
position: relative;
margin-bottom: 10px;
}
legend {
/* This seems the only way to get Explorer
to position the <legend> correctly */
position: absolute;
top: -10px;
}Save the new style sheet as p2p-ie.css.
This results in the output shown in Figure 8-9.
Figure 8-9
The hacks required to get Explorer on the same page, so to speak, as other browsers are relatively simple. Given the symptoms exhibited in Figures 8-7 and 8-8, the resulting conditional comment style sheet is simple and to the point. First a "Holly" hack is applied to the header <div> element:
div#header {
/* The Holly Hack fixes positioning
of the cart links */
height: 1%;
}
The Holly Hack is named for developer Holly Bergevin, who along with another fellow named "Big John" maintain the online browser bug site extraordinaire "Position is Everything" at http://www.positioniseverything.net. The Holly Hack is a technique used to force an element in Explorer to acquire the "layout" algorithm, which is used internally within Internet Explorer's Trident rendering engine. While I could write an entire chapter about "layout" in Explorer, the simple, to the point explanation is that elements without layout define their dimensions based on the last element to have layout — for instance, auto width on a block element is determined by that element's parent, and that element's parent may also have an auto width which is itself determined by that element's parent, and so on.
Layout in Explorer is an internal algorithm used to implement rendering scenarios like this: elements with layout serve as the reference point to render children and descendants whose dimensions position are reliant upon that element's dimensions. The Holly Hack forces a new point of reference to be created, which corrects the incorrect positioning of the navigational links in the header of the registration form.
You can learn more about Internet Explorer's proprietary hasLayout feature from the following URL: http://www.satzansatz.de/cssd/onhavinglayout.html.
The next hack corrects the spacing between the bread crumbs and the content <div>. The top margin is simply set to negative 20 pixels to force the content <div> up farther:
div#content {
margin-top: -20px;
}
After correcting the space between the bread crumbs and the content <div>, the next hack fixes those scrolling backgrounds in the <input> and <textarea> elements. Applying the fixed keyword to the background property prevents the background of the <input> and <textarea> element from scrolling:
div#innerbody input.i {
background: url('../images/input.png') no-repeat fixed;
}
div#innerbody input.a {
background: url('../images/input-a.png') no-repeat fixed;
}
div#innerbody textarea {
background: url('../images/textarea.png') no-repeat fixed;
padding-right: 20px;
}
Finally, the top border of the <fieldset> element and the position of the <legend> element are corrected with the following two rules. Applying a bottom margin to the <fieldset> element pushes its top border up to where it belongs, and a position: relative; declaration positions the absolutely positioned <legend> element relative to the <fieldset> element, and it is then wiggled into place using the top: -10px declaration:
fieldset {
position: relative;
margin-bottom: 10px;
}
legend {
/* This seems the only way to get Explorer
to position the <legend> correctly */
position: absolute;
top: -10px;
}
With the Wrox P2P new user registration form fixed and working properly in Internet Explorer, the next chapter discusses user interface design.
No comments:
Post a Comment