SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Problem in Footer displaying on IE...

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The main problem is cause by this unclosed h2 here:

    Code:
    <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).
    Code:
    <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.
    Code:
    <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. #3
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks i got your point, i will do it and let you know, if i got a problem

  4. #4
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Paul O'B;5089308]Hi,


    Code:
    <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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Much the same as you had before but with new classes:

    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •