Forums

Production6

Hello all, I am new to CSS and haven't used HTML in 10 years so my question may be a little stupid. Basically, my navigation bar works perfectly in Firefox, however when I go to the site in IE the navigation bar is... stairing down? cascading down? I'm sure it's just a matter of a line of code or an added tag.

http://www.production6.com/testSite2.html

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\" xml:lang=\"en\" lang=\"en\">

<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>

	<!--CSS DOC-->
	<link rel=\"stylesheet\" href=\"css/stylesheet2.css\" type=\"text/css\" media=\"screen\" charset=\"utf-8\" />
   	<!--CSS DOC-->

    <!--JAVA SCRIPT BEGINS-->
<!--[if lt IE 7]>
        <script type=\"text/javascript\" src=\"Scripts/unitpngfix.js\"></script>
<![endif]--> 
<!--<script src=\"Scripts/swfobject_modified.js\" type=\"text/javascript\"></script>-->

<script src=\"Scripts/swfobject_modified.js\" type=\"text/javascript\"></script>
	<script src=\"Scripts/jquery-1.3.2.js\" type=\"text/javascript\"></script>
<!--	<script type=\"text/javascript\" src=\"Scripts/jquery-1.2.6.js\"></script>-->
	<script type=\"text/javascript\" src=\"Scripts/startstop-slider.js\"></script>
   <script src=\"Scripts/jquery.corners.js\" type=\"text/javascript\"></script>

<script type=\"text/javascript\">$(document).ready(function(){$(\".rounded\").corners(\"10px\");});</script>
	<!--JAVA SCRIPTS END-->
<meta name=\"AUTHOR\" CONTENT=\"Production 6\">
<meta name=\"CONTACT\" CONTENT=\"david@production6.com\">
<meta name=\"COPYRIGHT\" CONTENT=\"Production 6 media inc.\">
<meta name=\"DESCRIPTION\" CONTENT=\"Descripton for your site goes here.\">
<meta name=\"KEYWORDS\" CONTENT=\"production 6, David, perez, Veed, six, Video, movies, film, videographer, graphic, designer, design, designs, graphics, Videography, DC, Washington, District of Columbia\">
<title>Production 6 &#9734; Visual Effects/Video Production/Graphic Design</title>
    
    
</head>

<body>
<div id=\"header\">
<b><ul id=\"nav\">
<li><a id=\"homeLink\" href=\"#\">Home</a></li>
<li><a id=\"videoLink\" href=\"#\">Portfolio</a></li>
<li><a id=\"clientsLink\" href=\"#\">Clients</a></li>
<li><a id=\"contactLink\" href=\"#\">Contact</a></li>
</ul></b>
</div> <!--HEADER DIV END//-->

<div id=\"content\" class=\"rounded\">
<!--**************START OF FEATURED CONTENT WIDGET**************-->
	   <div id=\"slider\" class=\"rounded\">

			<div id=\"mover\">
		
				<div id=\"slide-1\" class=\"slide\">
				
					<h1>Client Experience</h1>
					
					<p>When you're a client with Production 6 we take your business serious.  Come see why your client experience won't be like any other.</p>
					
					<a href=\"#\"><img src=\"/images2/slide-2-image.png\" alt=\"learn more\" /></a>

					
				</div>
				
				<div class=\"slide\">
				
					<h1>Portfolio</h1>
					
					<p>There are a wide range of styles and clients, see some of our proudest work in our portfolio and understand why our production studio is the best choice.  </p>
					
					<a href=\"#\"><img src=\"/images2/slide-2-image.png\" alt=\"learn more\" /></a>
					
				</div>
				
				<div class=\"slide\">
				
					<h1>Socializing</h1>

		      <p>All work and no play makes Production 6 a dull brand.  come talk to us on all your favorite social networks.</p>
					
					<a href=\"#\"><img src=\"/images2/slide-2-image.png\" alt=\"learn more\" /></a>
					
				</div>
			
			</div>
		
		</div>
    
<!--**************END OF FEATURED CONTENT WINDOW**************-->

<div id=\"content_main\"><!--***CONTNET_MAIN STARTS***-->
<p><img src=\"/images2/P6Title.jpg\" /></p>
<p>Production 6 is a full service media production company that specializes in video production and motion graphics but extends to other media such as visual effects, graphic design and web design.  We have a wide range of clients from corporate and political (Red Bull, Leukemia and Lymphoma Society, Marsh Copsey and Associates, Current TV, etc.), to local companies and artists (DJ<b>Doc</b>Rok, Ratty Records, MonoSolo Productions, etc).  </p><br />

<p>Please <a href=\"contact.html\">contact us</a> and tell us how we may fill your media needs.  Your needs will become our obsession.</p>
</div><!--***CONTENT_MAIN ENDS***-->

<div id=\"content_sub\" class=\"rounded\"><!--***CONTENT_SUB BEGINS***-->
          <p><h1 id=\"sub_header\"><center>News and Links</center></h1></p>
          <p>
          DJ<b>Doc</b>Rok is a local DJ doing big things for DC. Here'sa link to his newest video which Production 6 was proud to be a part of:
          <br />  
          <a href=\"TITTS.html\" target=_blank>DJ<b>Doc</b>Rok - Take it to the Streets</a></p>
    <p class=\"divider\"><b>.........................</p></b>
          <p>
          Production 6 submited an entry for the Poptent Promo video.  We're very happy with the final product so it's been added to our reel.  here's a <a href=\"http://www.poptent.net/media/10163\" target=\"_blank\">link</a> to the video and the website:<br />
         <a href=\"http://www.poptent.net/media/10163\" target=\"_blank\">Poptent Promo video entry</a></p>
          
  </div><!--***CONTENT_SUB ENDS***-->
<div class=\"clearFloat\"></div>
</div><!--CONTENT DIV END//-->
<div id=\"footer\">

<p id=\"copyright\">Copyright &copy; David Perez, Production 6 2009</p>
</div><!--END FOOTER DIV//-->
</body>
</html>

CSS

@charset \"utf-8\";
/* CSS Document */

@charset \"utf-8\";
/* CSS Document */

html{height:100%;}

body
{
	margin:0 auto;
	padding:0;
	text-align:center;
	height:100%;
	font-family:\"Century Gothic\", Verdana, Geneva, sans-serif;
	font-size:14px;
	background:#000 url(/images2/stencilLogo.png) no-repeat center fixed;
}

h1
{color:#FFF;}

p
{color:#FFF; text-align:left;}

a:link {color: #f9fb6a; text-decoration: underline;}
a:visited {color: #f9fb6a; text-decoration: underline;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

div#header
{
	position:relative;
	z-index:300;
	margin:0 0 -60px 0;
/*	padding:-25px 0 0 0;*/
	float:left;
	width:100%;
	height:38px;
	background:transparent /*url(/images2/HeaderBG2.png) no-repeat top center;*/
}

#logo
{
	Margin:0 auto;
	position:relative;
	bottom:5px;
	right:50px;
}

ul#nav
{
	position:relative;
	margin:0 auto;
/*	bottom:80px;*/
	left:15px;
	text-align:center;
	width:580px;
	height:35px;
	list-style:none;
}

ul#nav li a
{
	float:left;
	padding:0;
	font-size:20px;
	margin:0;
	text-align:center;
	line-height:95px;
	display:block;
	text-decoration:none;
	font-weight:bold;
	width:110px;
	height:135px;
	color:#FFF;
	text-shadow:#000;
}

ul#nav li a:hover
{
	color:#f9fb6a;
/*	background:transparent url(/images2/homeSplat.png) no-repeat top center;*/
}

a#homeLink:hover
{
	color:#f9fb6a;
	background: url(/images2/homeSplat.png) no-repeat bottom center;
}

a#videoLink:hover
{
	color:#f9fb6a;
	background: url(/images2/videoSplat.png) no-repeat top center;
}

a#clientsLink:hover
{
	color:#f9fb6a;
	background: url(/images2/graphicsSplat.png) no-repeat bottom center;
}

a#contactLink:hover
{
	color:#f9fb6a;
	background: url(/images2/contactSplat.png) no-repeat top center;
}

div.clearFloat
{
	clear:both;
}

div#content
{
	position:relative;
	margin:0 auto;
	width:850px;
	clear:left;
	min-height: 100%;
	padding:35px 20px;
	/*	z-index:1000;*/
	background:transparent url(/images2/shadowBG.png) repeat center top;
}

div#content_main
{
	padding:15px 0px;
	float:left;
	width:610px;
}

div#content_sub
{
	float:right;
	width:195px;
	margin:0px;
	padding:15px 15px;
	color:#FFF;
	background:transparent url(/images2/sidePanel.png) repeat top center;
}

h1#sub_header
{
	color:#f9fb6a;
	position:relative;
	bottom:10px;
}

p.divider
{
	text-align:center;
}

/*************FEATURED CONTENT WINDOW*************/
*								{ margin: 0; padding: 0; }
a								{ text-decoration: none; outline: none; }
a img							{ border: none; }

#page-wrap						{ background: white; width: 850px; margin: 0 auto; 
								  padding: 50px 0; }
								  
h2								{ font-size: 36px; text-align: center; 
								  font-weight: normal; }

#slider							{ background: transparent url(/images2/slider-bg.png); height: 227px; overflow: hidden;
								  position: relative; margin: 50px 0; }
								  
                                /* DEFAULT is for three panels in width, adjust as needed
                                   This only matters if JS is OFF, otherwise JS sets this. */								  
#mover							{ width: 2550px; position: relative; }

.slide							{ padding: 40px 30px; width: 900px; float: left; position: relative; text-align:left;}
.slide h1						{ font-size: 30px; letter-spacing: -1px;
								  color: #f9fb6a; }
.slide p						{ color: #FFF; font-size: 12px; line-height: 22px; width: 300px; }
.slide img						{ position: absolute; top: 20px; left: 400px; }
#slider-stopper					{ position: absolute; top: 1px; right: 20px; background: #000; color: #FFFFFF;
								  padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
/*************FEATURED CONTENT WINDOW*************/

div#footer
{
	margin:-25px 0 0 0;
	float:left;
	clear:left;
	width:100%;
	height:50px;
	z-index:1000;
	position:relative;
	background:transparent;
}

p#copyright
{
	color:#fff;
	text-align:center;
	padding-top:25px;
	font-size:11px;
	font-weight:bold;
}

apostrophe

I don't have access to IE right now but I think this should fix it:

ul#nav li {
 display: inline;
}

Robskiwarrior

you might also have to add a float:left - ie is a little mental like that

apostrophe

"Robskiwarrior" said:
you might also have to add a float:left - ie is a little mental like that

Oops :oops: . Nice catch!

treehouse : what would you like to learn today?

Forums

weird navigation spacing in IE