Forums

nchipping

Hi,

I'm having some great issues with working on IE with the site I'm currently doing. It works great in Firefox, Opera, Safari, etc., but just not IE. The website is http://www.linearstars.com

Here's a screenshot of what is looks like in Firefox:

http://www.linearstars.com/images/Picture%201.png

Here's IE:

http://www.linearstars.com/images/Picture%202.png

Anyway, I'm not sure how to change this and make it work - the whole site is funky is places that work on the other browsers. If the images aren't showing properly, follow the links to them to see the full images.

Here is the HTML for the home page:

<!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\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Linearstars - Home</title>
<link href=\"stylesheets/main-style.css\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"Scripts/swfobject_modified.js\" type=\"text/javascript\"></script>
</head>
<body>
<div id=\"shadow\">
<div id=\"container\">
	<div id=\"header\">
    	<img style=\"float:left\" src=\"images/left-gray.gif\" alt=\"\"  />
        <img class=\"header\" src=\"images/linearstars-header.gif\" alt=\"Introducing the most innovative and customizable linear lighting solutions for cabinet, furniture and display lighting.\" title=\"linearstars\" />
    </div>
    <div id=\"nav\">
    <ul>
    	<li class=\"home\"><a href=\"http://www.linearstars.com/\"><img src=\"images/nav/home-white.gif\" alt=\"home\" title=\"home\" /></a></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/products\" title=\"products\">products</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/pictures\" title=\"pictures\">pictures</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/pricing\" title=\"pricing\">pricing</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/customization\" title=\"customization\">customization</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"last\"><a href=\"http://www.linearstars.com/contact\" title=\"contact us\">contact us</a></li>
    </ul>
    </div><!--END OF NAVIGATION-->
    <div class=\"clear\"></div>
    <div id=\"content\">
    <ul>
    	<li><b>Why Linearstars LED fixtures?</b></li><br />
        	
            	<li>+ Long-lasting:  50,000 hour life.  Or, simply put,<br />&nbsp;&nbsp; 
  four hours of light per day for 34 years.</li><br />

				<li>+ Energy-efficient: 10 to 20 times more energy  <br />&nbsp;&nbsp;
  efficient than halogen or xenon.</li><br />

				<li>+ Highly customizable:  choose from 4 different<br />&nbsp;&nbsp; body 
  styles for specific applications, 18<br />&nbsp;&nbsp; different lengths, 
  numerous light-output colors, <br />&nbsp;&nbsp; fixture-body colors, 
  and more,<br />&nbsp;&nbsp; most for no charge.</li><br />

				<li>+ 5 year Manufacturer’s Warranty:  One 	of the<br />&nbsp;&nbsp;  best  
  warranties in the lighting industry.  Rest<br />&nbsp;&nbsp;  assured 
  that we stand behind our product,<br />&nbsp;&nbsp;  so you can, too.</li><br />

				<li>+ Learn more</li>
                <ul>
                	<li>- benefits</li>
     				<li>- products</li>
     				<li>- pictures</li>
				    <li>- customization</li>
     				<li>- sizing & pricing</li><br />
				</ul>
				<li><a href=\"http://www.linearstars.com/contact\">+  Become a Dealer</a></li>
			
	</ul>
    <br />
    <br />
    </div><!--END OF CONTENT-->
    <div id=\"gallery\">
      <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"500\" height=\"400\" id=\"FlashID\" title=\"Linearstars Slideshow\">
        <param name=\"movie\" value=\"slideshow/slideshow1.swf\" />
        <param name=\"quality\" value=\"high\" />
        <param name=\"wmode\" value=\"opaque\" />
        <param name=\"swfversion\" value=\"9.0.45.0\" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
        <param name=\"base\" value=\".\" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type=\"application/x-shockwave-flash\" data=\"slideshow/slideshow1.swf\" width=\"500\" height=\"400\">
          <!--<![endif]-->
          <param name=\"quality\" value=\"high\" />
          <param name=\"wmode\" value=\"opaque\" />
          <param name=\"swfversion\" value=\"9.0.45.0\" />
          <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
          <param name=\"base\" value=\".\" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href=\"http://www.adobe.com/go/getflashplayer\"><img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div><!--END OF GALLERY-->
    <br  />
    <br />
    <br />
    <div class=\"clear\"></div>
  
    	
    
