Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Website footer looks wrong on iPad

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30187
    cintia
    Member

    Hi guys,

    I have built a WordPress website and it looks fine on all browsers, but the footer isn’t spanning the whole site width on iPad. The footer contains a wrapper, a div with another background image, another footer wrapper and the footer itself:

    The CSS:

    #footer-wide{
    position:relative;
    background-image: url(../images/footer-bgd.gif);
    background-position: center top;
    background-repeat:repeat-x;
    background-color:#13110d /*very dark brown*/;
    margin: 0;
    padding: 0;
    clear:both;
    }

    #footer-logo {
    margin:0;
    position:relative;
    background-image:url(../images/logo-footer.png);
    background-repeat:no-repeat;
    background-position: top right;}

    #footer-wrap{
    width:1210px;
    margin:0 auto;
    position:relative;
    }

    #footer{
    position:relative;
    width:900px;
    background: none;
    margin:0 155px;
    padding: 0 0 20px 0;}

    The website: http://www.canadawestvets.com.

    Any ideas on how to solve the issue are welcome.

    Thank you!

    Cintia

    #80350
    noahgelman
    Participant

    Why do you have position relative everywhere? Not needed. Also. your site doesn’t validate. Go through and correct these issues and it might fix your ipad problem.

    http://validator.w3.org/check?uri=http%3A%2F%2Fcanadawestvets.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    #80348
    cintia
    Member

    Hi Noah, thank you for your reply.

    I have removed the position relative, and fixed the validation problems (except for 8 errors related to how the navigation is structured) – but it still looks the same.

    When I was trying to fix it before, I noticed that when I add some padding to the outer wrapper it makes the footer extend a bit more to the right-hand side, but it makes the scroll bar appear, since the width becomes 100% + the amount of padding added.

    Any other thoughts?

    Thank you!

    #80344
    noahgelman
    Participant

    hmm…. try moving your background color and background image from your body, to your html, and then move the footer-wide background color and image to the body. That way you can move the footer-logo background image to the footer-wide div and get rid of the footer-logo div entirely. Less nested divs means less problems. That should solve your issue or make it much easier to diagnose.

    #80336
    cintia
    Member

    Hi Noah,

    Thank you again for your reply. I don’t understand when you tell me to move the background image to the HTML. Do you mean I should hard code the background image in the HTML file, and assign the footer background to the body background in the CSS?

    Thank you.

    #80308
    noahgelman
    Participant

    I mean, you have a body tag right?
    Well enclosing that is an html tag.





    You can attach properties, images, backgrounds, and more to the html tag just like you would to any div.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.