Static website for local motocross track (circa Jun 2004)
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.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
|
|
<!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 avalue of zero (for Gecko browsers), we eliminate the default indent of listitems (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>
|
