Preface area background width is not 100% with horizontal scroll bar [#512234]

Preface area background width is not 100% with horizontal scroll bar. Can be seen in both 6.x-1.9 and 6.x-2.x-dev, with any browser (I tried FF, IE 8, Google Chrome).

It can be observed when browser window is narrower, so horizontal scroll bar shows up. The scroll to the right edge.

See attached screenshot.

Comment	File	Size	Author
#3	acquia_marina.preface_width_fixed.png	54.39 KB	iva2k
#2	acquia_marina.width_fix.patch	287 bytes	iva2k
	acquia_marina.preface_width.png	53.33 KB	iva2k

Comments

Comment #1

jwolf commented 7 July 2009 at 07:00

Status:

Active

» Closed (duplicate)

This theme does not support screen resolutions below 1024x768

http://drupal.org/node/449968
http://drupal.org/node/339115

Comment #2

iva2k commented 7 July 2009 at 15:26

Status:

Closed (duplicate)

» Needs review

Status	File	Size
new	acquia_marina.width_fix.patch	287 bytes

@jwolf:
Thanks for pointing out duplicates. I was not able to locate them using my keywords "preface width".
>This theme does not support screen resolutions below 1024x768
Understood. But I can't tell my website visitors to not reduce size of the window. Acquia_marina is the most solid theme out there. It outperforms Garland by miles. Garland breaks in so many ways. This bug is the only visual problem with AM that I encountered on 3 of websites I used it on. If it is fixed, it will make AM 100% solid.

Looking into this problem, I found out that there are "width: 960px" in style.css on some elements, but html and body widths are not set, so they are "width: 100%" by default. All browsers calculate 100% width of html and body to be width of actual window, ignoring width of included elements, which makes it less than 960px when window is narrow. (Yes, it is counter-intuitive and plain wrong. There are many illogical places in CSS implementations, but browsers can't/won't fix them because it will break 99% of all websites).

The simplest fix I found is single-liner "html { min-width: 975px; }". 975px is used instead of 960px because there is "padding-left: 15px" on one of the elements which adds to 960px of inner element.

Attached is a patch with the above fix. I verified that it fixes problem for IE8, FF3, Google Chrome. Please review for inclusion into 6.x-2.x-dev.

Regards,