css file not functioning properly in IE9 and earlier

StackOverflow https://stackoverflow.com/questions/23628496

  •  21-07-2023
  •  | 
  •  

Question

I have a functioning website for a family run business. It is working well in Chrome, FF, Safari, Opera and IE10 & 11, but not in IE9 and earlier. Not all divs are being displayed in IE 9 (the #logo, #logo_text, #nav and #pic_box divs to be precise). This only occurred when I tried to wrap the whole website in a #container div and used a #header div which were required to make the web page work great in Chrome et al.

I have been trying to find a solution for a couple of days now. The problem appears to be either with my #container div or the #header div or #main_content div as the problem #divs were displaying before I introduced these 'wrappers'.

Your help much appreciated. Let me know if you need more info.

CSS as follows

    html, body, h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}



a {
    color: #464544;
}
a:hover {
    color: #9e9e9e;
}


body {
background-color: #f1f1f1;

background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(top,  #f1f1f1 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f1f1f1 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f1f1f1 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f1f1f1 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f1f1f1 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */

}


/** container **/
#container {

  position: relative; 
  float: none; 
  height: auto;
  width: 1100px;

  margin: auto;
  padding: 0 15px;
}


#header {

  position: relative; 
  float: none; 
  height: 140px;    
  margin: auto;
  padding: 0 15px;
  clear:both;
}



/** logo **/
#logo {
  float:left;
  margin-top: 30px;
  margin-left: 100px; 

}



/** logo text (contact details)**/

#logo_text {

  display:inline;
  text-align: left;
  margin-left: 250px;
  margin-top: 25px;
}

#logo_text p {
  color: #464544;
  font-family: Verdana; 
  font-weight: bold; 
  font-style: normal; 
  font-size: 20px;
  padding-top: 0.8em;
  padding-right: 0.6em;
  text-decoration: none;
  }


/** Nav Bar **/

#nav {
  margin-top: 20px;
  margin-left: 160px;
  clear:both;


}
#nav li {
  list-style: none;
  float: left;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 4px;
  padding-bottom: 6px;
  margin-right: 4px;
  font-family: verdana; 
  font-weight: normal; 
  font-style: normal; 
  font-size: 20px;
  background-color: #464544;
}
#nav a {
  color: #f3f3f3;
  text-decoration: none;
  font-weight: bold;
}
#nav a:hover {
  color: #fff;
  border-bottom: 10px solid #464544;
  border-top: 8px solid #464544;
}
#nav a:active {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 10px solid #464544;
  border-top: 8px solid #464544;
}




/** Main body Picture Box **/

#pic_box {

float:left; display:inline;

width: 228px;
height: 476px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:3px solid #696969;

-webkit-box-shadow: #B3B3B3 6px 6px 6px;
-moz-box-shadow: #B3B3B3 6px 6px 6px; 
box-shadow: #B3B3B3 9px 9px 9px;


background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top,  #FAADAB 0%, #E8A09E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAADAB), color-stop(100%,#E8A09E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* IE10+ */
background: linear-gradient(to bottom,  #FAADAB 0%,#E8A09E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAADAB', endColorstr='#E8A09E',GradientType=0 ); /* IE6-8 */


margin-top: 50px;
margin-left: 12px;
overflow:hidden;
}



/** Main body Welcome Box **/

#welcome_box {

float:left; display:inline;

width: 358px;
height: 436px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:3px solid #696969;

-webkit-box-shadow: #B3B3B3 6px 6px 6px;
-moz-box-shadow: #B3B3B3 6px 6px 6px; 
box-shadow: #B3B3B3 9px 9px 9px;


background: #CDCF6D; /* Old browsers */
background: -moz-linear-gradient(top,  #E6E87A 0%, #CDCF6D 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E87A), color-stop(100%,#CDCF6D)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* IE10+ */
background: linear-gradient(to bottom,  #E6E87A 0%,#CDCF6D 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#CDCF6D',GradientType=0 ); /* IE6-8 */



margin-top: 50px;
margin-left: 16px;
padding: 20px;
text-align: justify;
font-family: Verdana; 
font-weight: normal; 
font-style: normal; 
color: #000;
font-size: 14px;


}


#welcome_box h2 {
  position: relative;
  font-weight: bold; 
  font-size: 16px;
  margin-bottom: 10px;
}

#welcome_box p {
  color: #000;
  margin: 1em 0;
  font-size: 14px;
}


#welcome_box ul {
  float: left;
  width: 49%;
  margin: 1em 0;
  padding: 0;
  font-size: 14px;
}
#welcome_box li {
  list-style: square;
  margin-left: 12px;
  font-size: 14px;
}



/** Main body Removals Box **/


#removals_box {

float:left; display:inline;

width: 358px;
height: 436px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:3px solid #696969;

-webkit-box-shadow: #B3B3B3 6px 6px 6px;
-moz-box-shadow: #B3B3B3 6px 6px 6px; 
box-shadow: #B3B3B3 9px 9px 9px;

