Grow your CSS skills. Land your dream job.

Margin alignment moves when resizing window

  • # November 29, 2009 at 9:40 am

    Hi, I have been going nuts trying to figure out what happened to my code.

    On my site, http://tweeaks.com, when you re-size the browser window you will see the header and footer areas become mis-aligned. The header seems to move to the left away from the right side more than the footer does too, which I can’t understand.

    Link where you can see the issue:
    http://tweeaks.com
    Stylesheet:
    http://tweeaks.com/wp-content/themes/Bi … /style.css

    There are a number of embedded styles too, but I don’t think they are causing the problem.

    The theme I have is a free theme I got a while ago, and basically hacked and modified to hell. I’ve been needing to just strip all the needless code from it but haven’t had the time to sit down and do that.

    Any help would be much appreciated. Thanks.

    Jared

    # November 29, 2009 at 9:55 am

    ok I fixed the header issue, but the footer still doesn’t line up when resizing the window.

    # January 17, 2010 at 8:32 am

    I realize I posted this almost 2 months ago, but I realized that I must be doing something wrong in the way I write CSS.

    I still didn’t solve the original problem, and now have the same problem on a new wordpress theme I’m developing.

    When you resize the window, you can see the header and footer background image pad inward away from the edge of the browser. When It’s viewed in full screen you don’t notice it. I have tried so many things to fix it and I can’t figure out what it is that causes it.

    My test blog where I’m developing my new theme is at http://tweakurpages.com, and you can also still see the problem in the footer on my main blog http://tweeaks.com.

    Anyone have any ideas?

    # January 17, 2010 at 9:46 am

    You don’t say which browser or platform you are having the problem with. I tested on Firefox in Mac, and on Safari, IE7 and 8 on XP and cannot see your problem in any of them. The only thing I saw was that you need a png fix for IE6.

    P.S. You have a typo in tweakurpages – Beginner has only one g.

    # January 19, 2010 at 1:38 pm

    It does it in all browsers, and Im using a PC but im sure the OS doesnt matter.

    What you have to do is take the browser off full screen. And resize it smaller, and scroll horizontally all the way to the right, and you will see the header and footer backgrounds aren’t 100% full width. If you make the window larger and smaller, you will see the backgrounds pad in and out, as though there is a set percentage padding-right set somewhere, but there isnt.

    I’ve tried so many things and nothing has seemed to work.

    Tweakurpages is just a test site, i dont care about typos, but thanks for letting me know.

    # January 21, 2010 at 4:16 pm

    I’m not quite sure, but on a quick look at your html and css of Tweeak.com i noticed that your footer is 950px wide and you put a image in with a width greater than 950px. I would never do that… Beside that your content is 960px, while your footer as seen in a browser is wider than the content. Weird.

    # January 21, 2010 at 8:58 pm

    Good point. I didn’t realize it wasn’t the same size. I blame it on my tiny screen of my laptop that I work on. I’ll try fixing that and see if it helps.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".