New Site not displaying on all browsers properly

Hello all,

Website: DYNA Home Page
Designed in: DreamWeaver CS5 (mostly html hand written, don’t really use the graphical interface part. Just use it to review results of text coding).

I am having some problem with this site. It is a first draft rebuild of a horrible old site. I still have 2 dead links in the products section and most links to the Technical data sheets are dead. Beyond that it is more or less active (Some pages are looping into products section even though they claim to be videos and TDS’s but that is intentional at this time). This is my very first attempt at writing CSS and I have had a serious learning curve doing it. This site works GREAT on all browsers including the mobile ones except I ran into one major problem on SOME Internet Explorer 8 and 9 browsers where the main section (content section on the right side) gets pusshed PAST the left side menu but on others with the same browser version it does not work.

Windows 7 - Internet Explorer 8 - layout works fine
Windows 7 - Internet Explorer 9 - layout does not work
Windows Vista ULTIMATE - Internet Explorer 8 - layout does not work

Now I remember reading somewhere about code not working in some browsers and in others it does. Can not find this article or reference as everything I come across is too specific to the problem in the coding. I think I did this right but need some guidance, advice, and help.

Thank you from a noob.

Also, if anyone has a good website search script for the box I created on top or a link on a tutorial to do one please include it in your reply and it will be very very very much appreciated!

Eddie

HTML CODE BELOW:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DYNA Home Page</title>
<link href="stylehome.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; } 
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="headcontainer">
   <div class="header"><a href="index.html"><img src="images/logo.jpg" alt="DYNA" width="183" height="90" id="DYNA" style="background: #fff; display:block;" /></a> 
     <!-- end .header -->
   </div>
   <div class="headcontent">
     			<div id="searchwrapper">
  				<form action="">
				<input type="text" class="searchbox" name="s" value="" />
				<input type="image" src="images/searchbutton.jpg" class="searchbox_submit" value="" />
				</form>
				<br />
			</div> 
   </div>
  </div>
  <div class="sidebar">
    <div class="seperator"><br />
	</div>
    <ul class="nav">
      <li><a href="#">HOME</a></li>
      <li><a href="about.html">ABOUT DYNA</a></li>
      <li><a href="products-all.html">PRODUCTS</a></li>
      <li><a href="green.html"><font color="#99CC33">GREEN INITIATIVE</font></a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
    <div class="seperator">
	</div>
    <ul class="navheader">
		<li>CHOOSE A SECTION</li>
	</ul>
    <ul class="subnav">
      	<li><a href="products-3.html">Division 3 - Concrete</a></li>
      	<li><a href="products-4.html">Division 4 - Masonry</a></li>
      	<li><a href="products-6.html">Division 6 - Wood / Plastic</a></li>
      	<li><a href="products-7.html">Division 7 - Thermal</a></li>
      	<li><a href="products-9.html">Division 9 - Finishes</a></li>
      	<li><a href="products-10.html">Green - LEED Points</a></li>
    </ul>
    <div class="seperator">
	</div>
    <ul class="navheader">
		<li>KEEP IN TOUCH</li>
	</ul>
    <ul class="contactnav">
		<li><a href="http://twitter.com/#!/DynaCanadaInc">Follow Us <img src="images/twitter-icon.gif" /></a></li>
		<li><a href="http://www.facebook.com/profile.php?id=100002296260910">Get Updates <img src="images/facebook-icon.gif" /></a></li>
		<li><a href="videos.html">Product Use Videos <img src="images/videos-icon.gif" /></a></li>
		<li><a href="tds.html">Technical Sheets <img src="images/tds-icon.gif" /></a></li>
    </ul>
    <!-- end .sidebar1 --></div>
