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.
255 lines
8.6 KiB
255 lines
8.6 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>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- end body content //-->
|
|
|
|
</div>
|
|
|
|
<div id="right-container">
|
|
|
|
<div id="right-side-title"></div>
|
|
|
|
<hr/>
|
|
|
|
<div id="right-side-content1">
|
|
<!-- begin right side top content //-->
|
|
|
|
<h2>Search This Site</h2>
|
|
<form method="get" action="/cgi-bin/mt-search.cgi">
|
|
<div>
|
|
<label for="search">Keywords:</label>
|
|
<input class="styled" id="search" name="search" value="Enter Text"></input>
|
|
<input type="image" src="http://alazanto.org/themes/brooke/images/search-go.gif" class="styled3" alt="submit search"></input>
|
|
</div>
|
|
</form>
|
|
|
|
<h2>Monthly Archives</h2>
|
|
<ul>
|
|
<li><a href="http://alazanto.org/weblog/2004_02.php">February 2004 (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2004_01.php">January 2004 (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_12.php">December 2003 (1)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_11.php">November 2003 (3)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_10.php">October 2003 (4)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_09.php">September 2003 (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_08.php">August 2003 (8)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_07.php">July 2003 (4)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/2003_06.php">June 2003 (3)</a></li>
|
|
|
|
</ul>
|
|
|
|
<h2>Categories</h2>
|
|
<ul>
|
|
<li><a href="http://alazanto.org/archives.php">Category Listing</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_creative_nonfiction.php">Creative Nonfiction (3)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_design_philosophy.php">Design Philosophy (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_mt_carbon.php">MT Carbon (4)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_mental_health.php">Mental Health (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_notable_links.php">Notable Links (2)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_society.php">Society (4)</a></li>
|
|
<li><a href="http://alazanto.org/weblog/cat_web_design.php">Web Design (12)</a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
<!-- end right side top content //-->
|
|
|
|
<div id="right-side-divider"></div>
|
|
|
|
<hr/>
|
|
|
|
<div id="right-side-content2">
|
|
<!-- begin right side bottom content //-->
|
|
|
|
<h1><span>More Info</span></h1>
|
|
|
|
<p>When writing new comments, please keep in mind that I no longer support embedded HTML or textile formatting. As always, please be curtious or I might confuse your words with spam.</p>
|
|
|
|
<hr class="decorated-end"/>
|
|
|
|
</div>
|
|
<!-- end right side bottom content //-->
|
|
|
|
</div>
|
|
|
|
<div id="right-margin">
|
|
|
|
<div id="right-side-margin"></div>
|
|
|
|
</div>
|
|
|
|
<div id="copyright">
|
|
|
|
<p>Copyleft 2004 Kevin Davis. All material is free to use - especially, when considering the limitation of text on a screen.</p>
|
|
|
|
</div>
|
|
|
|
<div id="bottom-tile"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|