HELP! Css Positioning issues with IE and Firefox.

Discussion in 'HTML & Website Design' started by voodazz, Oct 6, 2009.

0
  1. #1
    Hey, I'm brand new here 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:
    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]


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

    [​IMG]


    <!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 leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">




<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>
    Code (markup):

    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;
	
}
    Code (markup):

    It's probably something simple I'm missing and I need someone to help me out please!
     
    voodazz, Oct 6, 2009 IP
  2. Jj delc

    Jj delc Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I haven't looked ate your code, but my recommendation is to do trial and error. To do this keep a separate stylesheet for IE and toy around there using the conditional comment tag.

    Remember that the box model is totally different on IE and starnrad browsers, so you might want to play with positioning and margins/paddings on that IE6 .css file
     
    Jj delc, Oct 6, 2009 IP
  3. calviin

    calviin Peon

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Change your CSS

    portfolio3.css
    Line 93

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


    }

    Change to

    .slideShowContainer{
    float: right;
    width: 770px;
    margin: 0px;
    position: relative;
    padding: 0;
    }
     
    calviin, Oct 6, 2009 IP
  4. voodazz

    voodazz Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    I changed the css, but it actually pushed the gallery even further to the right and it shifted in ff as well.

    I made a separate stylesheet for IE only, but for some reason my conditional comment tags aren't be read... bleh.

    Surely there must be a way to solve this without going the conditional comment route?

    :confused:
     
    voodazz, Oct 6, 2009 IP
  5. voodazz

    voodazz Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    Okay, I got the conditional comments to work and created a separate stylesheet and it works just fine!

    However, I still think there is a way to do this without doing this. Yes my site is working in IE and FF now, but now it's a professional curiosity on whether or not it's possible to do.

    Thanks a lot for the help!
     
    voodazz, Oct 6, 2009 IP