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.
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.
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.
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?
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.
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.
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
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
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.