background: #CDCF6D; /* Old browsers */
background: -moz-linear-gradient(top,  #E6E87A 0%, #CDCF6D 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E87A), color-stop(100%,#CDCF6D)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #E6E87A 0%,#CDCF6D 100%); /* IE10+ */
background: linear-gradient(to bottom,  #E6E87A 0%,#CDCF6D 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E87A', endColorstr='#CDCF6D',GradientType=0 ); /* IE6-8 */



margin-top: 50px;
margin-left: 16px;
padding: 20px;
text-align: justify;
font-family: Verdana; 
font-weight: normal; 
font-style: normal; 
color: #000;
font-size: 14px;
}

#removals_box a:hover {
    color: #000;
}

#removals_box h2 {
  position: relative;
  font-weight: bold; 
  font-size: 16px;
  margin-bottom: 10px;
}

#removals_box p {
  color: #000;
  margin: 1em 0;
  font-size: 14px;
}

#removals_box ul {
  list-style: square;
  margin-left: 34px;
  padding-top: 0px;
  font-size: 14px;
}
#removals_box li {
  list-style: disc;
  margin-left: 12px;
  padding-top: 2px;
  font-size: 14px;
}




/** Main body Prices Box **/

#prices_box {

float:left; display:inline;

width: 358px;
height: 436px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:3px solid #696969;

-webkit-box-shadow: #B3B3B3 6px 6px 6px;
-moz-box-shadow: #B3B3B3 6px 6px 6px; 
box-shadow: #B3B3B3 9px 9px 9px;


background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top,  #FAADAB 0%, #E8A09E 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAADAB), color-stop(100%,#E8A09E)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #FAADAB 0%,#E8A09E 100%); /* IE10+ */
background: linear-gradient(to bottom,  #FAADAB 0%,#E8A09E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAADAB', endColorstr='#E8A09E',GradientType=0 ); /* IE6-8 */



margin-top: 50px;
margin-left: 16px;
padding: 20px;
text-align: justify;
font-family: Verdana; 
font-weight: normal; 
font-style: normal; 
color: #000;
font-size: 14px;
}

#prices_box a:hover {
    color: #000;
}

#prices_box h2 {
  position: relative;
  font-weight: bold; 
  font-size: 16px;
  margin-bottom: 10px;
}

#prices_box p {
  color: #000;
  margin: 1em 0;
  font-size: 14px;
}

#prices_box ul {
  list-style: disc;
  margin-left: 12px;
  padding-top: 2px;
  font-size: 14px;
}
#prices_box li {
  list-style: disc;
  margin-left: 12px;
  padding-top: 2px;
  font-size: 14px;
}



/** Main body Quick Quote Box **/


#quick_quote {

float:left; display:inline;
width: 358px;
height: 436px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:3px solid #696969;

-webkit-box-shadow: #B3B3B3 6px 6px 6px;
-moz-box-shadow: #B3B3B3 6px 6px 6px; 
box-shadow: #B3B3B3 9px 9px 9px;


background: #8EC3E3; /* Old browsers */
background: -moz-linear-gradient(top,  #8EC3E3 0%, #7EADC9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8EC3E3), color-stop(100%,#7EADC9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8EC3E3 0%,#7EADC9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8EC3E3 0%,#7EADC9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8EC3E3 0%,#7EADC9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8EC3E3 0%,#7EADC9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8EC3E3', endColorstr='#7EADC9',GradientType=0 ); /* IE6-8 */


margin-top: 50px;
margin-left: 16px;
padding: 20px;
text-align: left;
font-family: Verdana; 
font-weight: normal; 
font-style: normal; 
color: #000;
font-size: 14px;
}


#quick_quote h2 {
  position: relative;
  font-weight: bold; 
  font-size: 16px;
  margin-bottom: 10px;
}

#quick_quote p {
  color: #000;
  margin: 1em 0;
  font-size: 14px;
}


#quick_quote ul {
  float: left;
  width: 49%;
  margin: 1em 0;
  padding: 0;
  font-size: 14px;
}
#quick_quote li {
  list-style: square;
  margin-left: 12px;
  font-size: 14px;
}



/** Footer **/

#footer {

padding-top: 20px;
text-align: center;
font-family: Verdana; 
font-weight: normal; 
font-style: normal; 
font-size: 14px;
color: #464544;
padding-top: 3.5em;
padding-bottom: 2em;
margin: 0.5em 0em;
clear: both;
}

#footer a {
  color: #464544;
}

#footer a:hover {
  color: #000;
}

HTML as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Title</title>

        <meta name="description" content="Removals">
        <meta name="keywords" content="...">
        <meta itemprop="name" content="...">
        <meta itemprop="description" content="...">

    <link rel="stylesheet" href="style_removals.css" type="text/css" charset="utf-8" />

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/z1-move.jpg"
var image2=new Image()
image2.src="images/z2-friendly.jpg"
var image3=new Image()
image3.src="images/z3-map.jpg"
var image4=new Image()
image4.src="images/z4-family.jpg"
var image5=new Image()
image5.src="images/z5-man.jpg"
var image6=new Image()
image6.src="images/z6-balloon.jpg"

//-->
</script>


</head>


<body>

<div id="container">   <!-- Start Page Container --!>

<div id="header">   <!-- Start Header --!>

