Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    hello my fellow designer/developers...

    im having a little problem where my entire layout is moving from page to page...

    lets say i have "pg1" and "pg2", both of these pages have a layout of...

    <wrapper>
    header
    featured area
    body
    footer
    </wrapper>

    and the only difference between "pg1" and "pg2" is that on "pg1" the (featured area) has a height of "480px" and on "pg2" the (featured area) has a height of "250px", but when i go to "pg2" the entire layout is shifts to the left...

    i tried recreating "pg2" from "pg1" but every time i change the height of the (featured area) from "480px" to "250px" it shifts the entire layout to the left...

    im stumped and having been on this all night, i decided to seek out help... has anybody got a clue to what could be going on??

    heres a link to the aforementioned "pg1" - http://dbc.gl/1
    and heres a link to the aforementioned "pg2" - http://dbc.gl/2

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    On an iPhone so I can't see your source.

    Are you setting the body to margin:0; padding:0;

    To make sure the browser doesn't try to apply it's own definitions to the page?

  4. #3
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    yes i am, my actual code is...

    Code:
    html * {
        margin:0px;
        padding:0px;
    }
    
    body {
        background:#2d2d2d url('../img/footerBG.jpg') repeat center top;
        font-family: Century Gothic, sans-serif;
        font-size: 12px;
        margin:0px auto;
        padding:0px;
    }

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Try this. Instead of :
    html * { margin:0px; padding:0px; }

    put this at the very beginning of your CSS:
    * { margin:0px; padding:0px; }
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    Quote Originally Posted by AlphaMare, post: 219087
    Try this. Instead of :
    html * { margin:0px; padding:0px; }

    put this at the very beginning of your CSS:
    * { margin:0px; padding:0px; }
    tried that out but unfortunately its still the same...

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I just checked out both pages in Chrome - actually dragged one of them so I could overlay it on the first - I don't see any shift...What browser were you using?
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    Quote Originally Posted by AlphaMare, post: 219097
    I just checked out both pages in Chrome - actually dragged one of them so I could overlay it on the first - I don't see any shift...What browser were you using?
    i am using Google Chrome aswell, if you look closely at your screenshot, you will see what i am saying as-well... the 2nd page shifts to the left a bit... you can open up the previous 2 links in 2 separate tabs and click back and forth between the 2 tabs and watch the "dbC" logo as it shifts back and forth or look at the same screenshot below...


  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    chrome has a neat little tool, fixing the issues pointed out by chrome audit may address your issue.
    Attached Images Attached Images

  10. #9
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    Quote Originally Posted by Webzarus, post: 219106
    chrome has a neat little tool, fixing the issues pointed out by chrome audit may address your issue.
    Thanks for the tip, I have played around with this tool, but still no change.... I just checked in Firefox but its the same as Chrome... anyone else have any ideas?

  11. #10
    Junior Member Charles Francis's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Member #
    29065
    Also as an update... Not sure if this matters or not... but I just ran my html & css files through the W3C Markup & CSS Validation Services over at http://validator.w3.org/ and over at http://jigsaw.w3.org/css-validator/

    all of my files validate according to the the W3C web standards but my global.css file validated but had some warnings, once again im not sure this matters in this specific case but i thought i would point it out maybe it would help someone help me in this matter...

    the link to view the warnings can be found here http://jigsaw.w3.org/css-validator/v...ng=en#warnings

    thanks again to everyone taking time to help me with this, i really appreciate it! ;-)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com