Forums

Ryqiem

Can someone tell me, why the nav at
http://demo.frac.dk behaves wierd in IE? And why does the "sidebar" float right?
The Css code =

/* reset styles */
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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style-type: square;
	text-align: center;
	font-size: 1.107em;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: \"\";
}
blockquote, q {
	quotes: \"\" \"\";
}
/* end of reset styles */

body {
	margin:0px; padding:0px;
	background-color: #EAEAEA;
	background-image: url(\"images/bg.jpg\");
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
	line-height:19px;
	background-repeat: repeat-x;
}

#wrapper {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-position: center;
	width: 790px;
	text-align: left;
}

ul.navlist li h2 a, ul.navlist li h2 a.blue:link, ul.navlist li h2 a.blue:visited, ul.navlist li h2 a.blue:active, ul.navlist li h2 a.blue:hover {
   color:#fff;
   border-bottom:5px solid #cecece;
}
ul.navlist {
   margin:0px;
   padding:0px;
   list-style-type:none;
   position:relative;
   display:block;
}
ul.navlist li {
   display:block;
   float:left;
   margin:0px;
   padding:0px;
}
ul.navlist li h2 a {
   display:block;
   float:left;
   padding-left:2px;
   background-color:#999;
   text-decoration:none;
   border-left:1px solid #cecece;
   width:92px;
   height:25px;
}

ul a, a:visited, a:active{
	margin-right: 1em;
	margin-top: 110px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 17px;
	padding-top: 17px;
	display: inline;
	text-decoration: none;
	font-family: \"Tahoma\", Lucida, Verdana, sans-serif;
	color: #EAEAEA;
	text-align: left;
	float: left;
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 1.8em;
	border-style: hidden;
	border-width: 1px;
	position: relative;
	
}

ul li a:hover {
	background: #EAEAEA;
	color: black;
	display: inline;
}

ul #active {
background: transparent url(images/current.png) no-repeat scroll center bottom;
	padding-bottom: 30px;
	display: inline;
}

#logo {
	width: 200px;
	height: 20px;
	position: absolute;
	display: inline;
	z-index: 3;
}

h1 {
	background-image: url(images/content-header.png);
	background-repeat: no-repeat;
	padding: 15px;
	padding-top: 13px;
	font-size: 1.3em;
	color: #EAEAEA;
}

#icon1 {
	padding-left: 120px;
	margin-top: -23px;
	position: absolute;
}

#icon2 {
	padding-left: 160px;
	margin-top: -22px;
	position: absolute;
}

#icon3 {
	padding-left: 110px;
	margin-top: -37px;
	position: absolute;
}

#content-wrap {
	padding-top: 190px;
	font-size: 1.18em;
	
}

#content-wrap p {
}


#content1 {
	display: block;
	width: 230px;
	float: left;
	padding: 10px;
	padding-top: 5px;

}

#content2 {
	display: block;
	width: 230px;
	float: left;
	padding: 10px;
	padding-top: 5px;
}

#content3 {
	display: block;
	width: 230px;
	float: left;
	padding: 10px;
	padding-top: 5px;
}

and the html

<!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=UTF-8\" />  
	<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"screen\" title=\"no title\" charset=\"utf-8\">
	<title>Simple website</title>
</head>  


<body>
		
		<div id= \"wrapper\">
			
			<div id=\"logo\">
				<img src=\"images/header.jpg\" alt=\"Header\">
			</div>
		<div id=\"nav-wrap\">
			<ul class=\"nav\">
			        <li><h2><a class=\"current-page-blue\">Home</a></h2></li>
			        <li><h2><a class=\"blue\" href=\"archive-index\">Archives</a></h2></li>
			        <li><h2><a class=\"blue\" href=\"photos\">Photos</a></h2></li>
			        <li><h2><a class=\"blue\" href=\"about\">About</a></h2></li>
			        <li><h2><a class=\"blue\" href=\"the-list\">The List</a></h2></li>
			</ul>
		</div> <!-- end of nav wrap -->
		
		<div id=\"content-wrap\">
				<div id= \"content1\">
				<h1>Who are we? <div id=\"icon1\"> <img src=\"images/icon_1.png\" alt=\"icon\"> </div></h1> 
				<p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam.</p>
				</div>

				
			
				<div id= \"content2\">
				<h1>What can we offer? <div id= \"icon2\"><img src=\"images/icon_2.png\" width=\"24\" height=\"24\" alt=\"Icon 2\"></div></h1>
				<p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam. </p>
				
				</div> <!--Finishing content2-->
			
				<div id= \"content3\">
				<h1>Contact us</h1> <div id= \"icon3\"><img src=\"images/icon3.png\" width=\"24\" height=\"24\" alt=\"Icon3\"></div>
				<p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed est. Vivamus erat dolor, dapibus volutpat, lobortis ut, sollicitudin in, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel mi. Suspendisse non felis id diam lobortis gravida. Proin porttitor sapien vitae augue. Nulla at arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu massa. Maecenas nec sapien id magna porttitor ultricies. In nec neque. Nam sem. Vivamus elit enim, ultrices in, sollicitudin eu, sodales a, erat. Aenean auctor eros posuere purus. Maecenas augue ligula, sagittis in, lacinia eu, imperdiet ut, nisl. Aenean vel quam. </p>

				</div> <!--Finishing content3-->
			</div> <!--Finishing content-wrap-->
		</div> <!--Finishing wrapper-->

</body>

cybershot

well i don't see any code telling your nav to display inline. So that could be the start of your problems.

Spunkmeyer

I would download the firebug addon for FF and look at each of your elements in detail. It will show you exactly how everything is positioned as well as showing you which elements are cascaded throughout the body of the document (so you don't re-use stuff). Take a look at that and see what everything does.http://getfirebug.com/

The following is my Nav code and CSS. It might help you out.
HTML:


<ul class=\"navlist\">
        <li> <h2><a class=\"current-page-blue\">Home</a></h2></li>
        <li><h2><a class=\"blue\" href=\"archive-index\">Archives</a></h2></li>
        <li><h2><a class=\"blue\" href=\"photos\">Photos</a></h2></li>
        <li><h2><a class=\"blue\" href=\"about\">About</a></h2></li>
        <li><h2><a class=\"blue\" href=\"the-list\">The List</a></h2></li>
</ul>

CSS:


ul.navlist li h2 a, ul.navlist li h2 a.blue:link, ul.navlist li h2 a.blue:visited, ul.navlist li h2 a.blue:active, ul.navlist li h2 a.blue:hover { 
	color:#fff;
	border-bottom:5px solid #cecece;
}
ul.navlist {
	margin:0px;
	padding:0px;
	list-style-type:none;
	position:relative;
	display:block;
}
ul.navlist li {
	display:block;
	float:left;
	margin:0px;
	padding:0px;
}
ul.navlist li h2 a {
	display:block;
	float:left;
	padding-left:2px;
	background-color:#999;
	text-decoration:none;
	border-left:1px solid #cecece;
	width:92px;
	height:25px;
}

You can see it in action at http://www.thedailyspunkmeyer.com

Ryqiem

It worked, thank you!
But i still need help about the content though.

treehouse : what would you like to learn today?

Forums

Nav and content behaves wierd in IE