3 replies [Last post]
gomezyen
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2008-07-27
Posts: 3
Points: 0

hi all,
i'm having a problem with my top right navigation unordered lists. the only link recognized is the last item in list. it only happens in IE.
(also, slideshow in IE doesn't appear either.)
thanks to everyone involved. it's a great site.

len

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
	<head>
 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 
  <meta content="Site by Joy Worthen and Len Yen, softfruit design, Seattle, WA - <a href="http://www.softfruitdesign.com" rel="nofollow">www.softfruitdesign.com</a>" name="author" />
 
  <meta content="Center for Biologically Inspired Design" name="Description" />
 
  <meta content="index, follow" name="robots" />
 
  <link media="all" rel="stylesheet" type="text/css" href="styles/cbid.css" />
 
  <link rel="stylesheet" type="text/css" href="chrome://firebug/content/outlines.css" />
 
<script type="text/javascript">
//<![CDATA[
 
	var browser=0;
	if(navigator.appName.indexOf('Internet',0)==-1)browser=1;
	if(parseFloat(navigator.appVersion)>=5)browser=2;
 
	//TIMESTAMP CALCULATIONS
	var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
	var days=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
	var now=new Date
	var mon=months[now.getMonth()];
	var day=days[now.getDay()];
	var yr=now.getYear();
	if(browser)yr+=1900;
	var theDate="<nobr>"+mon+" "+now.getDate()+", "+yr+"<\/nobr>";
 
 
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
<!--
var image1=new Image()
image1.src="img/slide/cbid1.jpg"
var image2=new Image()
image2.src="img/slide/cbid2.jpg"
var image3=new Image()
image3.src="img/slide/cbid3.jpg"
var image4=new Image()
image4.src="img/slide/cbid4.jpg"
var image5=new Image()
image5.src="img/slide/cbid5.jpg"
var image6=new Image()
image6.src="img/slide/cbid6.jpg"
var image7=new Image()
image7.src="img/slide/cbid7.jpg"
var image8=new Image()
image8.src="img/slide/cbid8.jpg"
var image9=new Image()
image9.src="img/slide/cbid9.jpg"
var image10=new Image()
image10.src="img/slide/cbid10.jpg"
var image11=new Image()
image11.src="img/slide/cbid11.jpg"
var image12=new Image()
image12.src="img/slide/cbid12.jpg"
var image13=new Image()
image13.src="img/slide/cbid13.jpg"
var image14=new Image()
image14.src="img/slide/cbid14.jpg"
var image15=new Image()
image15.src="img/slide/cbid15.jpg"
var image16=new Image()
image16.src="img/slide/cbid16.jpg"
var image17=new Image()
image17.src="img/slide/cbid17.jpg"
var image18=new Image()
image18.src="img/slide/cbid18.jpg"
var image19=new Image()
image19.src="img/slide/cbid19.jpg"
var image20=new Image()
image20.src="img/slide/cbid20.jpg"
//-->
//]]>
</script>
<title>Center for Biologically Inspired Design at Georgia Tech</title>
<style type="text/css">
	/*<![CDATA[*/
<!--
 
-->
/*]]>*/
</style>
</head>
<body onload="slideit()">
<div id="allpagecontent">
	<!-- start of HEADER -->
		<div id="header">
		<div class="top">
		<a href="index.html"><img src="img/main/home.gif" alt="home" width="26px" height="20px" /></a></div>
	<!-- start of NAV -->
		<div class="left"><script type="text/javascript">
		//<![CDATA[
		document.write(theDate);
		//]]>
		</script></div>
 
            <div id="research"> <img src="img/main/research.gif" alt="research" height="16px" width="74px" />
				<ul class="nav">
					<li> <a href="biosensors.html">biosensors</a></li>
					<li> <a href="biomimetic.html">biomimetic materials &amp; processes</a></li>
					<li> <a href="locomotory.html">locomotory devices</a></li>
					<li> <a href="systems.html">systems organization</a></li>
				</ul>
			</div>
			<div id="resources"> <img src="img/main/resources.gif" alt="resources" width="74px" height="16px"/>
				<ul class="nav">
					<li> <a href="in_the_news.html">in the news</a></li>
					<li> <a href="univ_labs.html">universities/labs</a></li>
					<li> <a href="groups.html">orgs&#47;groups</a></li>
					<li> <a href="special.html">special interests</a></li>
					<li> <a href="press.html">press</a></li>
				</ul>
            </div>
            <div id="about"> <img src="img/main/about.gif" alt="about" width="74px" height="16px"/>
				<ul class="nav">
					<li> <a href="history.html">history</a></li>
					<li> <a href="education.html">education</a></li>
					<li> <a href="directors.html">directors</a></li>
					<li> <a href="members.html">members</a></li>
			</ul>
		</div>
	</div>
<!-- end of HEADER -->
<!-- start of MAINCOL -->
<div id="maincol">
 
<!-- UPCOMNG -->			
			<div>
			<br />
			<a href="uptothemoment.html">
			<img class="right" align="right" src="img/upc/upc_hosoi_robotic_slug.jpg" 
				alt="hosoi roboslug" width="200px" height="135px" /></a>
			<h1><a href="uptothemoment.html">Up to the Moment</a></h1>
			<br />
				<h2>News, Events, and the 2007-2008 CBID Seminar Series</h2>
				<br />
				<br />
					<p><b>Dr. Anette (Peko) Hosoi,</b> Associate Professor of Mechanical 
					Engineering, Massachusetts Institute of Technology
 			<br />
 			<br/>3:00, Monday April 14th, L1205 Ford ES&amp;T<br/>
 			<br/> <b>ABSTRACT: Optimizing Low Reynolds Number Locomotion </b><br/>
				In this talk I will discuss two optimization topics related to low 
				Reynolds number locomotion:  optimal stroke patterns in linked swimmers 
				and optimal fluid material properties in adhesive locomotion. 
				In the first case, we begin by optimizing stroke patterns for 
				Purcell's 3-link swimmer modeled as a jointed chain of three slender 
				links moving in an inertialess flow. We then go on to investigate 
				uniflagellate and biflagellate organisms and compare the optimized 
				results to biological data.  In the second case, we analyze adhesive 
				locomotion used by common gastropods such as snails and slugs. 
				Such organisms crawl on a solid substrate by propagating muscular waves 
				of shear stress on a viscoelastic mucus. Using a simple mechanical model, 
				we derive criteria for favorable fluid material properties to lower 
				the energetic cost of locomotion.  <br />  Watch "World in Motion, 2006" at: 
				<a  href="http://web.mit.edu/sciwrite/tvsegment.html"> 
				video</a> <br />
				</p>
			</div>
<!-- SEMINAR -->	
			<div>
			<a href="seminar.html">
			<img class="right" align="right" src="img/sem/sem_vukusic.jpg" alt="peter vukusic" width="155px" height="105px" /></a>
 
			<h1><a href="seminar.html">Center for Biologically Inspired Design</a></h1>
			<br />
			<h2> 2006-2007 Seminar Series </h2>
					<br />
					<br />
					<p><b>Dr Peter Vukusic</b>, School of Physics, University of Exeter
					Evolutionary photonics: new designs inspiration
					<b>Abstract:</b> Diverse designs of naturally evolved nano-scale
					periodicity are known to generate optical functionality in the living world. 
					</p><h5>August 7, 2006</h5>
			</div>
<!-- MOVERS -->			
			<div>
			<a href="mover_shakers.html">
			<img class="right" align="right" src="img/mov/mov_oakey2.jpg" alt="oakey/design" width="136px" height="185px" /></a>
			<h1><a href="mover_shakers.html">Movers and Shakers</a></h1>
			<br />
				<h2>in Biomimicry and Biologically Inspired Design</h2>
				<br />
				<br />
					<p><b>David Oakey : </b>founder of David Oakey Designs,
              leads global efforts in sustainable or "smart design" and
              biomimicry. Oakey challenges industrial designers, architects,
              teachers and students to take action and impact change
              today. Sustainable design must be innovative utilizing
              efficient use of materials, seeking smart products,
              and eliminating waste in the process. Respecting the
              Future is the conscious choice of systems thinking,
              recognizing how design impacts the world during and
              after its life cycle.  <br/>
              Consider his interview at: 
			  <a  href="http://www.interfacesustainability.com/oakeyi.html"> 
			  learn more</a> <br />
					</p>
			</div>
<!-- SYMPOSIUM  -->	
			<div id="content">
			<div>
			<a href="symposium.html">
			<img align="right" class="right" src="img/main/flyfoot.jpg" alt="fly foot" width="165px" height="120px" />
			</a>
			<h1><a href="symposium.html">2006 Symposium at Georgia Tech</a></h1>
			<br />
			<h2>in Atlanta Georgia </h2>
			<br />
			<br />
					<p>An amazing international gathering of scientists and engineers
					in the Spring of 2006 at Georgia Tech revealed
					fascinating research projects from the bio-design for aquatic
					propulsion, to the homeostasis of termite mounds, to the biomimetic
					fibers of orb-weaving spiders.
					image: BIOKON - Germany</p>
			</div>
 
<!--FOOTER-->			
			<div class="footer">
			<a href="index.html">home</a>
			|<a href="contact.html">contact</a>
			|<a href="map.html">site map</a>
			|<a href="credit.html">site credits</a>
			<br />
			<h5>| 2005-08 Center for Biologically Inspired Design </h5>
			</div>
 
<!-- end of FOOTER -->	
</div>
</div>
<!-- end MAINCOL -->
<!-- SIDECOL -->
	 		<div id="sidecol" >
					<div> <a href="biomimicry_defined.html"> <img src="img/main/defined.gif" alt="biomimicry defined" 
					width="170px" height="24px" /></a> </div>
			  <div>
					<script type="text/javascript">
					//<![CDATA[
					<!--
					var number_of_images=20
					var speed=2.3
					var step=1
					var whichimage=1
					function slideit(){
					if (!document.images)
					return
					if (document.all)
					slide.filters.blendTrans.apply()
					document.images.slide.src=eval("image"+step+".src")
					if (document.all)
					slide.filters.blendTrans.play()
					whichimage=step
					if (step<number_of_images)
					step++
					else
					step=1
					if (document.all)
					setTimeout("slideit()",speed*1000+1500)
					else
					setTimeout("slideit()",speed*1000)
					}
					function slidelink(){
					if (whichimage)
					window.location="#"
					}
					//-->
					//]]>
					</script>
					<script type="text/javascript">
					//<![CDATA[
					//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, 
					pause (0=no, 1=yes), optionalRandomOrder)
					new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
					new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 //]]>
 
					</script>
					<img src="http://www.joyworthen.com/cbid/gallery/album1/cbid1.jpg" alt="" name="slide" width="80" 
					height="79" id="slide" />
			  </div>
  				<div>
					<img src="img/main/inspire.gif" alt="inspire" width="170" height="24" />	
					<h2>Natural Capitalism</h2>
					<br /><h5>by Paul Hawken <br />&amp; Amory and Hunter Lovins</h5>
					<br />
					<a href="http://www.natcap.org/sitepages/pid5.php">
					<img class="book" src="img/B/B_hawken_natural.jpg" alt="Natural Capitalism" width="81" height="123" /></a>	
					<p>"Hawken (The Ecology of Commerce) and Amory and Hunter Lovins of the Rocky 
					Mountain Institute, an environmental think tank, have put together an ambitious, visionary monster of a 
					book advocating natural capitalism."  From <em>Publishers Weekly </em></p>
				</div>
				<div>
					<img src="img/main/human.gif" alt="human plus nature" width="170" height="24" />
					<p><em>...much of the human search for a coherent and fullfilling existence is intimately
					connected tp our relationship with nature.</em></p><br /><h5>Stephan R. Kellert</h5>
				</div>
					<!-- gatech logo-->
					<div>
					<img class="right" src="img/main/gaTech_.gif" alt="ga tech logo" width="60" height="25"/>
					<p>
					CBID is an interdisciplinary center for research and development of design solutions that 
					occur in biological processes. Founded in 2005, It is one of more than 100 interdisciplinary 
					research units funded at Georgia Institute of Technology</p>
				 	</div>
	</div>
</div>
</body>
</html>

css:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  margin:0; padding:0; } 
 
table { border-collapse:collapse; border-spacing:0; } 
 
fieldset,img {  border:0; } 
 
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } 
 
ul, li  { list-style:none;
 }
 
ol,ul { list-style:none; } 
 
caption,th { text-align:left; } 
 
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } 
 
q:before,q:after { content:''; } 
 
abbr,acronym { border:0; } 
 
a {text-decoration: none;}
 
html { padding: 0; border: 0; margin: 0; }
 
/* 
----------------------------------------------------------------------------- 
BODY
-----------------------------------------------------------------------------*/
 
body { 
border: 0;
margin: 0;
padding: 0;
background-color: #e1e1e1;
font-family: "Lucida Grande", "Helvetica Neue", "Microsoft Sans Serif", helvetica, sans-serif;
text-align: left; } 
 
 
#allpagecontent { 
width: 770px;
max-width: 770px;
height: auto;
margin: 20px auto 0 auto;
text-align: left; }
 
/* 
----------------------------------------------------------------------------- 
HEADER + NAV
-----------------------------------------------------------------------------*/
 
 
 
#header { 
width: 770px;;
height: 125px;
line-height: 10px;
border-top: 14px #d6d6d3 solid;
background:transparent url(../img/main/cbid.head.gif) no-repeat scroll left top;
border-right: 14px #d6d6d3 solid;
background-color: #fff;
vertical-align: top;
overflow: hidden;
}
 
