Page 1 of 1

layout problem

Posted: Sun May 28, 2006 8:32 pm
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

Posted: Sun May 28, 2006 9:19 pm
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.

Posted: Sun May 28, 2006 9:32 pm
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?

Posted: Sun May 28, 2006 11:27 pm
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.

Posted: Mon May 29, 2006 5:29 pm
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.

Posted: Mon May 29, 2006 7:56 pm
by John Cartwright

Code: Select all

min-height: 500px; min-width: 500px;

Posted: Mon May 29, 2006 8:20 pm
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.

Posted: Mon May 29, 2006 8:37 pm
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

Posted: Mon May 29, 2006 8:42 pm
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. :)