Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Rogue div (ie fix required)

    Hi there,

    I'm having a problem that is IE specific(only certain versions though) and I'm sure it's just a simple fix but I'm struggling to find the correct wording to find a solution with google.

    The problem is on 'http://www.nottinghammaintenance.co.uk' - the footer keeps 'floating' infront of the main body, what I mean by that is it is just sticking itself in the middle of the screen or sometimes just overlapping the main body div. As I have said it seems to be only IE specific, Firefox, Safari and Chrome all seem to handle it fine.


    Any help/advice would be greatly appreciated.


    Tech details:

    I am using:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    Css pertaining to the footer:

    Code:
    #footer { 
    	clear:both;
    	height: 34px;
    	font-size:72%; 
    	padding: 0; 
    	background: #FFF url(../images/bgmain.jpg) repeat-y center;
    	position: relative;
    	margin-top: -100px; /* negative value of footer height */
    	height: 150px;
    	clear:both;
    }
    
    
    #footer .padding { padding: 10px 0px 0px 0px; }
    #footer .right { 
    	float:right; 
    	clear:right; 
    	text-align:right; 
    }
    #footer a{
    	color:#FFFFFF;
    }
    #footer a:hover{
    	color:#333333;
    }
    
    
    #footer #popular_links {
    	
    	background: url(../images/footer_bground.jpg);
    	background-position:center;
    	border: none;
    	width: 772px;
    	float:left; 
    	clear:both; 	
    	padding: 10px 0 0 0;
    	margin: 0 0 0 7px;
    	position:relative; 
    
    }
    
    #footer #popular_links .wrap {
    	height:1%; 
    	margin:16px 0; 
    	overflow:hidden;
    }
    
    #footer #popular_links dl {
    	border-left:1px solid #ddd; 
    	display:inline; 
    	float:left; 
    	line-height:15px; 
    	margin:0 -2px -400px; 
    	padding-bottom:400px; 
    	width:25%;
    	color:#ddd;
    }
    
    #footer #popular_links dt {
    	margin-bottom:4px;
    	padding:0 15px;
    
    }
    
    #footer #popular_links dd {
    	padding:0 10px 0px 0px;
    	line-height:15px;
    }
    link_footer {
    	padding: 0px 0px 0px 20px;
    	
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello m00f,
    You have some odd things there, like a 34px height on your footer that has 194px high links in it.
    Try these changes in your CSS:

    Code:
    body { 
    	margin:0px 0; 
    	padding:0; 
    	font: 74% Arial, Sans-Serif; 
    	color:#ccc;  
    	background: #343434 url(../images/bg.jpg) repeat-x;
    	line-height: 1.4em; 
    }
    
    
    .content { 
    	background: #FFF url(../images/bgmain.jpg) repeat-y center;
    	color: #ccc; 
    	margin: 0 auto; 
    	padding: 0; 
    	width: 787px;
    overflow: auto; 
    }
    
    /* HEADER 
    ---------------------------------------------------------------------------------------------------------------------------------------------------
    */
    #header { 
    	margin: 0; 
    	width: 787px; 
    	background: #FFFFFF url(../images/header.jpg) no-repeat center top;  
    	height: 166px; 
    	color: #FFF; 
    }
    
    #main { 
    background: #FFF; 
    width: 765px; 
    margin: 0 10px 0 10px; 
    color: #808080; 
    overflow: auto;
    }  
    
    
    
    #footer { 
    clear:both;
    /*height: 34px;*/
    	font-size:72%; 
    	padding: 0; 
    	background: #FFF url(../images/bgmain.jpg) repeat-y center;
    
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator -

    Thanks for replying so quickly, I have been away over christmas so apologies for taking so long to reply. I realise my code was in a bit of disarray, my apologies for that, over the course of 3 weeks I had been going back and forth editing the site. Usually I have a beta site I work from... With my frustration building, I ended up editing directly on the working site... Not good practice I know!

    Anyway, I have tried implementing the fixes you placed above - some of which I have left in, although by making the 'overflow:auto' on my main div I end up with scroll bars all over the place which isn't ideal.

    Is there anything else you can suggest?


    Many thanks in advance



    m00f

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    overflow:auto; can clear floats for you and, if scrollbars appear like is happening to you, it's a good indication of your box model being off.

    In .left_side you have a left padding of 10px.
    That makes 180px wide .hitems too wide to fit in .left_side.
    When figuring your box model, margin/padding/border all figure in to total width.

    You shoud also check with the validator. You have some very basic errors in your code. See the links about validtion in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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