UL Navigation

**Josephbm91** · 03-13-2010, 05:38 AM

Hello.

So I'm trying to make my html more semantic, so I'm trying to avoid divs and spans as much as possible. I'm trying to make an unordered list navigation, but it shows up really choppy in IE7. However, the moment I change it from <ul id="navigation"> to <div id="navigation">, it works perfectly. Just for semantics sake I'd like to see if I could keep the ul working. Here's the html code, it validates xhtml strict so you don't have to worry about that.

Code:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link href="css/global.css" rel="stylesheet" type="text/css" /> 
<title>Eagle Steel Buildings</title> 
</head> 
<body> 
 
<div id="wrapper"> 
<img id="banner" src="images/global/banner.jpg" alt="Eagle Steel Building"/> 
	
	<ul id="navigation"> 
		<li><a href="" class="selected">Home</a></li>		
		<li><a href="">About Us</a></li> 
		<li><a href="">Our Work</a></li> 
		<li><a href="">Free Quote</a></li> 
		<li><a href="">Contact Us</a></li> 
	</ul> 
	
	<h1>Steel Building Construction</h1> 
	
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> 
		
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> 
		
	<h2>Lorem Ipsum</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p>		
 
 
<form id="quoteform" action="quote_home.php" method="post"> 
	<fieldset>
		<label for="name">Name</label><input type="text" name="name" id="name" /> 
		<label for="date">Date</label><input type="text" name="date" id="date" /> 
		<label for="phone">Phone</label><input type="text" name="phone" id="phone" /> 
		<label for="email">Email</label><input type="text" name="email" id="email" /> 
		<label for="location_zip_code">Location Zip Code</label><input type="text" name="location_zip_code" id="location_zip_code" /> 
		<label for="width">Width</label><input type="text" name="width" id="width" /> 
		<label for="length">Length</label><input type="text" name="length" id="length" /> 
		<label for="sidewall_height">Sidewall Height</label><input type="text" name="sidewall_height" id="sidewall_height" /> 	
	</fieldset>
</form> 
 
 
	
	
 
	</div> 
	
</body> 
</html>

And here's the CSS, also validated.

Code:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Begin Page Styles */

.btest{border:1px solid #FFFFFF;}

body {
background: #CCCCCC URL('../images/global/steelbg.jpg') top left;
margin: 0px;
padding: 0px;}

#wrapper{
margin: 0px auto;
width: 1010px; 
height: 1000px;
background: URL('../images/global/wrappershadow.png') repeat-y;}

	#banner{
	display: block;
	margin: 0px auto;
	width: 1000px;
	height: 250px;
	}
	
	#navigation{
	display: block;
	margin: -2px auto 0px;
	width: 1000px;
	height: 38px;
	list-style-type:none;
	background: #000000 URL('../images/global/navbg.png') no-repeat;} 
		
	
	#navigation a{
	float: left;
	height: 39px;
	line-height: 2.3em; 
	margin-top:3px;

	padding-left: 13px;
	padding-right: 13px; 


	font-size: 1.0em;
	font-family: Verdana, serif;
	text-decoration: none;
	font-weight: bold;
	color: #CCCCCC;

	text-align: center;}
	
	
	#navigation a:hover, #navigation a.selected{
	text-decoration: underline;}
	
	#navigation a.selected{
	color: #ff0000;}

I have not finished styling the rest of the page, I am only concerned with the navigation right now.

I appreciate your time and effort!

**BLiZZaRD** · 03-13-2010, 11:29 AM

ULs are block elements just like divs are block elements, so unless you want the UL to do something it cannot (i.e. have a back ground image that spreads larger than the UL width, etc) then you don't need the div, but you do need to be more precise in the ul CSS definitions.

I guess the question though, is why would you not want to use divs in your code? Thinking of using tables for layout?

But then again, why use XML for your doctype? But I suppose some people have to keep dead languages alive somewhere.

Sanskrit was useful once too..

**Josephbm91** · 03-14-2010, 06:33 AM

I don't do table-based design. I just wanted to challenge myself to try to be more semantic with my html. I can style things all with divs if I wanted to, but just for experimentation I'd like to try a different approach. The problem has been solved though. Thanks for your reply.

Thread: UL Navigation

Thread Tools

Search Thread

UL Navigation

Bookmarks

Bookmarks

Posting Permissions