Problem in Footer displaying on IE

HTML & CSS
1

hi

i got this problem…

my site footer is not opening fine on Internet explorer

http://i.imgur.com/CSZTn.png Screenshot

but on chrome or firefox website looks okey

http://kenrock.com.pk/index.html
kindly help me to fix the issue

2

Hi,

The main problem is cause by this unclosed h2 here:


<div id="middleRight">
 <h2>	Projects in Progress
  </div>

Add the closing h2 tag and it should fix the footer problem.

On another issue you do have some errors in your code in that you are re-using ids which is not allowed. If you need to re-use a style again it should be a class not an id.

You are overusing ids anyway as this section does not need all the inner ids (even if they were classes as they should be).


<div id="boxesContainerRow1" style="display: block;">
		<div id="boxes"> <img src="http://kenrock.com.pk/images/project-img-1.JPG" alt="Geotechnical" width="152px" height="113px">
				<p>Geotechnical Investigations </p>
		</div>
		<div id="boxes"> <img src="http://kenrock.com.pk/images/project-img-2.jpg" alt="Pile Foundations" width="152px" height="113px">
				<p>Pile Foundations</p>
		</div>
		<div id="boxes"> <img src="http://kenrock.com.pk/images/project-img-3.JPG" alt="Well Drilling" width="152px" height="113px">
				<p>Well Drilling</p>
		</div>
		<div id="boxes"> <img src="http://kenrock.com.pk/images/project-img-4.JPG" alt="Aquifer Study" width="152px" height="113px">
				<p>Aquifer Study</p>
		</div>
</div>

The ids on the inner divs are unnecessary because they can be targeted form the parent.

e.g. boxesContainerRow1 div{}

I would have used a list for those lists of images and you should have used the same code for the next row as there is no need for yet more ids.

A structure like this would be more suitable.


<ul class="gallery">
		<li><img src="../images/project-img-1.JPG" alt="Geotechnical" width="152px" height="113px"><span>Geotechnical Investigations</span></li>
		<li><img src="../images/project-img-2.jpg" alt="Pile Foundations" width="152px" height="113px"><span>Pile Foundations</span></li>
		<li><img src="../images/project-img-3.JPG" alt="Well Drilling" width="152px" height="113px"><span>Well Drilling</span></li>
		<li><img src="../images/project-img-4.JPG" alt="Aquifer Study" width="152px" height="113px"><span>Aquifer Study</span></li>
</ul>

You can of course style it exactly the same as before by targeting the correct elements.

Avoid using empty clearing divs as they are not needed (apart from some old ie bugs). Either clear the container that follows the float or if containing floats is the problem then contain the floated child with overflow:hidden on the parent or used the :after (clearfix) method if visible overflow is needed (see css faq on floats).

Avoid the small heights on the elements in the footer as they are not really needed either and you seem to be making the height smaller than the font-size.

3

thanks i got your point, i will do it and let you know, if i got a problem

4

[QUOTE=Paul O’B;5089308]Hi,


<ul class="gallery">
		<li><img src="../images/project-img-1.JPG" alt="Geotechnical" width="152px" height="113px"><span>Geotechnical Investigations</span></li>
		<li><img src="../images/project-img-2.jpg" alt="Pile Foundations" width="152px" height="113px"><span>Pile Foundations</span></li>
		<li><img src="../images/project-img-3.JPG" alt="Well Drilling" width="152px" height="113px"><span>Well Drilling</span></li>
		<li><img src="../images/project-img-4.JPG" alt="Aquifer Study" width="152px" height="113px"><span>Aquifer Study</span></li>
</ul>

sir, can you tell me what should be CSS of it, i can replace and delete unwanted coding

5

Much the same as you had before but with new classes:


ul.gallery{
	margin:0 0 20px;
	padding:0;
	list-style:none;	
	clear:both;
	width:100%;
	overflow:hidden;
}
ul.gallery li {
	width: 150px;
	float: left;
	padding: 3px;
	margin-top: 20px;
	border:dotted 1px #000;
}
ul.gallery span {
	text-align:center;
	font-size:65%;
	font-weight:bold;
	display:block
}

They were originally the styles for #boxes.