DIV with overflow 1

[Mighty]

Hi Folks,

I use the following code:

<DIV STYLE="height: 268; overflow: auto;">
</DIV>

to simulate frames in that all my page content is stored within that DIV and a scrollbar appears if there is more content than room - if you know what I mean.

You can view an example of this at:

http://iccgie.winstemp.com/links.asp

This works perfectly on almost every page of my site. However, there is one exception - the gallery page. This page just contains images and once I go over a certain number of images, the DIV starts to move down the page and the page format is completely distorted.

Does anyone have any idea why this is so.

The page in question can be found at:

http://iccgie.winstemp.com/members_gallery.asp

Don't mind the fact that there are no images. I am just using dummy data for test purposes - but it doesn't work even if the images exist.

Mighty

 

[BabyJeffy]

Worked fine for me in Firefox and Safari (both on MacOSX).

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Vragabond]

It breaks in IE but who knows what is IE's problem. I could not find anything conclusive during my quick test, but it is clear that it is not only the pictures that are messed up in IE6 on that page -- the menu appears low for me and jumps up only on hover.

Looking at the page you created is like a blast from the past. Tag names in uppercase, very seldom use of quotes, deprecated elements and no valid doctype. The latter would help you achieve more uniform look across browsers although you would have to sacrifice things like vertical center of the page. Now you need to ask yourself... is this centering worth the browser problems (because frankly your page looks like crap in my Mozilla) or should you use more modern techniques and create an accessible page that looks good cross browser. I personaly feel your page is too small as it only occupies a really small center part of my screen while most of the browser space goes unused.

 

[Mighty]

vragabond,

My client wanted a page where everything appeared on the browser screen with a minimum amount of scrolling for the user. So i basically designed the page for a 800x600 screen resolution. The page will fill your screen if you work at this resolution but appears in the centre at higher resolutions.

That is mainly why I want the page centred vertically. If I don't use the table centred vertically as I have now, are frames my only means of having the page vertically centred??

Mighty

 

[Mighty]

If I go down the frames route, do I add the DOCTYPE statement to the top level frame page or to the actual content page - or both?

Mighty

 

[Vragabond]

My client wanted a page where everything appeared on the browser screen with a minimum amount of scrolling for the user.

Funny enough, on some of your pages I need to scroll, although there is not enough content for me to need to. I need to because all the content is stuck into a tiny little box in the center of the screen while there's ample space all around. Plus, in my Mozilla, I cannot scroll the page via mousewheel. So your effort to reduce scrolling has resulted in more scrolling and more cumbersome scrolling at that. I wonder if that is the best idea. To actually achieve the least scrolling, I would opt for a fluid design which fits the browser window, regardless of the resolution client is using.

As for the centering, there is not much you could do, although there are some tricks to do it via absolute positioning, but I would not venture there.

 

[Mighty]

Don't even want to go through absolute positioning. As regards the resolution, I use 1024x768 and I think that it looks OK at this resolution. It fits the full screen at 800x600. Granted, if you go above 1024x768 it is going to be very small - but how many people are commonly using that resolution.

I know I should be designing for all users but I am trying to keep things as simple as possible as alot of the website users are not overly computer-literate. Most importantly, the client likes the design. However, while at present all members of this association use IE, that might not always be the case so I do need to look at cross-browser compatibility. Unfortunately, I am quickly running out of time.

So, bottom line, to keep to same design and fix the cross browser problems, are my best options to:

1. Introduce a full valid DOCTYPE to each page
2. Use frames to have the content centred on the page

Opinions please??

Thanks for all the feedback/advice vragabond.

Mighty

 

[Vragabond]

Granted, if you go above 1024x768 it is going to be very small - but how many people are commonly using that resolution.

14% according to W3Schools stats.

What to do depends on many things that you know and we don't. If you have users that love the design and don't mind the occasional problems in Geckos and have limited time then you should do the bare minimum to make it presentable. THe problem is the gallery in IE. I suggest you strip it down to minimum to discover the problem. Also, it is much better to use floats than a table and much easier, so if you could use that, that might help with your problem.

I wouldn't go with frames, since I see no need for that. I would eventually add a doctype to the pages but you need to see first how much of the design in IE breaks with that and how well you can repair it.

 

[Mighty]

Vragabond,

I appreciate all the advice and have another couple of questions. Firstly, can you explain "floats" - don't know what you mean by that. The only page that is giving me problems in IE is the gallery page. Everything else is fine. One option is to limit the number of images on the page and then just have a "Next Page" link - that will work - but I was hoping to have them all on one page.

When I add in a valid DOCTYPE and look at the effects in IE, the navigation bar on the left is a little distorted and all the content becomes horizontally centred. In addition, the page is no longer vertically centred which is the main reason why I didn't do it!!

Mighty

 

[Vragabond]

Look at nice presentation of floats at A list Apart: Practical CSS. This should give you all you want to redo the gallery with floats.

 

[Mighty]

Thanks vragabond. I will check that out

Mighty