div#header .top {
width : 100%;
float: right;
height : 20px;
padding: 0 5px 0 0;
text-align : right;
} 
 
div#header .left {
width : 180px;
float: left;
height : 30px;
padding: 80px 2px 0px 11px;
text-align : left;
} 
 
#about{ 
width: 70px;
height: 95px;
float: right;
padding: 15px 10px 0px 10px;
text-align: right;
border-right: 1px #cacac3 solid;
 }
 
#resources {
width: 95px;
height: 95px;
float: right;
padding: 15px 10px 0px 10px;
text-align: right;
border-right: 1px #cacac3 solid;
}
 
#research {
width: 182px;
height: 95px;
float: right;
padding: 15px 10px 0px 10px;
text-align: right;
}
 
.footer {
height: 30px;
float: right;
padding: 0px 5px 0px 0px;
text-align: right;
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-size:  10px;
margin: 0px auto 0 auto;
}
 
 
/* 
----------------------------------------------------------------------------- 
PAGE CONTENT
-----------------------------------------------------------------------------*/
 
 
#maincol { 
width: 530px;
height: auto;
padding: 5px 15px 0px 10px;
float: right;
background-color: #fff;
margin: 0 auto 0 auto; }
 
#content {
width: 530px;
height: auto; 
padding: 0px;
margin: 0 auto 0px 10px; }
 