</div><!--THIS IS THE END OF THE CONTAINER, AND THUS THE END OF THIS PAGE-->
                            <div id=\"footer-shadow\"><!--THIS IS WHERE I NEED TO FIX THE SHADOW AND HOW IT WORKS in INTERNET EXPLORER!!!-->
                            <img src=\"images/shadow_bottom.gif\" alt=\"shadow\" />
                            </div>
                            <div id=\"container\">
                              <div id=\"footer\">
							    <img src=\"images/bottom_bar.gif\" alt=\"footer\" />
							</div>    
                            </div>
 
</div><!--THIS IS THE END OF SHAOW, AND THE WHOLE PAGE-->
<script type=\"text/javascript\">
<!--
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
//-->
</script>
<script type=\"text/javascript\">
var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
</script>
<script type=\"text/javascript\">
try {
var pageTracker = _gat._getTracker(\"UA-9153413-1\");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

And the CSS for the homepage:

font {	font:Arial, Helvetica, sans-serif; font-weight:400;}
body {background:#FFF;}
img {text-decoration:none; border:none;}


#shadow {background: url(../images/shadow_sides.gif); width:1075px; background-repeat:repeat-y; margin:0 auto;}
#container {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; }
#nav {float:right; margin:-16px 50px 0px 10px;}
	#nav ul {list-style:none; display:block; }
	#nav ul li {float: left; list-style:none; display:block; text-align:center;}
		#nav ul li a {text-decoration: none; color:#333;}
		#nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
		#nav ul li a:visited {text-decoration:none; color:#333;}
		
/*home*/#content {font-family: Arial, Helvetica, sans-serif;font-size: 11px; margin: -25px 0px 5px 100px; float:left; width:280px; padding:10px;}
	#content ul li {list-style:none}
	#content ul li a {text-decoration:none; color:#333;}
		#content ul li a:hover {text-decoration:underline; color:#999;}
		#content ul li a:visited {text-decoration:none; color:#333;}
	
/*products*/#content2 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
				
	#lights {float:left; list-style:none; display:block; margin:-56px 0px 0px -56px;}
		#uc1 {float: left;list-style:none; display:block;}
			#uc1-current {
				float:left; width: 268px; margin:-8px 5px 0px 5px; padding: 15px 0px 10px 0px;
				list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
				text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px;
				background:#FFF;
				}
		
		#uc2 {float: left;list-style:none;display:block; margin:0px 5px;}
			#uc2-current {
				float:left; width: 268px; margin:-8px 5px 0px 5px; padding:15px 0px 10px 0px;
				list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
				text-align:center;font-family:Arial, Helvetica, sans-serif; font-size:14px;
				background:#FFF;
				}
			
		#ic {float: left;list-style:none; display:block; margin:0px 5px;}
			#ic-current {}
			
		#cic {float: left;list-style:none;display:block; margin:0px 5px;}
			#cic-current {}
			
/*END OF PRODUCTS AREA*/
	
/*pictures*/#content3 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
/*pricing*/#content4 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*customization*/#content5{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*contact*/#content6{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

#gallery {float: left;  margin:-30px 0px 40px 70px; padding:10px; text-align:center; font-family:Arial, Helvetica, sans-serif;}
	#gallery h2 {text-align:center; font-family:Arial, Helvetica, sans-serif; padding:10px;}
#gallery-content {font-size: 14px; color: #333; width:272px; height: 80px;}

#footer {margin: -105px auto 0px;}
#footer-shadow {margin: -55px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
	


.left {float:left;}
.header {float:left; margin: 25px 25px;}
.clear {clear:both;}
.black {color: #333; font-family:Arial, Helvetica, sans-serif; font-size: 11px; padding:49px 5px 0px 5px; text-align:center; }
.last {color: #333; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:49px 5px 0px 5px; text-align:center; border:none;}
.home {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

/*THIS AREA IS FOR THE NAV BAR FOR EACH ONE WHEN YOU ARE ON THAT PAGE*/
.products {background: url(../images/nav/products-white.gif); width: 72px; height:70px;}
.pictures {background: url(../images/nav/pictures-white.gif); width:65px ;height: 70px;}
.pricing {background:url(../images/nav/pricing-white.gif);width:56px ;height: 70px;}
.customization {background: url(../images/nav/customization-white.gif);width:96px ;height: 70px;}
.contact-us {background:url(../images/nav/contactus-white.gif);width:80px ;height: 70px;}
/*THIS IS THE END OF THE CURRENT NAVBAR STATUS AREA*/

.words_list {float:right; width:338px; margin:10px 63px 10px 10px; padding:10px;}
	.words_list ul li {list-style: none;}
.words {float:right; width: 338px; margin:10px; padding:10px; }
	.words_header {float:right; margin:0px 260px 5px 0px; padding:0px 10px;}
		.words_header h2 {font-family: Arial, Helvetica, sans-serif;}


.pic {float:left; margin:80px 0px 10px 30px; padding:5px;}
.pics {float:left;margin:25px 0px 25px 60px; padding:5px;}
.left_text {float:left; margin:0px 0px 0px 65px;}
.products_text {float: right;width:175px; margin:20px 30px 10px 0px; font-size:11px;}
.contact {float:right; margin: 0px 60px 0px 0px;}
.left_text2 {float:left; margin:0px 10px 10px 10px; width:300px;}
.left_text_header {float:left; margin:0px 0px 5px 0px; padding:0px 10px;}
	.left_text_header h2 {font-family:Arial, Helvetica, sans-serif;}
.center {text-align:center;font-family:Arial, Helvetica, sans-serif;}
	.center h2{text-align:center; font-family:Arial, Helvetica, sans-serif;}
.center_text {text-align:left; font-family:Arial, Helvetica, sans-serif; width:325px; padding:5px; margin:5px 0px 5px 185px; font-size:11px;}

Please help!

TheDoc

A couple things first:

1) Validate the page (you have "<div id="container">" twice, you can't have two of the same id's on one page, there's also something up with the nav that I didn't bother to look at)

2) Do not use <br>'s as design elements. I see you are trying to push content around by using them. Use margins in your CSS instead.

3) I'm not sure if it's the server, but the page takes a VERY long time to load.

I've given up on waiting for the page to load in IE6, I'll have to check again later.

nchipping

The server just went down for a while - so check back in a few hours. Otherwise, I'll validate it right now and see...

nchipping

The site is up and working now, and I have worked on the validation of the code as well. I tried it in IE this morning, and it's working slightly better, but still not working in a lot of areas. Please help!

Here's the code:

<!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\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Linearstars - Home</title>
<link href=\"stylesheets/main-style.css\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"Scripts/swfobject_modified.js\" type=\"text/javascript\"></script>
</head>
<body>
<div id=\"shadow\">
<div id=\"container\">
	<div id=\"header\">
    	<img style=\"float:left\" src=\"images/left-gray.gif\" alt=\"\"  />
        <img class=\"header\" src=\"images/linearstars-header.gif\" alt=\"Introducing the most innovative and customizable linear lighting solutions for cabinet, furniture and display lighting.\" title=\"linearstars\" />
    </div>
    <div id=\"nav\">
    <ul>
    	<li class=\"home\"><a href=\"http://www.linearstars.com/\"><img src=\"images/nav/home-white.gif\" alt=\"home\" title=\"home\" /></a></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/products\" title=\"products\">products</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/pictures\" title=\"pictures\">pictures</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/pricing\" title=\"pricing\">pricing</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"http://www.linearstars.com/customization\" title=\"customization\">customization</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"last\"><a href=\"http://www.linearstars.com/contact\" title=\"contact us\">contact us</a></li>
    </ul>
    </div><!--END OF NAVIGATION-->
    <div class=\"clear\"></div>
    <div id=\"content\">
    <ul>
    	<li><b>Why Linearstars LED fixtures?</b></li><br />
        	
            	<li>+ Long-lasting:  50,000 hour life.  Or, simply put,<br />&nbsp;&nbsp; 
  four hours of light per day for 34 years.</li><br />

				<li>+ Energy-efficient: 10 to 20 times more energy  <br />&nbsp;&nbsp;
  efficient than halogen or xenon.</li><br />

				<li>+ Highly customizable:  choose from 4 different<br />&nbsp;&nbsp; body 
  styles for specific applications, 18<br />&nbsp;&nbsp; different lengths, 
  numerous light-output colors, <br />&nbsp;&nbsp; fixture-body colors, 
  and more,<br />&nbsp;&nbsp; most for no charge.</li><br />

				<li>+ 5 year Manufacturer’s Warranty:  One 	of the<br />&nbsp;&nbsp;  best  
  warranties in the lighting industry.  Rest<br />&nbsp;&nbsp;  assured 
  that we stand behind our product,<br />&nbsp;&nbsp;  so you can, too.</li><br />

				<li>+ Learn more</li>
                <ul>
                	<li>- benefits</li><a href=\"Linearstars_Info_Brochure.pdf\" target=\"_blank\"><img class=\"PDF\" src=\"images/Adobe_PDF_icon_grey.gif\" alt=\"PDF Downlaod\" title=\"PDF Downlaod\" /></a>
                    <div class=\"up\">
     				<li>- products</li>
     				<li>- pictures</li>
				    <li>- customization</li>
     				<li>- sizing & pricing</li><br />
                    </div>
				</ul>
				<li><a href=\"http://www.linearstars.com/contact\">+  Become a Dealer</a></li>
			
	</ul>
    <br />
    <br />
    </div><!--END OF CONTENT-->
    <div id=\"gallery\">
      <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"500\" height=\"400\" id=\"FlashID\" title=\"Linearstars Slideshow\">
        <param name=\"movie\" value=\"slideshow/slideshow1.swf\" />
        <param name=\"quality\" value=\"high\" />
        <param name=\"wmode\" value=\"opaque\" />
        <param name=\"swfversion\" value=\"9.0.45.0\" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
        <param name=\"base\" value=\".\" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type=\"application/x-shockwave-flash\" data=\"slideshow/slideshow1.swf\" width=\"500\" height=\"400\">
          <!--<![endif]-->
          <param name=\"quality\" value=\"high\" />
          <param name=\"wmode\" value=\"opaque\" />
          <param name=\"swfversion\" value=\"9.0.45.0\" />
          <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
          <param name=\"base\" value=\".\" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href=\"http://www.adobe.com/go/getflashplayer\"><img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div><!--END OF GALLERY-->
    <br  />
    <br />
    <br />
    <div class=\"clear\"></div>
  
    	
    
</div><!--THIS IS THE END OF THE CONTAINER, AND THUS THE END OF THIS PAGE-->
                            <div id=\"footer-shadow\"><!--THIS IS WHERE I NEED TO FIX THE SHADOW AND HOW IT WORKS in INTERNET EXPLORER!!!-->
                            <img src=\"images/shadow_bottom.gif\" alt=\"shadow\" />
                            </div>
                            <div id=\"container2\">
                              <div id=\"footer\">
							    <img src=\"images/bottom_bar.gif\" alt=\"footer\" />
							</div>    
                            </div>
 
</div><!--THIS IS THE END OF SHAOW, AND THE WHOLE PAGE-->
<script type=\"text/javascript\">
<!--
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
swfobject.registerObject(\"FlashID\");
//-->
</script>
<script type=\"text/javascript\">
var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
</script>
<script type=\"text/javascript\">
try {
var pageTracker = _gat._getTracker(\"UA-9153413-1\");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

font { font:Arial, Helvetica, sans-serif; font-weight:400;}
body {background:#FFF;}
img {text-decoration:none; border:none;}


#shadow {background: url(../images/shadow_sides.gif); width:1075px; background-repeat:repeat-y; margin:0 auto;}
#container {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#container2 {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; width:450px }
#nav {float:right; margin:-16px 50px 0px 10px; width:440px;}
	#nav ul {list-style:none; display:block; }
	#nav ul li {float: left; list-style:none; display:block; text-align:center;}
		#nav ul li a {text-decoration: none; color:#333;}
		#nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
		#nav ul li a:visited {text-decoration:none; color:#333;}
		
/*home*/#content {font-family: Arial, Helvetica, sans-serif;font-size: 11px; margin: -20px 0px 5px 80px; float:left; width:280px; padding:10px;}
	#content ul li {list-style:none}
	#content ul li a {text-decoration:none; color:#333;}
		#content ul li a:hover {text-decoration:underline; color:#999;}
		#content ul li a:visited {text-decoration:none; color:#333;}
	
/*products*/#content2 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
				
	#lights {float:left; list-style:none; display:block; margin:-56px 0px 0px -56px; width:600px;}
		#uc1 {float: left;list-style:none; display:block; width:75px;}
			#uc1-current {
				float:left; width: 268px; margin:-8px 5px 0px 5px; padding: 15px 0px 10px 0px;
				list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
				text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px;
				background:#FFF;
				}
		
		#uc2 {float: left;list-style:none;display:block; margin:0px 5px;width:75px;}
			#uc2-current {
				float:left; width: 268px; margin:-8px 5px 0px 5px; padding:15px 0px 10px 0px;
				list-style:none; display:block; border-top:1px solid #333; border-right:1px solid #333; border-left:1px solid #333;
				text-align:center;font-family:Arial, Helvetica, sans-serif; font-size:14px;
				background:#FFF;
				}
			
		#ic {float: left;list-style:none; display:block; margin:0px 5px;width:75px;}
			#ic-current {}
			
		#cic {float: left;list-style:none;display:block; margin:0px 5px;width:75px;}
			#cic-current {}
			
/*END OF PRODUCTS AREA*/
	
/*pictures*/#content3 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}
/*pricing*/#content4 {font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*customization*/#content5{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; height: 366px; padding:10px; border:solid 1px #333;}
/*contact*/#content6{font-family:Arial, Helvetica, sans-serif;font-size: 12px; margin:10px auto 50px; width:720px; padding:10px; border:solid 1px #333;}

#gallery {float: left; width:510px;  margin:-30px 0px 40px 70px; padding:10px; text-align:center; font-family:Arial, Helvetica, sans-serif;}
	
#footer {margin: -105px auto 0px; width:1024px;}
#footer-shadow {margin: -55px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; width:1075px; }
	


.left {float:left; width:500px;}
.header {float:left; margin: 25px 25px; width:336px;}
.clear {clear:both;}
.black {color: #333; font-family:Arial, Helvetica, sans-serif; font-size: 11px; padding:49px 5px 0px 5px; text-align:center; }
.last {color: #333; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:49px 5px 0px 5px; text-align:center; border:none;}
.home {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

/*THIS AREA IS FOR THE NAV BAR FOR EACH ONE WHEN YOU ARE ON THAT PAGE*/
.products {background: url(../images/nav/products-white.gif); width: 72px; height:70px;}
.pictures {background: url(../images/nav/pictures-white.gif); width:65px ;height: 70px;}
.pricing {background:url(../images/nav/pricing-white.gif);width:56px ;height: 70px;}
.customization {background: url(../images/nav/customization-white.gif);width:96px ;height: 70px;}
.contact-us {background:url(../images/nav/contactus-white.gif);width:80px ;height: 70px;}
/*THIS IS THE END OF THE CURRENT NAVBAR STATUS AREA*/

.words_list {float:right; width:338px; margin:10px 63px 10px 10px; padding:10px;}
	.words_list ul li {list-style: none;}
.words {float:right; width: 338px; margin:10px; padding:10px; }
	.words_header {float:right; margin:0px 260px 5px 0px; padding:0px 10px; width:100px;}
		.words_header h2 {font-family: Arial, Helvetica, sans-serif;}


.pic {float:left; margin:80px 0px 10px 30px; padding:5px; width:210px;}
.pics {float:left;margin:25px 0px 25px 60px; padding:5px; width:224px;}
.left_text {float:left; margin:0px 0px 0px 65px;width: 180px;}
.products_text {float: right;width:175px; margin:20px 30px 10px 0px; font-size:11px;}
.contact {float:right; margin: 0px 60px 0px 0px; width:310px;}
.left_text2 {float:left; margin:0px 10px 10px 10px; width:300px;}
.left_text_header {float:left; margin:0px 0px 5px 0px; padding:0px 10px; width:100px;}
	.left_text_header h2 {font-family:Arial, Helvetica, sans-serif;}
.center {text-align:center;font-family:Arial, Helvetica, sans-serif;}
	.center h2{text-align:center; font-family:Arial, Helvetica, sans-serif;}
.center_text {text-align:left; font-family:Arial, Helvetica, sans-serif; width:325px; padding:5px; margin:5px 0px 5px 185px; font-size:11px;}
.PDF  {margin:-24px 0px 50px 60px; width:31px;}
.up {margin:-54px 0px 0px 0px; width:120px;}

al_m473

start out from the same point, use some kind of CSS reset, this ensures that the elements all use
the same values in all browsers. for example, a subset of the eric meyer reset, one I use

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, a, img, p,
table, th, tr, td {margin: 0; padding: 0; border: 0;}

Al

nchipping

I will try that and see how it works - do you do this for all of the sites you build at the top of your style sheets?

kamil

Try this...

body {
background:#FFFFFF;
margin:50px 0 0;
}
#shadow {
background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;
margin:0 auto;
width:1075px;
}
#container {
background:#FFFFFF;
border:1px solid #666666;
float:left;
width:1024px;
}

kamil

Try this...

body {
background:#FFFFFF;
margin:50px 0 0;
}
#shadow {
background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;
margin:0 auto;
width:1075px;
}
#container {
background:#FFFFFF;
border:1px solid #666666;
margin:0px auto;
width:1024px;
}

nchipping

I will try that out, but just curious, what does the "background:transparent url(../images/shadow_sides.gif) repeat-y scroll 0 0;" do? I understand using an image for the background, and I understand repeating, but the scroll and transparent parts I don't understand. Any explanations of what is probably some simple CSS?

treehouse : what would you like to learn today?

Forums

Can't figure out IE!!!