okay im working on about the fourth or fith build of this site
i have essentially a 3 column layout with the middle column fluid and a navbar floating to the left in the margin, the right margin is left clean (at the moment anyway)
i have a min width of 300px specifyed for the middle column (the margins are set to 197px) when i reduce the size of my browser window once the middle column gets to 300px in moves down the page a few hundred pixels but appart from this acs normally, ie it doesnt get any smaller than 300px
also it seems that the window, no matter what size it is, cannot contain the whole page, you always have to scroll horizontally to see the last 10 or so px, i have all my widths set to 100% so i dont understand why its doing this
In IE7 there is a red bar at the bottom of the menu area. It doesn't appear there at all in firefox!
Put some text in the currently empty footer, just out of interest.
Just done it myself - it makes the footer appear in firefox.
Okay, in IE7 it is dropping below your div #navbar, for which you have set a height of - wait for it , wait for it - 182px. Try removing that line for a start.
Firefox doesn't like the space in the file name for your header image.
background-image:url(Images/Logos/ATS Heritage.png); Remove the space and I bet it turns up in Firefox. You should never have spaces in your file names, some browsers can choke on this as in this case.
Change the width from 100% to 99% and the horizontal scroll should disappear.
I found I needed 98% for the width of the #main to make the horizontal scrollbar disappear in FF.
I'd have set the min-width on #main and at 770px. and not on the #body div inside it. This gives a min width of a bit more than 300px for #body, but that is not important IMHO (I'll just go measure what it gives in a second or two)
EDIT: Seconds later - it makes #body come out at 380px, so you could set it lower still on #main if necessary, but as your dropping div problem appears at 313px width for #body, I'd leave it at a larger value
You will need a conditional statement to make min-width work in IE6 and below however.
i have managed to make my site work very nicely except for one issue
with the footer when the window width is changed it pushes my right footer (float right) to the left side of the element its positioned against..
if that makes sence......it floats to the left of the thing it is floating right (or meant to be) of
Bookmarks