div.float {
float: right;
margin : 5px 0 0 0;
padding : 2px;
 }
 
#maincol div{
width: 530px;
height: auto;
overflow: hidden;
padding: 0px 10px 0px 5px;
margin: 0 0 20px 0}
 
#maincol div.link{
width: 300px;
height: auto;
float: right;
overflow: hidden;
text-align: right;
padding: 4px 10px 5px 5px;
margin: 0 auto 0 0}
 
#maincol div.members{
width: 400px;
height: auto;
float: left;
text-align: left;
margin: 25px 5px 0 10px;}
 
#maincol div.map{
width: 530px;
height: auto;
float: left;
text-align: left;
margin: 0px 5px 0 10px;}
 
 
 
/* ELEMENTS FOR SIDEBAR */
 
#sidecol { 
width: 180px;
height: auto;
background-color: #fff;
text-align:left;
float: left;
 }
 
#sidecol div{ 
width: 180px;
background-color: #fff;
text-align: left;
padding: 10px 10px 5px 10px;
border-bottom: 4px #d6d6d3 solid;
float: left;
 }
 
 
 
/* ------------------------------ 
------
UL and NAV
---------------------------------*/
 
#header nav {
list-style: none;
border: 0;
margin: 0 0 0 0;
}
 
#header ul {
list-style: none;
padding: 0;
margin: 0 0 0 0;
}
 