<div class="containercontent">
  <div class="content">
	<div class="topimage">
	  <div class="topheader">
		Home Page
	  </div>
	  <div class="topmessage">
		<h1>DYNA LAUNCHES NEW LINE OF ROOFING PRODUCTS</h1>
		<h2>In 2011 DYNA will be releasing 6 new products. We are also launching a new website. This is going to be an exciting year!</h2><br />
		<ul><li><a href="about.html">LEARN MORE ABOUT DYNA!</a></li></ul>
	  </div>
	</div>
	<div class="maincontent">
	</div>
    <div class="seperator">
	</div>
	<div class="categoryseperator">
		<div class="categoryseperator3">
    		<ul>
			<li><a href="products-3.html">All Concrete Products</a></li>
    		<li><a href="products-3-under.html">Undercoat / Presealing</a></li>
    		<li><a href="products-3-clean.html">Cleaners</a></li>
    		<li><a href="products-3-mastic.html">Glue / Mastics</a></li>
    		<li><a href="products-3-sand.html">Polymeric Sands</a></li>
    		<li><a href="products-3-honer.html">Honers</a></li>
    		<li><a href="products-3-seal.html">Sealers</a></li>
			</ul>
		</div>
		<div class="categoryseperator4">
    		<ul>
    		<li><a href="products-4.html">All Masonry Products</a></li>
    		<li><a href="products-4-clean.html">Cleaners</a></li>
    		<li><a href="products-4-mastic.html">Mortar / Mastics</a></li>
    		<li><a href="products-4-seal.html">Sealers</a></li>
			</ul>
		</div>
		<div class="categoryseperator6">
    		<ul>
    		<li><a href="products-6.html">All Wood / Plastic Products</a></li>
    		<li><a href="products-6-mastic.html">Glue / Mastics</a></li>
			</ul>
		</div>
	</div>
	<div class="categoryseperatorb">
		<div class="categoryseperator7">
    		<ul>
    		<li><a href="products-7.html">All Thermal / Moisture Protection Products</a></li>
    		<li><a href="products-7-clean.html">Cleaners</a></li>
    		<li><a href="products-7-seal.html">Sealers</a></li>
			</ul>
		</div>
		<div class="categoryseperator9">
    		<ul>
    		<li><a href="products-9.html">All Finishing Products</a></li>
    		<li><a href="products-9-under.html">Undercoat / Presealing</a></li>
    		<li><a href="products-9-clean.html">Cleaners</a></li>
    		<li><a href="products-9-glue.html">Glue Bonding Agents</a></li>
    		<li><a href="products-9-mastic.html">Mortar / Mastics</a></li>
    		<li><a href="products-9-grout.html">Grouts</a></li>
    		<li><a href="products-9-sand.html">Polymeric Sands</a></li>
    		<li><a href="products-9-drywall.html">Drywall Compound</a></li>
    		<li><a href="products-9-honer.html">Honers</a></li>
    		<li><a href="products-9-seal.html">Sealers</a></li>
			</ul>
		</div>
		<div class="categoryseperator10">
    		<ul>
    		<li><a href="products-10.html">All Green Products</a></li>
    		<li><a href="products-leed.html">LEED Points Chart</a></li>
    		<li><a href="products-10-clean.html">Cleaners</a></li>
    		<li><a href="products-10-mastic.html">Mortar / Mastics</a></li>
    		<li><a href="products-10-seal.html">Sealers</a></li>
			</ul>
		</div>
	</div>
    <!-- end .content --></div>

</div>
  <div class="footer">
    <p>(c)2011 Dyna Metro Inc. All rights reserved. Contact Webmaster <a href="mailto:eddie@dyna.ca">Here</a></p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

CSS CODE BELOW:

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #3d64b0;
	margin: 0;
	padding: 0;
	color: #000;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 0px;
	padding-left: 0px;
}
a img { 
            border: none;
}

a:link {
	color:#000;
	text-decoration: underline; 
}
a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.container {
	width: 80%;
	max-width: 960px;
	min-width: 960px;	background: #FFF;
	margin: 0 auto; 
}
.containercontent {
	width: 95%;
	background: #FFF;
	margin: 20px auto;
}
.headcontainer {
	width: 100%;
	max-width: 1260px;
	min-width: 920px;
	background: #FFF;
	margin: 0;
}

.header {
	background: #FFF;
	width: 20%;
	float:left;
}


.sidebar {
	clear:both;
	float: left;
	width: 20%;
	background: #FFF;
	padding-bottom: 10px;
}
.content {
	padding-left: 10px;
	width: 80%;
	float: left;
}
.headcontent {
	text-align: right;
	background: #fff;
	padding: 40px 10px 0px 630px;
}

.content ul, .content ol { 
	padding: 20px 15px 15px 40px; 
}

