HELP! Css positioning problems with IE and Firefox (again)

[voodazz]

Hey, I’m brand new to css-tricks so I’ll hit the ground running with an age old problem:
position issues with IE and ff, just like the title says.

Here’s the site: http://www.voodazz.com/front.html

I have a rotating gallery using jquery’s innerfade plug in and it works fine in FF. It’s exactly where it needs to be:

[img]http://i406.photobucket.com/albums/pp145/voodazz/firefox.jpg[/img]

but you guessed it, it’s slammed all the way to the right side in IE as you can see here:

[img]http://i406.photobucket.com/albums/pp145/voodazz/explorer.jpg[/img]

I’m not quite sure what to do and it’s starting to get really annoying.
Here is the html:

Code:

• Home
• Design
• Animation
• Illustration
• Contact
• Resumé

• 
• 
• 
• 

Who the heck am I??

My name is Vincent Radford and I am the sole owner of the Knoxville based Voodazz Studios with almost 10 years experience in interactive and visual design.
I cater to the budgets of most small businesses because not everyone can afford the rates of larger design firms

What am I about?

My primary goal is to give the client the best possible product that meets and exceeds their needs whether it’s a custom illustration for a sports team or giving someone a presence in the virtual world, I help them produce the best solution that would create an inexpensive unique and effective product rather than a pricey ineffective headache.

How am I different?

I’m motivated by quality and customer satisfaction rather than money.
Getting paid for my services is a good thing, don’t get me wrong, but it is not and should not the sole motivating factor in doing business.
Establishing trust and presenting a client with something we’re BOTH happy with is much more important to me.

Here’s the CSS:

Code:

@charset “UTF-8”;
/* CSS Document */

body {
background-image: url(IMAGES/bg.gif);
margin: 0;
font-family: Arial,Helvetica,Verdana, San-serif;
font-size: 12px;
color: #999;
background-color: #333;

}

h5{
font-size: 22px;
margin: 0px;
color: #FF6600;

font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
text-transform: uppercase;
padding: 0 0 0 10px;
}

h3{
font-size: 21px;
background-color: #d66d10;
color: #FFFFFF;
width: 200px;
font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
text-transform: uppercase;
padding: 0 0 0 10px;

}

h2{
font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
font-size: 15px;
margin: 5px 0 0 0px;
color: #b83917;

}

.headerImage{
background-image: url(IMAGES/design_header.jpg);
width: 1200px;
background-repeat: no-repeat;
height: 90px;
margin: 0;
position: relative;
}

.moveLogo{
position: absolute;
top: 12px;
left: 50px;
margin: 0 0 0 40px;
}

.frontContainer{
background-image: url(IMAGES/frontpage_bg.jpg);
width: 1200px;
background-repeat: repeat-x;
padding-bottom: 20px;
height: 326px;
position: relative;

}

/*ul#frontSlideShow li img{
float: right;
width: 770px;

}

*/
.slideShowContainer{
width: 770px;
margin: 0px;
position: relative;
padding: 0;
left: 175px;

}
ul#frontSlideShow {
list-style-type: none;
background: transparent none repeat scroll 0 0;
display: block;
height: 326px;

}

ul#frontSlideShow img{
position: absolute;
left: 0;
top: 0;

}

.moveLogo2{
position: absolute;
top: 40px;
left: 50px;
margin: 0 0 0 45px;

}

.textContainer{
}

.textBox{
float: left;
width: 300px;
margin: 0 15px 0 50px;
color: #333333;
font-size: 14px;
line-height: 16px;
}

.textBox p {
padding-bottom: 10px;

}

.shadowWrapper{
background-image: url(IMAGES/shadowbg.gif);
background-position: center top;
background-repeat: repeat-y;
margin: 0 auto;

width: 1250px;

}

.pageWrapper {
margin: 0px 0 0 0;
background-color: #eeeeee;
background-image: url(IMAGES/pagewrap_bg.jpg);
background-repeat: repeat-y;

width: 1200px;
z-index: 2;
}

.contentWrapper{
background: transparent;
z-index: 500;
margin: 50px 0 0 50px;
width: 980px;

}

.thumbNails{
width: 215px;
float: left;
margin: 0 30px 0 0;
padding: 0 0 10px 0;
}

.thumbNails p{
margin: 5px 0 5px 0px;
font-size: 14px;
color: #333333;

}

.clearBoth {
clear: both;

}

.cornerLink ul {
background-color: #2e343d;
text-transform: uppercase;
font-size: 16px;
margin: 0 0px 0 0px;
padding: 10px 10px 10px 0px;
text-align: right;

}

.cornerLink li {
display: inline;
list-style-type: none;

}

.cornerLink a {
padding: 0 20px 0 0;

}

.cornerLink a:visited {
color: #FFFFFF;
text-decoration: none;

}

.cornerLink p {
margin: 0;
padding: 0;

font-size: 14px;

}

.cornerLinka:link, .cornerLink a:visited {
color: #ffffff;
text-decoration: none;

}

.cornerLink a:hover {
color: #cc3300;
text-decoration: underline;

}

.shadowFooter{
background-image: url(IMAGES/footershadow.gif);
background-repeat: repeat-x;

background-position: bottom;
width: 1250px;

}

.footer {
clear: both;

text-align: center;
background-image: url(IMAGES/newfooter.jpg);
background-repeat: no-repeat;
font-size: 10px;
color: #fff;
padding: 55px 0px 0px 0px;
width: 1200px;
margin: 0px;

}

It’s like the ul#frontSlideShow is completely disregarding the containing div (slideShowContainer). :cry:
It’s probably something reeeeally simple I’m missing (hopefully), but I’m not seeing it.
Some help would be GREATLY appreciated! Thanks.

[cybershot]

try throwing this into your css. At the very top of your css.

* {margin: 0; padding: 0; }

[Author]

Posts