#header li {
margin: 0;
padding: 0 0 0 0;
}
 
#content ul{
margin: 15px 10px 12px 20px; 
list-style-position: outside;
list-style-type: decimal;
font-size:  11px;
color: #777777;
}
 
#maincol div ul{
margin: 5px 0px 0px 10px; 
list-style-position: outside;
list-style-type: circle;
font-size:  11px;
color: #777777;
}
 
 
/* 
----------------------------------------------------------------------------- 
TYPE + IMAGE + LINK
-----------------------------------------------------------------------------*/
 
 
div#header a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align: right;
font-size:  11.5px;
color: #777777;}
 
div#header a:hover{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-size:  11.5px;
 
color: #444444;}
 
p {
color:#777777;
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display:inline;
line-height: 12px;
text-align: left; }
 
h1 { 
color: #777777;
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
 
font-size: 18px;
display: inline;
line-height: 22px;
font-weight:bold;
}
 
h2 { 
color: #999999;
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
display: inline;
line-height: 12px;
margin-bottom: 4px;}
 
h3 {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
line-height: 1em;
display: inline;
font-size: 13px;
letter-spacing: -0.25px;
color: #22729f}
 
h4 {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size:  10px;
color:#cc0000;}
 
h5 {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #7e7e7e}
 
h6 {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
font-size: 9.75px;
display: inline;
letter-spacing: -0.25px;
color: #5E634D;
text-align: left;}
 
div#header div.left {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #7e7e7e}
 
img.left { 
float: left;
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#898375;
border: #fff 0px solid;
margin:0px 0px 0px 0px;
padding: 5px 3px 3px 0px; 
}
 
.footer a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align: right;
font-size: 10px;
color: #777777;}
 
.footer a:hover{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-size:  10px;
 
color: #cc0000;}
 
.footer a:active{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
text-align:right;
font-size:  10px;
 
color: #cc0000;}
 
div#maincol div.members div a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #22729f}
 
div#content a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #22729f}
 
div#maincol div a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #22729f}
 
#maincol div.map a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
text-decoration: underline;
font-size: 10px;
color: #cc0000}
 
#maincol div.map a:hover{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #cc0000}
 
div#header.top a{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #cc0000}
 
div#header.top a:hover{
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
display: inline;
font-size: 10px;
color: #cc0000}
 
img.right {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
float: right;
font-size:11px;
color:#898375;
margin: 0px 10px 5px 5px;
padding: 0;}
 
img.nav {
font-family:'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
float: right;
font-size:11px;
color:#898375;
padding: 0;}
 
 
#sidecol img.book { 
float: left;
font-size:11px;
color:#898375;
display: inline;
margin: 7px 4px 4px 0px;
}

gomezyen
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2008-07-27
Posts: 3
Points: 0

regarding site:

regarding site: www.cbid.gatech.edu

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's the line-height: 10px

It's the line-height: 10px on #header which is causing the problem. If you want to tighten up the space, look at the margins on the list items instead.

And please remember to use code tags when posting code to the forum.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gomezyen
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2008-07-27
Posts: 3
Points: 0

solved

gotcha, and thanks for your help! i'll remember to use code tags next time. great site and hope you enjoyed mine.

lenard
www.cbid.gatech.edu