<div id="logo">
<img src="images/oco_logo8.gif" width="447" height="110">
</div>

<div id="logo_text">
<p>T: XXXX XXXX<br>E: <a href="mailto:admin@XXXXX">admin@XXXXX</a></p>
</div>


</div>  <!-- End Header --!>


<div id="nav">  <!-- Start Nav --!>

<ul>
   <li class='active'><a href='index.html'><span>&nbsp&nbspHome&nbsp&nbsp</span></a></li>
   <li><a href='removals.html'><span>&nbsp&nbspRemovals & Other Services&nbsp&nbsp</span></a></li>
   <li><a href='prices.html'><span>&nbsp&nbspOur Prices&nbsp&nbsp</span></a></li>
   <li><a href='contact.html'><span>&nbsp&nbspContact&nbsp&nbsp</span></a></li>
</ul>
</div>  <!-- End Nav --!>


<div id="main_content">  <!-- Start Main Content --!>


<div id="pic_box">  <!-- Start Pic_Box Section --!>

<img src="images/z1-move.jpg" name="slide" width="228" height="476" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<6)
step++
else
step=1
//call function "slideit()" every 10 seconds
setTimeout("slideit()",10000)
}
slideit()
//-->
</script>

</div>  <!-- End Pic_Box section--!>





<div id="removals_box"> <!-- Start Removals Section --!>

<h2>Removals and Other Services</h2>

<p>We offer a complete service that includes packing, removals, cleaning and even unpacking. Below is a list of our most commonly requested services:</p>

<li>Home removals</li>
  <ul>
<li>Local, national and international;</li>
<li>Single Item to 5+ bed house;</li>
<li>In to or out of storage;</li>   
<li>University student moves</li>
  </ul>

<li>Office relocations</li>
<li>Full or partial packing service</li>
<li>Packing supplies</li>
<li>End of tenancy property cleaning</li>
<li>Unpacking service</li>
<li>Furniture Assembly</li>
<li>House Clearances</li>
<li>Storage Deal - Our customers receive a 5% discount at Safestore and Big Yellow</li>

<p>Simply telephone, email or complete the short form opposite for a no-obligation quote.</p> 



</div>  <!-- End Removals section--!>




<div id="quick_quote">  <!-- Start Quick Quote Section --!>

<h2>Quick Quote Form</h2>
<div class="clear"> </div>


<form name="htmlform" method="post" action="html_form_send.php">
<table width="400px">
</tr>

<tr>
<td valign="center">
<label for="name">Your Name* </label>
</td>
<td valign="top">
<input  type="text" name="name" maxlength="70" size="30" autofocus>
</td>
</tr>

<tr>
<td valign="center">
<label for="email">Email*</label>
</td>
<td valign="top">
<input  type="email" name="email" maxlength="100" size="30" required>
</td>
</tr>

<tr>
<td valign="center">
<label for="telephone">Telephone*</label>
</td>
<td valign="top">
<input  type="tel" name="telephone" maxlength="30" size="30">
</td>
</tr>

<tr>
<td valign="center">
<label for="address_from">Address (From)</label>
</td>
<td valign="top">
<input  type="text" name="address_from" maxlength="100" size="30">
</td>
</tr>

<tr>
<td valign="center">
<label for="property_size">Property Size</label>
</td>
<td valign="top">
<select name="property_size">
                <option value="studio">studio</option>
                <option value="1_bed">1 bedroom</option>
                <option selected="2_bed">2 bedroom</option>
                <option value="3_bed">3 bedroom</option>
        <option value="4_bed">4 bedroom</option>
        <option value="5+_bed">5+ bedroom</option>
                <option value="office">office relocation</option>
</select>
</td>
</tr>

<tr>
<td valign="center">
<label for="address_to">Address (To)</label>
</td>
<td valign="top">
<input  type="text" name="address_to" maxlength="100" size="30">
</td>
</tr>

<tr>
<td valign="center">
<label for="move_date">Move Date</label>
</td>
<td valign="top">
<input  type="date" name="move_date" >
</td>
</tr>


<tr>
<td valign="top" style="padding-top: 4px">
<label for="comments">Comments</label>
</td>
<td valign="top">
<textarea  name="comments" maxlength="1000" cols="25" rows="7" placeholder="Please add any special requirements you may have, additional info on dates, key exchanges, access issues, extra large items, additional services required etc."></textarea>
</td>

</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>

<p> * indicates a required field</>

</div>  <!-- End Quick quote section--!>

</div>  <!-- End Main Content --!>



<div id="footer"> <!-- Start Footer --!>


    Telephone: XXX
    <br>
    Email: <a href="mailto:example.com">admin@example.com</a>
    <br>
    Address: xxxx
        <br>
    <br>
    &copy; xxx 2014


</div> <!-- End Footer--!>




</div>  <!-- For Container --!>

</body>
</html>
Was it helpful?

Solution

Not all divs are being displayed in IE 9

You have a misprint in HTML comment here and below:

<div id="container">   <!-- Start Page Container --!>

Just change all your HTML comments from:

<!-- ... --!>

to

<!-- ... -->
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top