Forums

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:

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

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

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

I'm not quite sure what to do and it's starting to get really annoying.
Here is the 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\">

<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Untitled Document</title>
<link href=\"portfolio3.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\">



<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.innerfade.js\"></script>

<script type=\"text/javascript\">
  $(document).ready(
				function(){
					
					$('ul#frontSlideShow').innerfade({
						speed: 1000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '326px'
					});
					

			});
  	</script>

  	

<!-- png fix -->
<!--[if gte IE 5.5000]>
<script type=\"text/javascript\" src=\"pngfix.js\"></script>
<![endif]-->

   
  <!--[if IE]>     <link rel=\"stylesheet\" type=\"text/css\" href=\"myiehacks.css\" />   
  <![endif]-->   <!--[if lte IE 6]>     
  <script type=\"text/javascript\" src=\"myiescripts.js\"></script>   
  <![endif]-->   <!--[if lt IE 6]>     
  <link rel=\"stylesheet\" type=\"text/css\" href=\"myiehacks-5.5.css\" />   
  <![endif]--> 


</head>

<body>




<div align=\"center\">
   <div class=\"shadowWrapper\">

   
    <div class=\"pageWrapper\">
    
    <div class=\"headerImage\">
    	<a href=\"index.html\"><img src=\"IMAGES/VLOGO.png\" border=\"0\" alt=\"Voodazz studios\" class=\"moveLogo\" /></a>
    
    </div>	
     
        
         <div class=\"cornerLink\">
    <ul>
    	<li><a href=\"\">Home</a>
        <li><a href=\"\">Design</a>

        <li><a href=\"\">Animation</a>
        <li><a href=\"\">Illustration</a>
        <li><a href=\"\">Contact</a>
        <li><a href=\"\">Resumé</a>	
        
    
    </ul>
 		</div> 
        
        
        
    	<div class=\"contentWrapper\">
        	
        	
            
          <div class=\"clearBoth\"></div>

             
           <!--Content Wrapper-->
        </div>
    
    	<div class=\"frontContainer\">            
        	<img src=\"IMAGES/front_blurb.png\" alt=\"Front page blurb\" class=\"moveLogo2\" />
            
            	
            <div class=\"slideShowContainer\">    
              
                <ul id=\"frontSlideShow\">
                	<li> <img src=\"IMAGES/design.png\" /></li>                    
                    <li> <img src=\"IMAGES/illus.png\" /> </li>                   
                    <li> <img src=\"IMAGES/amine.png\" /></li>

                    <li> <img src=\"IMAGES/misc.png\" /></li>
                </ul>  
            </div>    
      </div>        
                
        
        
        
        
<div class=\"textBox\">
        	<h5>Who the heck am I??</h5>
            <p> 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</p>
        
        
        </div>

        
        
        
          <div class=\"textBox\">
        	<h5>What am I about?</h5>
            <p> 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.</p>
        
        
        </div>
        
        
        
        
          <div class=\"textBox\">
        	<h5>How am I different?</h5>
            <p>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.</p>

        
        
        </div>
        
        <div class=\"clearBoth\"></div>
        
        
    
   
    <!--Page Wrapper-->
    </div>
 		
        
       
        <div class=\"footer\">
          </div>
    
        
    <!--Shadow Wrapper-->
    </div>

		<!-- Footer -->
        
 


<!--Align-->
</div>

</body>
</html>

Here's the CSS:

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

treehouse : what would you like to learn today?

Forums

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