ul.nav {
	font-weight:bold;
	font-size:0.9em;
	list-style: none; 
	border-top: 0px solid #FFF; 
	margin-bottom: 15px;
}
ul.nav li {
	border-bottom: 0px solid #FFF;
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
	background: #FFF;
	color: #000;
	text-align:right;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background: #CCC;
	color: #000;
}
ul.subnav {
	list-style: none;
	border-top: 0px solid #FFF;
	margin-bottom: 0px;
}
ul.subnav li {
	border-bottom: 0px solid #FFF;
}
ul.subnav a, ul.subnav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	font-size:0.6em;
	background: #FFF;
	color: #000;
	text-align:right;
}
ul.subnav a:hover, ul.subnav a:active, ul.subnav a:focus { 
	background: #CCC;
	color: #000;
}
ul.navheader li {
	list-style: none;
	paddding: 10px 0px;
	text-align: center;
	font-size: .7em;
	font-weight: bold;
	background-color :#ddd;
}
ul.contactnav {
	list-style: none; 
	border-top: 1px solid #fff;
	padding: 0px;
	margin-bottom: 15px; 
}
ul.contactnav li {
	font-weight: bold;
	font-size: 10px;
	background-color:#d2d3e1;
	
}
ul.contactnav a, ul.nav-header a:visited {
	padding: 5px 5px 5px 15px; 
	display: block;
	text-decoration: none;
	background: #fff;
	color: #000;
	text-align:right;
}
ul.contactnav a:hover, ul.nav-header a:active, ul.nav-header a:focus {
	background: #ececec;
	color: #000;
}
.topimage {
	width:100%;
	height:420px;
	background-image:url(images/homepic.jpg);
	background-repeat:no-repeat;
	background-position:0px;
	padding:0px;
	margin: 0 auto;
}
.topheader {
	width:220px;
	height:40px;
	padding:49px 0px 0px 20px;
	margin: 0 auto;
	float:left;
	color:#FFF;
	font-size: 0.8em;
}
.topmessage {
	width: 460px;
	height: 120px;
	clear:left;
	padding-top: 210px;
	padding-left: 240px;
}
.topmessage h1 {
	font-size:.85em;
	color: #1f2167;
	padding: 0px;
	margin: 0px;
}
.topmessage h2 {
	font-size: .65em;
	color: #000;
	margin-left:0px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
.topmessage li {
	list-style-image:url(images/arrow-left-bold.gif);
	list-style-position: 0px 0px;
	text-decoration:none;
	font-size: .85em;
	color: #000;
	text-align: left;
	padding: 0px;
}
.topmessage a {
	text-decoration: none;
	font-weight:bold;
}
.topmessage a:hover {
	background-color:#ddd;
}
.categoryseperator {
	width:100%;
	height:270px;
	clear:left;
}
.categoryseperatorb {
	width:100%;
	height:320px;
	clear:left;
}
.categoryseperator3 {
	clear:none;
	background-image:url(images/division3-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator4 {
	clear:none;
	background-image:url(images/division4-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator6 {
	clear:none;
	background-image:url(images/division6-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator7 {
	clear:none;
	background-image:url(images/division7-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator9 {
	clear:none;
	background-image:url(images/division9-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator10 {
	clear:none;
	background-image:url(images/divisiongreen-box.jpg);
	background-repeat:no-repeat;
	width: 230px;
	float:left;
}
.categoryseperator3 ul, .categoryseperator4 ul, .categoryseperator6 ul, .categoryseperator7 ul, .categoryseperator9 ul, .categoryseperator10 ul {
	padding: 130px 0px 0px 0px;
}
.categoryseperator3 li, .categoryseperator4 li, .categoryseperator6 li, .categoryseperator7 li, .categoryseperator9 li, .categoryseperator10 li {
	background-image:url(images/arrow-left.gif);
	background-repeat:no-repeat;
	background-position: 5px 5px;
	padding: 0px;
	text-align:left;
	text-decoration:none;
	list-style:none;
	font-size:.8em;
}
.categoryseperator3 a, .categoryseperator4 a, .categoryseperator6 a, .categoryseperator7 a, .categoryseperator9 a, .categoryseperator10 a {
	padding: 0px;
	text-align:left;
	text-decoration:none;
	list-style:none;
	font-size:.8em;
	display:block;
	margin: 0px 0px 0px 20px;
}
.categoryseperator3 a:hover, .categoryseperator4 a:hover, .categoryseperator6 a:hover, .categoryseperator7 a:hover, .categoryseperator9 a:hover, .categoryseperator10 a:hover {
	padding: 0px;
	text-align:left;
	text-decoration:none;
	list-style:none;
	font-size:.8em;
	background-color:#eee;
}

.footer {
	padding: 10px 0;
	background: #3d64b0;
	position: relative;
	clear: both; 
	text-align:center;
	font-size:.6em;
}

.fltrt {
  	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.seperator {
padding: 0px 0px 10px 0px;
width: 100%;
background-image:url(images/seperator.jpg);
background-repeat: repeat-x;
background-position:center
}
#searchwrapper {
width:188px; 
height:24px;
background-image:url(images/searchbox.jpg);
background-repeat:no-repeat; 
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form { 
display:inline ; 
}
.searchbox {
border:0px; 
background-color:transparent;
position:absolute;
top:2px;
left:10px;
width:178px;
height:18px;
font-size:10px;
text-align:right;
}
.searchbox_submit {
border:0px;
background-color:transparent;
position:absolute;
top:0px;
left:188px;
width:39px;
height:24px;
} 
.maincontent {
	padding:10px;
	
}

In IE, turn “compatability view” off.

Hi Eddie. Welcome to SitePoint. :slight_smile:

Forgive me for chuckling, but almost every article about web design you’ll ever read will say that. Welcome to web design! Each browser has its quirks and faults, and it’s quite a job keeping each one happy, so testing in as many browsers as possible is essential.

That said, I don’t see any problem with the site in IE9, Win 7. Could you say a bit more about what problems you are seeing?

Also, if anyone has a good website search script for the box I created on top or a link on a tutorial to do one please include it in your reply and it will be very very very much appreciated!

Unless you are using a content management system, your best choice is to use the Google search tools. So, when someone types something into the search box and clicks the mag glass, they will be taken to a Google search page just for that site. To be honest, in my view it’s the best search tool around.

This is the basic code you need. I’ve left in labels, which are important, though you can hide them if you must. You can replace the submit code with what you posted:

<div id="searchwrapper">
	<form method="get" action="http://www.google.com/search">
		<label for="q">Search this Site</label> 
		<input type="text" class="text" name="q" id="q" size="31" maxlength="255" value=""> 
		<input class="submit" type="submit" value="Search">
		<input type="hidden" name="sitesearch" value="dyna.ca">
	</form>
</div>

Thank you for the warm welcome! I will try this code. I am more concerned right now with the viewing problem. I do not want to have to turn on and off compatibility view. How can I clean the code or give a doctype that will work without problems? Any suggestions?

Thank you,
Eddie

I ran into one major problem on SOME Internet Explorer 8 and 9 browsers where the main section (content section on the right side) gets pusshed PAST the left side menu but on others with the same browser version it does not work.

Could you clarify what you mean by ‘pushed past’? I’m not seeing the problem.

I think I solved the problem. I almost had to force values and set the div for content to be “display inline” to get it to work without the compaytibility view. The rest is incorrect values on the forced widths of sub divs. Thanks for the help all but I think I found out where the problem is. Just have to walk away from the desk sometimes to clear my mind. Spent 3 weeks working on this and just had to go back and re-analyze the head structure of the site. Now all is working. Next step, get the other functions working such as search.

Glad you found a solution. And for a professed “noob”, you’ve done very well with this redesign. :slight_smile:

Hi Ralph,

I am a noob. Very first css website I ever did. Built a total of 4 sites in over 10 years. Mostly been into graphic design. The efforts were great and the patience is there, hence I did a lot of reading up before I attempted this. Hope the code looks clean. Besides, I learned that the easier the site built is the better it is in the long run which seems to prove quite well here. Thanks for the compliments!

Eddie

Well, although it works on all sites, the lining up is still not the same. There are still random situations of unwanted padding on different divs. Regardless, it works where it is more then 90% the same and look clean. As long as the experience is consistent and does not look like something strange is happening, it is fine.

Thank