Footer Style Issues, Incorrect Display

Discussion in 'CSS' started by WebDev Solutions, Apr 10, 2012.

  1. #1
    Hi Guys,

    Hoping this can be a quick fix- it's been driving me mad for the last 45 minutes, and I have no qualms in accepting I'm not gifted when it comes to CSS! If you view our website here, you will see we have footer links. However, if you view our page source, you'll also see that we should have a second line of footer links that isn't displaying correctly.

    I've looked in our style sheet and found the following. Can anyone guide me to the values I need to change, and to what?

    /* = footer styles
    
     ------------------------------------------ */
    
    
    
    #footer{
    
    	clear:both;
    
    	padding-top:20px;
    
    	background:url(../images/page.jpg) left bottom repeat-x;	
    
    	height:97px;
    
    	overflow:hidden;
    
    }
    
    #footer p{
    
    
    	line-height:107px;
    
    	text-align:center;	
    
    }
    
    #footer p a{
    
    	padding:0 8px;
    
    	font-size:14px;
    
    }
    Code (markup):
    Any help would be gratefully received. Please don't PM offering to fix it for me, I want to learn.

    WebDev
     
    Solved! View solution.
    WebDev Solutions, Apr 10, 2012 IP
  2. #2
    Hi WebDev Solutions,

    Here's the solutions for your issues.

    Just edit your CSS:
    in #footer p {

    remove line-height: 107px;

    so it will be,
    #footer p {
    text-align: center;
    }

    in #footer {
    remove: height: 97px;
    and replace padding with padding: 13px 0;
    and in background: instead of bottom replace with top
    e.i( url("../images/page.jpg") repeat-x left top)

    so it will be,

    #footer {
    background: url("../images/page.jpg") left top repeat-x;
    clear: both;
    overflow: hidden;
    padding: 13px 0;
    }

    in footer background for safety you can add bg color, so it will be,

    #footer {
    background:#CCC url("../images/page.jpg") left top repeat-x;
    clear: both;
    overflow: hidden;
    padding: 13px 0;
    }

    Hope this helps.
    Btw, i'm a front-end developer... if you need PSD to xHTML/CSS just let me know

    Regards,
    alfieindesings
     
    alfieindesigns, Apr 11, 2012 IP
  3. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #3
    Alfieindesigns,

    Thank you! Perfect, clear to follow and worked like a charm.

    If you have Skype- I'd appreciate it if you PM me your handle.

    I'll have some future projects and could do with a freelancer on a job-to-job basis.

    WebDev
     
    WebDev Solutions, Apr 11, 2012 IP
  4. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #4
    Hi WebDev,

    Skype sent via PM. Just add me so we can talk.

    Regards,
    alfieindesigns
     
    alfieindesigns, Apr 11, 2012 IP
  5. William Rauen

    William Rauen Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A bounce rate of less than 30% is good, a 50% bounce rate is average, over 60% is something you should be concerned about and an excess of 80% is definitely a matter for major concern (of course depending on the type of site it is).
     
    William Rauen, Apr 24, 2012 IP