weird navigation spacing in IE

[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:

Code:

• Home
• Portfolio
• Clients
• Contact

Client Experience

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.

Portfolio

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.

Socializing

All work and no play makes Production 6 a dull brand. come talk to us on all your favorite social networks.

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 (DJDocRok, Ratty Records, MonoSolo Productions, etc).

Please contact us and tell us how we may fill your media needs. Your needs will become our obsession.

News and Links

DJDocRok 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:


DJDocRok – Take it to the Streets

…………………….

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 link to the video and the website:
Poptent Promo video entry

Copyright © David Perez, Production 6 2009

CSS

Code:

@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;
}

[Rob MacKay]

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

[Author]

Posts