Kay wrote:
> I am just learning CSS so hopefully I know enough to adequately
> explain what I am trying to do.
>
> I have been redesigning my website using CSS. I have a page (several
> actually) that displays differently in Firefox and IE (version 7).
>
> In Firefox if I make my browser too narrow to see the whole page then
> it just cuts off the left hand side.
>
> In IE7 if I do the same thing then it drops the images down below the
> vertical navigation bar. (Actually it does the same to the text if
> you make the browser narrow than a word.)
>
> I don't like IE7's behavior (which I assum is the same in IE6). How
> do I make it behave like FireFox does for this page?
>
> I am testing this at: http://www.fhng.org/nc-mountain-cabin-in-the-meadow.html
>
> Thanks for any suggestions,
> Kaye
Hi Kaye
Are you sure you want exactly what is happening in FF. Take another look and
observe that when you resize the width of the page, the large res image flys
out of the right side of the container since the content div will only expands
to the edge of the viewpoint of the page. This is normal standard behavior. The
image is two large for the content div.
What you are seeing with IE is an issue concerning hasLayout. Try these two
test to understand.
1) Paste this into your CSS temporary.
#content {zoom:1}
Now resize the page in IE and observe that now the whole content drops. This is
because you have given the content div layout.
2) Remove the nav div including the menu from the code temporary, save and
check offline in IE. Resize the width and observe that the image now forces the
scrollbar to appear as in FF, but IE is also enlarging the container div which
goes against the specs. Note, IE will follow the specs if in almost standard
mode (see below)
The image has by default hasLayout and elements with Layout coming after a
float, your nav div, will cause the behavior you are seeing and a lot more.
http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat
The res image could be vertical or even better use a data table. You may want
to reconsider your approach since your content div has a left margin of 200px,
so considering a screen resolutions of width 800px, you only have 550px to play
around with.
Another issue that you have is that you have the page in quirks mode with your
doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
With a URL in the doctype, you will only put Konqueror in quirks mode. All
other browsers will be in standard or almost standard mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
When IE is in quirks mode, it follows the old IE box model. This is why boxes
appear bigger in IE and break.
http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
Your`page doesn't validate and you have xml formatting (href="ccc.css" />) in
your html. Remove that xml formatting since it throws a whammy in the validater
causing false errors.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
I hope this helps.
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
