layout problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
gregf
Forum Newbie
Posts: 4
Joined: Thu May 25, 2006 11:56 pm

layout problem

Post by gregf »

Having a problem with the layout of a page i'm doing. When you resize the browser window the page starts to shrink as it should. The part that i do not like is at a certain point text overflows out of the menu, my notice box, i have had problems with the header image jumping to the bottom of the page. Image not currently on the page i am trying to rework that. Pretty new to css and xhtml. Looking for any advice on reworking this problem.

http://www.newlungsforgeorge.org/beta/

I have been to other pages where i could resize the browser window small as i wanted so i have to scroll up and over a mile just to see this input box for example :) I know this is not a common thing users would be doing but it is a issue for users with 800x600 resolution. Mainly i do not see this problem on other pages including this one and i want to know why it's doing it and how i can fix it.

/me stops rambling
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I would guess it is because you are using a fluid (or liquid) layout. That means the sizes of your block level elements are expressed as percentages instead of fixed values.

This is not necessarily a bad thing. Fixed width layouts can cause resize/browser resolution issues when users are viewing on smaller browsers (PDA's, cell phones, etc). Fluid layouts, in my opinion, are a god thing. It just takes a little bit of getting used to.
gregf
Forum Newbie
Posts: 4
Joined: Thu May 25, 2006 11:56 pm

Post by gregf »

Thats what i had understood from reading on other sites. Is there any way to continue using percentages instead of fixed widths and stop my menu from overflowing? Should i make the menu fixed with? How can i deal with images jumping around the page on smaller resolutions for example 800x600 and even 640x480. On the original site which i am now trying to redesign http://www.newlungsforgeorge.org we had a three column layout. Anytime a user with a small resolution would go to the page the header would push into the context menu. Shouldn't i been having less problems with the fluid layout?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You would think. The problem is that the block level elements that are fluid (% vs valued) are relative to the browser. So when the browser shrink, the percentages get smaller relative to the rendering.

As far as I know there really isn't a fix for this. I have the same problem with many of my CSS based fluid designs.
gregf
Forum Newbie
Posts: 4
Joined: Thu May 25, 2006 11:56 pm

Post by gregf »

Thanks for putting it in perspective for me, i will need to go to a fixed width based on my needs for this site.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Code: Select all

min-height: 500px; min-width: 500px;
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Does IE support with attributes in CSS? I had heard that there some bottom border hack that you had to use in order to get IE to render block level heights correctly.
gregf
Forum Newbie
Posts: 4
Joined: Thu May 25, 2006 11:56 pm

Post by gregf »

Wow thats exactly what i was hoping to hear at first! I need to find out if this is going to work in IE thought. I wish i really dont' have to worry about those users :P
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

gregf wrote:Wow thats exactly what i was hoping to hear at first! I need to find out if this is going to work in IE thought. I wish i really dont' have to worry about those users :P
Your site renders fine at 800x600, as long as you don't have a huge sidebar.

So simply accept that at low resolutions (below 800x600), users using IE will have a minor degradation in quality.

Users with resolutions below 800x600 make up *less than one percent of users* now: http://www.upsdell.com/BrowserNews/stat_trends.htm

Of that less than 1%, those using IE is.. well, not worth worrying about. :)
Post Reply