IE6 and IE7 shift text down in small browser window

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

kklickman@gmail.com - 12 Aug 2006 22:42 GMT

I've got a page with two columns: one floats left, the other doesn't
float. The page displays fine in Netscape no matter what. In IE (both
6 and 7), it looks fine as long as the browser window is more than 800
pixels wide. However, when the browser window gets narrow, IE pushes
the text in the right-hand column to below where the left-hand column
ends. I can't figure out where I went wrong.

Sample page is http://www.walkinministryofhope.org/services.html -- all
the pages on the site behave the same way.

CSS is http://www.walkinministryofhope.org/styles.css. Some of the
main bits are:

.header { width: 780px ;
height: 80px ;
}

.maintext { background-color: #FCFCFC ;
width: 642px ;
margin-left: 135px ;
}

.leftmenu { background-color: #FCFCFC ;
float: left ;
width: 133px ;
}

I've tried playing with the widths, margins and padding of each of
these sections, but nothing seems to work.

Thanks for any help you can give me!

Karen

Reply to this Message

Chris F.A. Johnson - 13 Aug 2006 01:31 GMT

> I've got a page with two columns: one floats left, the other doesn't
> float. The page displays fine in Netscape no matter what. In IE (both
[quoted text clipped - 25 lines]
> I've tried playing with the widths, margins and padding of each of
> these sections, but nothing seems to work.

Have you tried deleting "width: XXpx" altogether? (Except on the
.leftmenu, and there, and in the largin-left, replace px with an
apropriate width in ems.)

If you have a window narrower than 800px how can you expect to fit
more than that horizontally?

Signature

Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Reply to this Message

Karen - 13 Aug 2006 02:53 GMT

> Have you tried deleting "width: XXpx" altogether? (Except on the
> .leftmenu, and there, and in the largin-left, replace px with an
> apropriate width in ems.)
>
> If you have a window narrower than 800px how can you expect to fit
> more than that horizontally?

I don't expect it to fit more than 800px horizontally; I just expect it
to leave the text in place when it adds the horizontal scroll bar.

If I don't specify the widths of the divs, how do I control how wide
the text is on the right-hand side of the screen? I really hate
columns of text that are wider than about 500px, but I'm not sure how
to control the layout if I don't limit the width of the text area.

*sigh* Back to the drawing board, I suppose.

Thanks for your suggestions.

Reply to this Message

Chris F.A. Johnson - 13 Aug 2006 03:25 GMT

>> Have you tried deleting "width: XXpx" altogether? (Except on the
>> .leftmenu, and there, and in the largin-left, replace px with an
[quoted text clipped - 10 lines]
> columns of text that are wider than about 500px, but I'm not sure how
> to control the layout if I don't limit the width of the text area.

How do you know how much text is contained in 500px? It could be
more or less than the amount you think is best. If you need to
specify widths, do it in ems, and/or use max-width (also specified
in ems).

Signature

Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Reply to this Message

Karen - 13 Aug 2006 19:33 GMT

> How do you know how much text is contained in 500px? It could be
> more or less than the amount you think is best. If you need to
> specify widths, do it in ems, and/or use max-width (also specified
> in ems).

I don't honestly care how much text is in 500px; I just know that if my
browser window is maximized to 1278px wide, I don't want text going all
the way across from one end to the other. But if the window is only
800px wide, I do want the text to take up most of the window. I tried
max-width, and it works great in Netscape, but IE6 doesn't appear to
support it.

And, yeah, ems, pixels, whatever. If I specify a width in any units,
it leads to the problem with IE shoving the text down. I'd like to
know how I can constrain the width without causing that problem in IE.

Thanks for your input. It does help clarify things.

Karen

Reply to this Message

John Dann - 15 Aug 2006 15:45 GMT

>... I'd like to
>know how I can constrain the width without causing that problem in IE.

I don't know what the cognoscenti think of this solution but it worked
for me. See:

http://www.svendtofte.com/code/max_width_in_ie/

JGD

Reply to this Message

Chris Sharman - 29 Aug 2006 13:39 GMT

>> How do you know how much text is contained in 500px? It could be
>> more or less than the amount you think is best. If you need to
[quoted text clipped - 11 lines]
> it leads to the problem with IE shoving the text down. I'd like to
> know how I can constrain the width without causing that problem in IE.

You're confusing pixels with size.
The appropriate font size is whatever the user says it is, and the
appropriate line length is best expressed in terms of font size (ems).
Eg - I have a super-duper 2000*1600 CAD/CAM monitor - I won't appreciate
you shrinking your column width down to a quarter of my screen, because
my font size is set quite large (in pixels) because my screen is very
high resolution - 1200 pixels isn't that wide.
My co-worker uses the same screen at 800*600, because she's vision
impaired, and can't easily view websites (and their images) large enough
any other way.
There's no way the same number of pixels for both of us is ever going to
be anywhere near sensible. Use ems, and we both get something reasonable.

And on the subject of usability - if you force horizontal scrolling on
small windows you make the text extremely tedious to read.

Chris

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2006

IE6 and IE7 shift text down in small browser window