Skewed page??

  • Unknown's avatar

    Hi,

    I have a little question… about a month ago, basically from one day to another something strange happened to my blog. When entering the main page everything is fine, but if you click on something all the information (text, pics etc.) that comes up in the next window moves out to the right. What has happened?

    Thanks
    A

  • Unknown's avatar

    You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

  • Unknown's avatar

    If you are talking about this site, http://thehiddenpeople.com/ , then you have failed to set the width in .attachment, .post, .page to the same width you have declared in .page. Do the following.

    .attachment, .post, .page {
    width: 1000px;
    }
  • Unknown's avatar
    thehiddenpeople · Member ·

    THANK YOU!!!
    I’m going to try it at once!

  • Unknown's avatar
    thehiddenpeople · Member ·

    Hi!

    I’ve tried to do what you told me to do up here but unfortunately it didn’t work. At the moment it looks like this:

    .attachment,.post,.page {
    position:relative;
    width:604px;
    margin:0 auto;
    }

    .attachment .entry,.post .entry,.page .entry {
    overflow:hidden;
    }

    I tried to change the width into “1000” and I also tried to remove “position:relative;” and “margin:0 auto;” to make it look exactly like what you posted, but nothing works. The page continues to be lopsided.
    Do you have any other suggestions? I’m not very good at this and I’m going completely crazy here…

    Thank you so much for your time!

  • Unknown's avatar

    All you do is to change the width from 604px to 1000px. Don’t mess with anything else. If you are using the preview function to see the change, you might have to force refresh the preview page as it has been flakey lately in some browsers.

    Changing the width to 1000px works just fine for me in Firebug directly on your site.

  • Unknown's avatar
    thehiddenpeople · Member ·

    Hi!

    Thank you for your quick reply!
    It still doesn’t work properly. This time I changed the width into 1000px and saved the changes and skipped the preview page. The pictures are centered, but there is still a horisontal scroll-bar which lets me move the whole page and the title pf each topic is far off to the right. What could this be?

    Thank you for your time!

  • Unknown's avatar

    OK, it is another element causing the issue. In #content h2 in your CSS, change the width to 604px which is the width of the page content area.

    #content h2 {
    width:604px;
    }

    This is one of the reasons it is never a good idea to paste the entire stylesheet into the CSS edit window. What you want to do is to put into the window only the selectors and the specific declarations that you are changing or adding. This makes it much easier to see exactly what you have changed and what you have not, and also eliminates the possibility of conflicts arising between the original CSS and your changes.

  • Unknown's avatar
    thehiddenpeople · Member ·

    Hi!

    This is what my #content h2 looks like:

    #content h2 {
    font-size:1.22em;
    line-height:1.3em;
    text-align:center;
    font-weight:bold;
    }

    Where do I put in the width? Do I add it?

    Thanks!

  • Unknown's avatar

    Yes, just add it to the above.

  • Unknown's avatar
    thehiddenpeople · Member ·

    Sorry, it still doesn’t work.
    Attachment pages are still skewed and by adding width:1000px; to the #content h2 also messed with the main page, all titles got moved out to the right.
    Any other suggestions?

    Thank you for all your patience…

  • Unknown's avatar

    You know, the problem is trying to sort out exactly what you have done given that you pasted the entire stylesheet into the CSS edit window is a big job since we would have to go through both line by line and compare. I’m not sure what is messing things up, and I could continue changing things for another 3 or 4 days to get everything to align properly on all different page types. Most likely there is one change you have made that is messing everything up, but looking over things, it was not obvious so I had to look for ways to correct things. It might well be that each correction I make causes something else to break.

    My suggestion is to delete everything from the CSS edit window and start again and add only the specific selector and specific declaration you are adding or changing. As an example, if you wanted to change the color declaration in the following selector,

    h1.name span {
        background: none repeat scroll 0 0 #666666;
        color: #FFFFFF;
        display: inline;
        font: 1.28em/33px Arial,Helvetica,"Helvetica Neue",sans-serif;
        padding: 5px 10px;
        text-align: center;
        text-transform: uppercase;
    }

    all you would add to the stylesheet editor is this and then edit the hex color value.

    h1.name span {
        color: #FFFFFF;
    }

    This makes it much easier to see what you have changed and makes troubleshooting far easier.

  • Unknown's avatar
    thehiddenpeople · Member ·

    Hi there!

    I’ve been doing some investigation since we are two running this page and you are absolutely right, the entire stylesheet has been pasted into the CSS, due to the fact that neither of us is very good at editing CSS (something I guess is obvious by now…).

    What I do not understand is what actually caused the change in first place. I’ve been going over the different revisions of the stylesheet, and as far back as early September last year it’s identical to the way it looks now, which is strange since the skewness appeared only some month ago. In other words, it wasn’t caused by any editing of the stylesheet.

    To delete everything and start all over again doesn’t feel like a realistic option since I have no clue whatsoever on how to go on about it. I only started to dig into this problem when I realised that something was wrong with the page. Isn’t there a different way to solve this problem?

    Thank you once again for you patience!

  • Unknown's avatar

    Try removing this completely from your CSS and check things out.

    .attachment, .post, .page {
        margin: 0 auto;
        position: relative;
        width: 604px;
    }
  • Unknown's avatar
    thehiddenpeople · Member ·

    YOU ARE A GENIOUS!
    It worked. Thank you so so much!

  • Unknown's avatar

    You are welcome. I happened to notice that that bit wasn’t in the original CSS and when I deleted it everything seemed to go back to normal. It took us a while to get there, but we arrived.

  • The topic ‘Skewed page??’ is closed to new replies.