Page 1 of 1

Screen width problem

Posted: Sat Jul 16, 2005 11:44 pm
by 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/

Posted: Sun Jul 17, 2005 3:26 am
by 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

Posted: Sun Jul 17, 2005 1:35 pm
by 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.

Posted: Fri Nov 18, 2005 1:12 pm
by 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.

HELP

Posted: Thu Dec 01, 2005 12:50 am
by 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....

Posted: Thu Dec 01, 2005 5:21 am
by 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.

Posted: Thu Dec 01, 2005 5:38 am
by 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.

Image

Posted: Thu Dec 01, 2005 8:35 am
by 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.

Posted: Sat Dec 10, 2005 10:22 pm
by 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.

Posted: Sat Dec 10, 2005 10:30 pm
by garvinhicking
Try this in your style.css:

Code: Select all

.serendipity_comments {
  width: 400px;
}
Regards,
Garvin