You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
5.9 KiB
164 lines
5.9 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
|
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
|
|
|
|
<head>
|
|
|
|
<title>Alazanto: Entry Comments</title>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta http-equiv="Content-Language" content="en-us" />
|
|
<meta http-equiv="imagetoolbar" content="false" />
|
|
<meta name="MSSmartTagsPreventParsing" content="true" />
|
|
<meta name="ROBOTS" content="ALL" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<hr />
|
|
|
|
<h2 class="date">Original Post</h2>
|
|
|
|
<p>With a little help, I managed to work around a common rendering issue with linked list items and Internet Explorer 5 and 6 for windows. I decided to document my findings with a short tutorial on styling unordered lists (ul).</p>
|
|
|
|
<p>Special thanks go to Michael Ryznar for his assistance.</p>
|
|
|
|
<h3>The Rendering Bug</h3>
|
|
|
|
<p>Without the necessary workaround, Internet Explorer 5 and 6 will add a large amount of white-space under linked list items. In most cases, this effect is undesirable.</p>
|
|
|
|
<h3>Creating the Menu</h3>
|
|
|
|
<p>First, let us create a basic, unordered list containing hyper linked text.</p>
|
|
|
|
<pre>
|
|
<ul><br /><ul><br /> <li><a href="">Item1</a></li><br /> <li><a href="">Item2</a></li><br /></ul><br /></ul>
|
|
</pre>
|
|
|
|
<p>For the end product, we want to create a simple menu of two clickable blocks without any white space in between. So now, we will write a the corresponding CSS.</p>
|
|
|
|
<p>The first step is to get rid of the bullets in the unordered list (ul).</p>
|
|
|
|
<pre>
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
border: 1px solid #555;
|
|
}
|
|
</pre>
|
|
|
|
<p>The list style property lets you customize the appearance of bullets. By declaring no values in this property, the display of bullets are eliminated. By giving margin-left a value of zero (for ie browsers) and padding-left a
|
|
value of zero (for Gecko browsers), we eliminate the default indent of list
|
|
items (li) in the unordered list.</p>
|
|
|
|
<p>In addition, I added a dark grey border for styling.</p>
|
|
|
|
<p>Next, we want to style the list items themselves.</p>
|
|
|
|
<pre>
|
|
li {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</pre>
|
|
|
|
<p>By setting the display property to the value of inline, we work around a rendering issue in the windows version of Internet Explorer 5 and 6. In addition, the margin and padding are set to zero so that extra whitespace is not created between items.</p>
|
|
|
|
<p>Next, we want to make the links into solid boxes with the option of changing color on hover.</p>
|
|
|
|
<pre>
|
|
li a { /*/*/
|
|
display: block;
|
|
margin: 0;
|
|
padding: 3px;
|
|
|
|
text-decoration: none;
|
|
|
|
background: #ddd;
|
|
/* */}
|
|
</pre>
|
|
|
|
<p>For linked elements we will be changing the display property to a value of block. Hyperlinks are normally defined as an inline element, but to make the element into a solid box, we need it to occupy an entire line. This is the purpose of display: block.</p>
|
|
|
|
<p>The margin is set to zero in order to eliminate whitespace between elements. I added 3 pixels of padding to give each element 3 pixels of spacing along the inside edge.</p>
|
|
|
|
<p>In addition, a background color was added for styling.</p>
|
|
|
|
<p>The most confusing elements in this section are the slashes and asterisks. /* This is how text is commented out in CSS. */ The particular pattern of slashes and asterisks prevents Netscape Navigator 4 from rendering this CSS. The browser has been prone to crashing when trying to render this element as a block.</p>
|
|
|
|
<h3>The Workaround</h3>
|
|
|
|
<p>To elaborate on the Internet Explorer workaround, we first need to set the display of the list items as inline. Then, the hyper link is set to display as a solid box through display: block. This method ensures that no extra whitespace displays in between the list items.</p>
|
|
|
|
<p>I had to research this workaround for a new project I am working on. I will be working with Northland College on web accessibility. I don't want to give away too many details about this project, but I will share the code used to produce one of the menus in the redevelopment. Hopefully this will show a real-world context of this workaround.</p>
|
|
|
|
<h3>XHTML required for a menu:</h3>
|
|
|
|
<pre>
|
|
<ul><br /><ul><br /><div class="qlink-title"><br /><br /><h3><span>Quick Links »</span></h3><br /><br /><ul class="quicklinks"><br /><br /><li><a href="#">About Northland</a></li><br /><li><a href="#">Financial Aid</a></li><br /><li><a href="#">Contact NC</a></li><br /><li><a href="#">Check Email</a></li><br /><li><a href="#">Site Map</a></li><br /><li><a href="#">Northland Store Online</a></li><br /><li><a href="#">Transcript Request</a></li><br /><li><a href="#">Online Application</a></li><br /><li><a href="#">The Bridge</a></li><br /><br /></ul><br /></div><br /></ul><br /></ul>
|
|
</pre>
|
|
|
|
<h3>CSS required for a menu:</h3>
|
|
|
|
<pre>
|
|
div.qlink-title ul.quicklinks {
|
|
list-style: none;
|
|
|
|
margin-top: 3px;
|
|
margin-left: 5px;
|
|
margin-bottom: 0px;
|
|
margin-right: 5px;
|
|
|
|
padding-top: 2px;
|
|
padding-left: 0px;
|
|
padding-bottom: 0px;
|
|
padding-right: 0px;
|
|
|
|
font-family: "Verdana";
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
|
|
color: #444422;
|
|
background-color: #fff;
|
|
|
|
border: 1px solid #aaaa88;
|
|
}
|
|
|
|
div.linklist ul.quicklinks li {
|
|
display: inline;
|
|
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
div.linklist ul.quicklinks a {
|
|
/*/*/display: block;
|
|
|
|
margin: 0px;
|
|
padding: 2px;
|
|
|
|
height: 14px;
|
|
|
|
text-decoration: none;
|
|
|
|
color: #444422;
|
|
background-color: #f5f3ea;
|
|
|
|
border-left: 2px solid #fff;
|
|
border-bottom: 2px solid #fff;
|
|
border-right: 2px solid #fff; /* */
|
|
}
|
|
|
|
div.linklist ul.quicklinks a:hover {
|
|
text-decoration: none;
|
|
color: #444422;
|
|
background-color: #DEDACA;
|
|
}
|
|
</pre>
|
|
<hr />
|
|
</body>
|
|
</html>
|