Scroll bars/overflow problem in IE

[Aidan]

Greetings all,

I'm trying to build a div based layout for a mambo template (work in
progress), and I'm having a strange problem, 2 acctually, with scroll
bars in IE. I've tried everything I can think of, but just can't get it
to display quite right. It's worth noting that the page displays
exactly as intended in Firefox.

First Problem:

http://africaourhome.com/mambo/index...d=18&Itemid=41

As you can (hopefully) see, the main content area is filled up, and the
overflow attribute is set to 'auto'. In firefox, I get the vertical
scroll bar, perfectly aligned, no problem... But in IE, the vertical
scroll bar is misaligned, and causes the horizontal scroll bar to
appear, which funnily enough, is also misaligned...

Second Problem:

http://africaourhome.com/mambo/index...id=1&Itemid=43

In this case, the content overflows both the right and bottom edges of
the element. Firefox puts the scroll bars in the right place, and I'm
happy, until I check the same page in IE and they're gone, rendering the
overflowed content unviewable...

Are these known bugs that are easily fixable via, or will I end up yet
another fledgling web-developer with dreams tableless layouts dashed by
those bastards in Redmond?

Any help would be appreciated... any at all...

Thanks in advance.

Regards,

Aidan

[Gérard Talbot]

Aidan wrote :

Greetings all,

I'm trying to build a div based layout for a mambo template (work in
progress), and I'm having a strange problem, 2 acctually, with scroll
bars in IE. I've tried everything I can think of, but just can't get it
to display quite right. It's worth noting that the page displays
exactly as intended in Firefox.

First Problem:

http://africaourhome.com/mambo/index...d=18&Itemid=41
As you can (hopefully) see, the main content area is filled up, and the
overflow attribute is set to 'auto'. In firefox, I get the vertical
scroll bar, perfectly aligned, no problem... But in IE, the vertical
scroll bar is misaligned, and causes the horizontal scroll bar to
appear, which funnily enough, is also misaligned...

Second Problem:

http://africaourhome.com/mambo/index...id=1&Itemid=43
In this case, the content overflows both the right and bottom edges of
the element. Firefox puts the scroll bars in the right place, and I'm
happy, until I check the same page in IE and they're gone, rendering the
overflowed content unviewable...

Are these known bugs that are easily fixable via, or will I end up yet
another fledgling web-developer with dreams tableless layouts dashed by
those bastards in Redmond?

Any help would be appreciated... any at all...

Thanks in advance.

Regards,

Aidan

I've looked at your stylesheet. In my opinion, you have developed an
overconstrained design. Some of these declarations do not make sense;
others are useless or unneeded. The problem with pixel-perfect design is
that it inevitably leads to more or less constrained design.
If you have tried everything, then try to remove useless declarations
(eg padding: 0 for div). Try to design with relative font-size, not
absolute font-size values. Your webpage is not scalable in MSIE 6 and
the layout breaks a little in Firefox when text-size is increased.

W3C Quality assurance tip for webmasters:
Good usage of CSS's font properties
Do not specify the font-size in pt, or other absolute length units. They
render inconsistently across platforms and can't be resized by the User
Agent (e.g browser).
Use relative length units such as percent or (better) em
http://www.w3.org/QA/Tips/font-size#goodpractice

Avoid mixing abs. pos. with rel. pos. if you can.
I can not figure out quickly and fast how to fix your 2 problems; it
would take considerably quite some time to examine and test your
webpages because your DOM tree is complex (deep) and your style
declarations are numerous. But the general rule should be to keep your
DOM tree as simple as possible, particularly avoiding very deeply nested
block-level elements: this is where browser differ more and where there
are more bugs. The best approach in fixing such layout bugs is to
simplify, reduce DOM tree and number of declarations, not to increase them.

HTH

Gérard
--
remove blah to email me

[kchayka]

Aidan wrote:

I'm trying to build a div based layout for a mambo template (work in
progress), and I'm having a strange problem, 2 acctually, with scroll
bars in IE.

http://africaourhome.com/mambo/index...d=18&Itemid=41

The scrollbars are the least of your problems, IMO. Since you already
have Firefox handy, zoom text on this page a couple notches. The layout
falls apart without much effort.

BTW, scrolling divs have known accessibility problems. They can be
difficult, if not impossible, to navigate via keyboard. Besides, they
are less than optimal where usability is concerned.

In my 1000+px high browser window, there's a puny box for the content
with half the window height wasted, plus a horizontal scrollbar! ish
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Beauregard T. Shagnasty]

kchayka wrote:

Aidan wrote:

http://africaourhome.com/mambo/index...d=18&Itemid=41

In my 1000+px high browser window, there's a puny box for the
content with half the window height wasted, plus a horizontal

Not only that, but my mouse wheel doesn't scroll the content, so I
must make a conscious effort to find the scrollbar of the <div>.

And then there is the flyspeck text - justified? - that I can hardly
read. Hopefully, that content will also become several paragraphs of
normal ragged-right text.

Consider also changing all of your font sizing to percents (100 of
them), and margins/padding and positioning to some value of em. This
will help when visitors resize because of poor vision.

--
-bts
-This space intentionally left blank.

[Aidan]

Aidan wrote:

Greetings all,

<snip>

Thanks for the feed back guys. I've redone the template using a table
based layout(damn you IE), taking into account most of what you said.

I'd be more than happy to get more feed back, but in any case thanks for
all the advice.

Cheers!

[kryps]

You fool. So, because you can't code a web-site professionally, and CSS was too much for you (which it isn't), you go and make it worse by laying out your template in a table object.

It is obvious you haven't been trained web development, because if you were, you'd know that a table is for tabular data, columns and rows of data, like a spreadsheet.

You just ruined your web-site by changing it to a legacy-table-based layout. It's not even a "web-site" anymore, it's a piece of uncompatible crap that will break on text-browsers, and hurt the handicapped (screen-readers).

---

Do us and yourself and the community a favor, and buy/read a book on "web standards"