Screen width problem

[Kelvin Mace]

I have had two different setups do the same thing and I can't figure out why (or what I may have done wrong).

In both instances I am using 0.8.1 and after I have been working on the blog for a few days, I suddenly get a change in the screen width, where the entries require horizontal scrolling in order to see the whole page.

Is this a bug or something I have screwed up?

You can see the problem here:

http://www.fourfootedmafia.com/serendipity/

and here:

http://alderaan.us/serendipity/

[Oliver]

Hm, I looked at your blogs and I did not have to scroll horizontal in order to see the whole page. I tested with IE6 (Maxthon), FireFox 1.0.4 and Opera 8.0. I use a screen resolution of 1152*864px.

Regards,

- Oliver

[MySchizoBuddy]

no u didn't screw it up.
the problem is ur content and images
for eg in this entry "Sex makes men do strange things". U have an image of 585 px wide, in order to show the whole image the middle column has to expand, Ur left column is 222px wide and ur right column is
middle column = 631px (inc 585px image)
left column = 222px
right column = 222 px
total width = 1075 px which is larger than 1024px, hence u see a scroll bar

Now u have a couple of options,
1. u can decrease the width of the image in ur post "Sex makes men do strange things". which i think u don't want to do.
2. play with margins and padding around ur columns and decrease the width of ur right column. that will be the best option.

U got some really nice pictures and i don't want u scalling them. However u will have to scale just one non important one and it will be fixed.

1. The second image (Buckles #1 - #3 on sale) on the left sidebar will have to be decreased. decrease it by 20 px in width.
2. Then open up ur style.css file and edit these lines
find the #content, #serendipityRightSideBar and #serendipityLeftSideBar and replace it with the ones shown below.

Code: Select all

#content {
    padding: 10px 5px 10px 5px;
    margin: 0px;
    width: auto;
}

#serendipityRightSideBar {
    width: 170px;
    border-left: 1px dashed #000000;
    padding: 10px 0px 10px 5px;
    vertical-align: top;
}

#serendipityLeftSideBar {
    width: 170px;
    border-right: 1px dashed #000000;
    padding: 10px 5px 10px 5px;
    vertical-align: top;
}

that should work. let me know.

[Josh]

I do not use big pictures, but some of my readers have the same problem and need to scroll horizontal in order to see the whole page.

They do NOT need to do it on the frontpage http://atlanticreview.org/, but need to do so when they click on "extended entry" or if they go directly to a page like http://atlanticreview.org/archives/168- ... rmany.html

I am using the default theme and did not change it:

Code: Select all

#mainpane {
    border-bottom: 1px solid #000000;
    margin: auto;
    width: 100%;
    border-top: 0px;
    background-color: #FFFFFF;
    border-top: 1px solid #000000;
}

#content {
    padding: 10px;
    margin: 10px;
    width: auto;
}

#serendipityRightSideBar {
    width: 170px;
    border-left: 1px dashed #000000;
    padding: 10px;
    vertical-align: top;
}

#serendipityLeftSideBar {
    width: 170px;
    border-right: 1px dashed #000000;
    padding: 10px;
    vertical-align: top;
}

I thought auto width works on all screen resolutions.

[Josh]

I would really appreciate some help with the screen width problem.

Horizontal scrolling is really annoying.

The problem seems to be limited to Firefox. Many readers use firefox, however....

[judebert]

I visited with FireFox 1.0.6. I didn't have to scroll horizontally until I increased the text size. As I did, the sidebars remained constant width, while the center content expanded, forcing my screen to expand. (Of course it'll be more of a problem for users with smaller screens or bigger fonts.)

I think the problem is with the Add Comment form. I'll bet the problem lies with this CSS:

Code: Select all

td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
    font-size: 10px;
    padding: 2px;
    width: 400px;
}

...Or not. I just tried editing it in EditCSS, and nothing I did would get the page to come under the FireFox width. Now I'm a bit confused. Maybe I'm just too tired; I'm going to go to bed.

[Wizard]

I looked at your site with IE. No problem. I didn't have to scroll horizontally. I tried at both 1280x1024 and 1024x768 resolution. I also reduced the window to about three inches across and while it did make for some interesting entry area, it still didn't scroll. I did notice an error on your page however. Here is the screen shot.

[Josh]

Judebert, thank you very much for trying. I believe it has something to do with the comments. More specifically perhaps the BBCode or this plugin with the line breaks, which I have switched on for the comments.

Wizard, thank you for pointing out this the error. The error you describe is the result of starting the URL with www. It was my fault, I should not have started my signature with www. IE does not give error messages when using http://atlanticreview.org.

[Trench]

I'm having the same problem with Firefox but it only seems to be entries with comments.

Here's the main page http://blog.thetrenchcoat.com/

And here's an entry with comments

http://blog.thetrenchcoat.com/archives/ ... -News.html

The mainpane width increases in firefox and I'm using a 1024x768 resolution.

[garvinhicking]

Try this in your style.css:

Code: Select all

.serendipity_comments {
  width: 400px;
}

Regards,
Garvin