#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    CSS help. My site isn't consistent on other browsers.


    Can someone who knows CSS take a look at my site and help me figure out what is wrong and why it looks so dramatically different from Firefox to IE?

    My email sign up form is falling outside of the site and is sitting below. When I resize some of the CSS I can fix it but it messes it up on IE. I pretty much copied other CSS code and played with it to get to the point I am at now. Hopefully someone can provide me with a bit of help on this?

    Since I am unable to post a link showing my site I am going to post the code below.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Tackle Box of Savings -Home</title>
    		<!--ls:begin[stylesheet]--><style type="text/css">.centerComponents
    	
    			
    body 
    	{
    	width:1000px;
    	color: #6b6c5a;
    	font-size: 19px;
    	font-family: Arial,Verdana, Geneva, sans-serif; 
    	line-height: 0px;
    	margin:0px;
    	padding:0px
    	}
    #nav {
        background: url(images/nav-green.png) ;
        position: relative;
    	color: #fff;
        margin: 108px;
        text-transform:uppercase;
    	width:1000px;
    	height:23px;
    	left:-109px;
    	top:8px
    }
    
    div#head {
        position: absolute;
        width:1000px;
        height:100px;
        left:9px;
        top: 9px;
        background-color: #6b6c5a;
    	
    }
    
    
    div#columns {
        position: relative;
        width: 1000px;
    	height: 1200px;
        top: -100px;
    	left:0px;
        background-color: #e6e6d9;
    }
    div#side1 {
        position:absolute;
        width:330px;
        top: 150px;
        left:5px;
        background-color: #e6e6d9;
    	text-align:center;
    	font-size:medium
    }
    div#contenttop {
        position: relative;
        width: 900px;
        top: 15px;
        left: 95px;
        background-color: #e6e6d9;
    	}
    	
    	div#contentmiddle {
        position: relative;
        width: 450px;
        top: 50px;
        left: 350px;
        background-color: #e6e6d9;
    	}
    	div#contentbottomleft {
        position: relative;
        width: 300px;
        top: 55px;
        left: 13px;
        background-color: #e6e6d9;
    	}
    	div#contentbottommiddle {
        position: relative;
        width: 300px;
        top: -115px;
        left: 340px;
        background-color: #e6e6d9;
    	}
    	}
    	div#contentbottomright {
        position: relative;
        width: 330px;
        top: -375px;
        left: 665px;
        background-color: #e6e6d9;
    	}
    	
    div#side2 {
        position:absolute;
        width:125px;
        max-height:600px;
        top: 120px;
        left: 870px;
        background-color: #e6e6d9;
    }
    div#foot {
        position: relative;
        width: 1000px;
        margin-top: -99px;
        color: white;
    	font-size: 11px;
    	line-height: 18px;
    	background-color: #6b6c5a;
    	text-align: center;
    	letter-spacing: 3px;
    	height: 20px;
    	left:0px
    	
    	}
    a
    }
    a.white:link {color: #ffffff;}
    a.white:active {color: #0000ff;}
    a.white:visited {color: #ff0000;}
    a.white:hover {color: #fc0;}
    
    a.blue:link {color: #0000ff;}
    a.blue:active {color: #0000ff;}
    a.blue:visited {color: #ff0000;}
    a.blue:hover {color: #fc0;}
    
    }
     
    .leftcol 
    	{
    	text-align: right;
    	width: 20%;
    	float: left
    	}
    
    --></style>
    	</head>
    
    	<body>
    
    				<div id="nav">
    			<a href="#" class="white">&nbsp;HOME</a>&nbsp; | <a href="#"class="white">&nbsp;ABOUT US</a> &nbsp; | <a href="#"class="white">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#"class="white">&nbsp;COUPONS&nbsp;</a> |<a href="#"class="white">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#"class="white">&nbsp; REVIEWS&nbsp;</a>|<a href="#"class="white">&nbsp; SIGNUP&nbsp;</a></div>			
    		
     <div id="head">
         <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"><font color="#000000"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><h2><div align="center">"Value in Every Tackle Box" &nbsp;&nbsp;&nbsp;&nbsp;<font color="yellow">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></div></h2></font></div></div></div></STRONG>
     </div></font>
     <div id="columns">
         <div id="side1">
             <h1></h1>
             <img src="http://www.tackleboxofsavings.com/yahoo_site_admin/assets/images/featuredproduct-wake-jig-wobbler.32462520_std.jpg" width="320" height="547">
         </div>
         <div id="contenttop">
          <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90"> 
         </div>
    	 <div id="contentmiddle">
    	 <h1>Featured Product</h1>
    	 <p>This innovative hybrid lure has a unique swimming action, which results from the combination of a jig head and a freely moving wobbler body.
    
    <p>The lead head allows for easy casting and gives access to depths, where conventional wobblers are not able to reach.
    
    <p>The Jigwobbler shows its vibrant swimming action also while sinking. Because predators often strike during stops, the Jigwobbler triggers strikes very effectively. Depending on the retrieving speed and style, the Jigwobbler can be used at any desirable depth.
    
    <p>The Jigwobbler can be fished with a steady retrieve or a jerk pause technique.
    
    <p>Available in five sizes:
    
    <ul>
        <li>5 cm and 8 g (2" and 0.3 oz.)</li>
        <li></li>
        <li>6,5 cm and 18 g (2,5" and 0.6 oz.)</li>
        <li></li>
        <li>8 cm and 29 g (3" and 1 oz.)</li>
        <li></li>
        <li>15 cm and 65 g (6" and 2.3 oz.)</li>
        <li></li>
        <li>15 cm and 93 g (6" and 3.3 oz.)</li>
    </ul> 
    
    <p>For more information on this exciting new lure, check out their site at: <a href="www.jigwobbler.com"class="blue">www.jigwobbler.com</a> </p> 
             
    	 </div>
    	 <div id="contentbottomleft">
    	 <script type="text/javascript"><!--
    google_ad_client = "ca-pub-0732288203515052";
    /* index smaller horizontal ad */
    google_ad_slot = "6158344362";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    	 </div>
    	 <div id="contentbottommiddle">
    	 <h2>Email program</h2>
    <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores. 
    <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.
    
    <p>Please support these small businesses by purchasing their fine products.
    	 
    	 </div>
    	 <div id="contentbottomright">
    	 <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=312%26height=449' type='text/javascript'%3E%3C/script%3E"));</script>
    	 </div>
         <div id="side2">
             
    		 <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0" vspace="10"></p>
         </div>
     </div>
     <div id="foot">
     
         <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div>
    <a type="1" href="http://www.bigfishtackle.com/top50/3203"
    target="_blank"><br /></a></p>
    </div>
    <a href=
    "http://www.facebook.com/pages/Tackle-Box-of-Savings/000000000000000"
    target="_TOP" title="Tackle Box of Savings"><img src=
    "http://badge.facebook.com/badge/000000000000000.906.1255056577.png"
    width="112" height="65" class="c25" /></a><a href=
    "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png"
    locale="en" alt=
    "Tackle Box of Savings on LinkedIn" /></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS"
    alt="Top Fishing Websites at TopFishingSites.Com" border=
    "0" /></a><a href=
    "http://www.bigfishtackle.com/top50/3203"><img src=
    "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203"
    border="0" /></a><a href=
    "http://4reelfishing.net/topsites/"><img src=
    "http://4reelfishing.net/topsites/button.php?u=TBOS" alt=
    "4reel fishing top fishing sites" border="0" /></a> <a href=
    "http://cyber-lake.com/topsite/"><img src=
    "http://cyber-lake.com/topsite/button.php?u=TBOS" alt=
    "cyber-lake.com Top Fishing Sites" border="0" /></a> 
    <div id="fBadges"></div>
    </div>
    </div>
    Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved.
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31963875-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    
     </body>
    		
    		
    			
    	</body>
    
    </html>
    Thanks.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    295
    Rep Power
    8
    Probably because you have many 22 errors and 9 warnings from the Markup Validator. You have 2 <body> tags, no </script> tag for the last bit of javascript. Trying to nest a <div> inside a <h2> tag, missing a closing </div> etc etc.

    Here: http://validator.w3.org/#validate_by_input

    Select all your code and paste it there. Then just get rid of the errors 1 by 1, and it should give you a better end result. I started getting rid of all your errors but didn't want to completely mess the layout.

    If you send me an image of what it should look like, I'd be more than happy to write you some code which will get your started, and will also validate. 95% of the time my sites are pretty good cross browsers.

    Let me know!

    Regards,

    NM.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, keithscatch.

    To add to what Nanomech said, one reason it looks so different in IE from other browsers is that IE is attempting to display the page like the very old IE5.5 would. You need to change the doctype to trigger "standards mode" in browsers. I recommend you use the HTML5 doctype, which is simply this:
    Code:
    <!DOCTYPE html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0
    Thank you both, I appreciate it.

    I fixed the errors, can you relook? I still have some spacing issues. Why is the nav menu not tight to the header? Also, IE isn't reading the same values as Firefox does so the form on the lower right is not placed in the same spot as it is on Firefox. Kinda frustrating....

    Also, would you guys recommend that I center this page and have a background around it? Or is having it left justified OK?

    Thanks again for the valuable input.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    16
    Rep Power
    0

    Kravvitz and Nanomech, can you look at my site now?


    I seem to be having some real issues. I fixed all of the errors and validated the code now the site is screwy. For one my form no longer sits where it should. I have adjusted the code to extremes and nothing I adjust moves this email sign up form. Can either of you or anyone else let me know what I need to do?

    Here is the code now:

    Code:
    <!DOCTYPE html>  <html>  	<head> 		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 		<title>Tackle Box of Savings -Home</title> 		<!--ls:begin[stylesheet]--><style type="text/css">.centerComponents  			 body  	{ 	width:1000px; 	color: #6b6c5a; 	font-size: 19px; 	font-family: Arial,Verdana, Geneva, sans-serif;  	line-height: 0px; 	margin:0px; 	padding:0px 	} #nav {     background: url(images/nav-green.png) ;     position: relative; 	color: #fff;     margin: 108px;     text-transform:uppercase; 	width:1000px; 	height:23px; 	left:-109px; 	top:-11px }  div#head {     position: absolute;     width:1000px;     height:92px;     left:9px;     top: 5px;     background-color: #6b6c5a; 	 }   div#columns {     position: relative;     width: 1000px; 	height: 1280px;     top: -117px; 	left:0px;     background-color: #e6e6d9; } div#side1 {     position:absolute;     width:330px;     top: 150px;     left:5px;     background-color: #e6e6d9; 	text-align:center; 	font-size:medium } div#contenttop {     position: relative;     width: 900px;     top: 15px;     left: 95px;     background-color: #e6e6d9; 	} 	 	div#contentmiddle {     position: relative;     width: 450px;     top: 30px;     left: 350px;     background-color: #e6e6d9; 	} 	div#contentbottomleft {     position: relative;     width: 300px;     top: 45px;     left: 13px;     background-color: #e6e6d9; 	} 	div#contentbottommiddle {     position: relative;     width: 300px;     top: -195px;     left: 347px;     background-color: #e6e6d9; 	} 	} 	div#contentbottomright {     position: relative;     width: 315px;     top: -285px;     left: 685px;     background-color: #e6e6d9; 	} 	 div#side2 {     position:absolute;     width:125px;     max-height:600px;     top: 120px;     left: 870px;     background-color: #e6e6d9; } div#foot {     position: relative;     width: 1000px;     margin-top: -575px;     color: white; 	font-size: 11px; 	line-height: 18px; 	background-color: #6b6c5a; 	text-align: center; 	letter-spacing: 3px; 	height: 20px; 	left:0px 	 	}   a.white:link {color: #ffffff;} a.white:active {color: #0000ff;} a.white:visited {color: #ff0000;} a.white:hover {color: #fc0;}  a.blue:link {color: #0000ff;} a.blue:active {color: #0000ff;} a.blue:visited {color: #ff0000;} a.blue:hover {color: #fc0;}  } a  	{ 	color: white; 	text-decoration: none 	}  a:hover  	{ 	color: #fc0; 	text-decoration: none 	}   --></style> 	</head>  	<body>  				<div id="nav"> 			<a href="#" class="white">&nbsp;HOME</a>&nbsp; | <a href="#"class="white">&nbsp;ABOUT US</a> &nbsp; | <a href="#"class="white">&nbsp;FEATURED PRODUCTS</a>&nbsp; | <a href="#"class="white">&nbsp;COUPONS&nbsp;</a> |<a href="#"class="white">&nbsp; MADE IN THE USA&nbsp;</a>|<a href="#"class="white">&nbsp; REVIEWS&nbsp;</a>|<a href="#"class="white">&nbsp; SIGNUP&nbsp;</a></div>			 		  <div id="head">      <div style="width:650px; float:left;"><img src="images/logo_img.png" alt="Tackle Box of Savings Logo" height="88" width="153" border="0"></div><div style="overflow:hidden;"><BR><STRONG><font color="white"><font size="5">"Value in Every Tackle Box"</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="yellow"><font size="4">Discounts for Fishermen&nbsp;&nbsp;&nbsp;</font></font></div></STRONG>  </div>  <div id="columns">      <div id="side1">          <img src="http://tackleboxofsavings.com/images/softcoolers/softcoolerfeaturedproduct.jpg" width="320" height="547" alt="Soft Coolers">      </div>      <div id="contenttop">       <img src="http://tackleboxofsavings.com/images/Make-a-splash-with-TBOS.jpg" width="728" height="90" alt="TBOS promo">       </div> 	 <div id="contentmiddle"> 	 <h1>Featured Product</h1> 	 <p>SoftCoolers, a division of Horizons LTD, has been bringing you top quality soft coolers since 1986. We are known for our outstanding service, top of the line products and the best service you'll find anywhere. We are THE original makers of soft coolers.  <p>Why are our coolers different? <ul>     <li>They are American made with pride by Americans - everything, right down to the zippers!</li> <li>We offer a lifetime leak proof guarantee</li> <li>We are the original soft cooler</li>     <li>We have manufactured and sold our coolers for almost 25 years</li>     <li>We are the #1 cooler in the boating and aviation industry</li>     <li>Our coolers are sold at dozens of boat and air shows around the world</li>     <li>Our fusion welded liner will not cold crack down to 52 below zero</li>     <li>In addition to the main liner there are two additional sweat liners surrounding the insulation so our soft coolers do not sweat</li> </ul> _____________________________________________________  <br>This is Keith Tauber, owner of Tackle Box of Savings here, I received a 18 Pak Executive soft cooler recently and can personally vouch for their quality and effectiveness. The monogram of my logo as seen in the above picture is top notch, as is the entire product.  <p>I would highly recommend this soft cooler to anyone. Trust me, you will not find a better made soft cooler anywhere.  <p>To learn more about this company, please visit their site: <a href="http://www.softcoolers.com">www.softcoolers.com</a>  </div> 	 <div id="contentbottomleft"> 	 <script type="text/javascript"><!-- google_ad_client = "ca-pub-0732288203515052"; /* index smaller horizontal ad */ google_ad_slot = "6158344362"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> 	 </div> 	 <div id="contentbottommiddle"> 	 <h2>Email program</h2> <p>Our emails are sent weekly and contain valuable discount offers from various tackle manufacturers. Many of these manufacturers are small mom and pop shops that make excellent products that are not typically found in large retail stores.  <p>Please fill out this form to sign up to receive these special TBOS deals. Many of these deals are found nowhere else.  <p>Please support these small businesses by purchasing their fine products. 	  	 </div> 	 <div id="side2">           		 <img src="http://tackleboxofsavings.com/images/120x600ad.jpg" alt="" height="600" width="120" border="0" vspace="10">      </div> 	 <div id="contentbottomright"> 	 <script type="text/javascript">document.write(unescape("%3Cscript src='http" +  (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=emailsignup%26slug=94772%26width=310%26height=449' type='text/javascript'%3E%3C/script%3E"));</script> 	 </div>         <div id="foot">        <a href="#"class="white">HOME</a> | <a href="#"class="white">ABOUT US</a>  | <a href="#"class="white">FEATURED PRODUCTS</a> | <a href="#"class="white">COUPONS</a> |<a href="#"class="white"> MADE IN THE USA</a>|<a href="#"class="white"> REVIEWS</a>|<a href="#"class="white"> SIGN UP</a></div> </div> <a type="1" href="http://www.bigfishtackle.com/top50/3203" target="_blank"></a> </div> <a href= "http://www.facebook.com/pages/Tackle-Box-of-Savings/000000000000000" target="_TOP" title="Tackle Box of Savings"><img src= "http://badge.facebook.com/badge/000000000000000.906.1255056577.png" width="112" height="65" class="c25" alt="Facebook icon"></a><a href= "http://www.linkedin.com/company/tackle-box-of-savings?trk=fc_badge"><img src="http://static01.linkedin.com/scds/common/u/img/webpromo/btn_cofollow_badge.png" alt="Tackle Box of Savings on LinkedIn"></a><a href="http://www.topfishingsites.com/"><img src="http://www.topfishingsites.com/button.php?u=TBOS" alt="Top Fishing Websites at TopFishingSites.Com" border= "0"></a><a href= "http://www.bigfishtackle.com/top50/3203"><img src= "http://www.bigfishtackle.com/cgi-bin/top50/topsites.cgi?action=button&amp;id=3203" border="0" alt="bigfishtackle icon"></a><a href= "http://4reelfishing.net/topsites/"><img src= "http://4reelfishing.net/topsites/button.php?u=TBOS" alt= "4reel fishing top fishing sites" border="0"></a> <a href= "http://cyber-lake.com/topsite/"><img src= "http://cyber-lake.com/topsite/button.php?u=TBOS" alt= "cyber-lake.com Top Fishing Sites" border="0"></a>  <div id="fBadges"></div>   Copyright &copy; 2012 Tackle Box of Savings &nbsp; All rights reserved. <script type="text/javascript">    var _gaq = _gaq || [];   _gaq.push(['_setAccount', 'UA-31963875-1']);   _gaq.push(['_trackPageview']);    (function() {     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);   })(); </script>   </body> </html>

IMN logo majestic logo threadwatch logo seochat tools logo