473,324 Members | 2,541 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Scroll bars/overflow problem in IE

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
Aug 29 '05 #1
5 3658
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
Aug 29 '05 #2
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.
Aug 29 '05 #3
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.
Aug 29 '05 #4
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!
Aug 30 '05 #5
kryps
1
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"
Sep 6 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: David Rwj Cherry CS2000 | last post by:
is there any way to disable or lock vertical scroll bars on a browser window? im a newbie and i just don't want them to appear on my screen. sometimes they appear on IE but not on mozilla. any...
3
by: Emil Dotchevski | last post by:
I have a table that is at 100% width, which contains a <TD> that is 80% of that. In the <TD> I want to put pre-formatted text (the output from a C++ compiler, to be more precise) and I'd like the...
4
by: justdummy | last post by:
Hi, I am struggling with a problem for sometimes. I need to display a table in a html and if the height of the table goes beyond 200 px then a vertical scrollbar should alone appear without any...
9
by: kjs | last post by:
Is there any was to control the color of the scrollbars when using the 'overflow: scroll' attribute? TIA, Karl
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
1
by: Miked | last post by:
Hi: I have overflow: scroll style property set in a bunch of containers. Want to be able to suppress the horizontal scroll bar, as I know that the contents of my containers won't go over the...
3
by: buntyindia | last post by:
Hi I am creatng a Scrollable Table following is my code. This table is working fine in Mozilla but in IE 6 it is not showing the Scroll Bars.. Please Hellp... Regards, <html>...
3
by: Ron Croonenberg | last post by:
Hello, I have a script that basically creates output in a frame in a browser. However when the page gets longer I want to scroll them. Of course I can add scroll bars to the frame and scroll...
6
by: bgold12 | last post by:
I was using quirks mode (without a doctype) and set the overflow CSS property to :auto for the body tag like so: <body style="overflow:auto"> And it worked; it got rid of IE's default scroll...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.