Webpage width problem

Marc Bradshaw · Jul 1, 2005

I've redesigned our corporate website, but the design breaks when you
take it below a certain width in IE. It's fine in Firefox, and I
presume Opera (although I haven't checked yet). As far as I can see,
it's just IE being picky.

I've altered the CSS and HTML over and over but can't seem to fix this
problem. It makes the website basically unusable at 800x600. Does
anyone else have any ideas?

The design is online at http://preview.beasolutions.com/

Ignore the content - it's just filler text at the moment. Also, I know
there are some other problems, including a couple of broken images, and
there are some alignment problems with the menu on the left, but those
will wait - I need to get this problem fixed first.

I would be grateful for any help you can offer. Thanks in advance.

Marc

Vladdy · Jul 1, 2005

Marc said:
I've redesigned our corporate website, but the design breaks when you
take it below a certain width in IE. It's fine in Firefox, and I
presume Opera (although I haven't checked yet). As far as I can see,
it's just IE being picky.

I've altered the CSS and HTML over and over but can't seem to fix this
problem. It makes the website basically unusable at 800x600. Does
anyone else have any ideas?

The design is online at http://preview.beasolutions.com/

Ignore the content - it's just filler text at the moment. Also, I know
there are some other problems, including a couple of broken images, and
there are some alignment problems with the menu on the left, but those
will wait - I need to get this problem fixed first.

I would be grateful for any help you can offer. Thanks in advance.

Marc

IE does funny things with floats. I would suggest using a more robust
method for 3 column layout.

Also consider:
- using font units for blocks that contain text i.e. the navigation
block. Things start looking bad after one Ctrl+ in Gecko and break apart
after two.
- specifying min and max width for the page body. When a page is too
narrow, you header graphics look weird with the bloke's picture being
overlapped by the blue square. When a page is too wide the reading the
main content becomes a pain in the neck, literally.

Marc Bradshaw · Jul 1, 2005

Vladdy said:
IE does funny things with floats. I would suggest using a more robust
method for 3 column layout.

Such as?

Also consider:
- using font units for blocks that contain text i.e. the navigation
block. Things start looking bad after one Ctrl+ in Gecko and break apart
after two.

Yeah, I noticed this. What do you mean by 'font units'? Are you
suggesting I use fixed font sizes (eg. pt or px) for the menu and such?

- specifying min and max width for the page body. When a page is too
narrow, you header graphics look weird with the bloke's picture being
overlapped by the blue square. When a page is too wide the reading the
main content becomes a pain in the neck, literally.

I wasn't aware you could do this. Presumably this is achieved with a
CSS property assigned to the <body>? If so, which one?

Thanks for your help.

Marc

Vladdy · Jul 1, 2005

Marc said:
Such as?

My personal favorite is the absolute positioning of the side columns
with corresponding left and right margins for the content.

Yeah, I noticed this. What do you mean by 'font units'? Are you
suggesting I use fixed font sizes (eg. pt or px) for the menu and such?

Quite the opposite, use em or ex to specify the width of a block such as
navigation.

I wasn't aware you could do this. Presumably this is achieved with a
CSS property assigned to the <body>? If so, which one?

Real browsers understand min-width and max-width CSS properties. You can
achieve close enough behavior using proprietary expression() to
calculate CSS value in sub-par HTML renderer aka IE

Thanks for your help.

Marc

See if this helps:
http://webdeveloper.klproductions.com/demos/layoutoptions.html

Marc Bradshaw · Jul 1, 2005

Vladdy said:
My personal favorite is the absolute positioning of the side columns
with corresponding left and right margins for the content.

Okay, I'll have a play with that method.

Quite the opposite, use em or ex to specify the width of a block such as
navigation.

Okay, I'm completely lost. You were referring to the menu on the left?
Are you saying I should use em or ex to specify the width of the left
column? What would this achieve?

Real browsers understand min-width and max-width CSS properties. You can
achieve close enough behavior using proprietary expression() to
calculate CSS value in sub-par HTML renderer aka IE

What's "expression()"?

See if this helps:
http://webdeveloper.klproductions.com/demos/layoutoptions.html

Thanks, I'll have a look at this over the weekend.

Thanks again for your help.

Marc

Beauregard T. Shagnasty · Jul 1, 2005

Marc said:
Okay, I'm completely lost. You were referring to the menu on the
left? Are you saying I should use em or ex to specify the width of
the left column? What would this achieve?

If you define your column widths in em (my choice), the column will
also expand when a visitor increases his/her text size. And your
content will not overlap the column boundary.

See examples here, especially the three-column layout:
http://www.benmeadowcroft.com/webdev/csstemplates/spider1.html

Big problem I need to solve with some unix utils	1	Jun 19, 2022
div width problem in IE	7	May 1, 2008
Help figuring out a directory permission change problem	1	May 12, 2023
My webpage layout displayed abnormally in IE	9	Jul 31, 2011
Firefox Fixed Width TD problem	5	Jan 9, 2008
CSS Problem with webpage	1	Oct 8, 2003
<td width=...> in IE	5	Oct 23, 2007
Problem with webpage (table cropped)	8	May 27, 2006

Webpage width problem

Marc Bradshaw

Vladdy

Marc Bradshaw

Vladdy

Marc Bradshaw

Beauregard T. Shagnasty

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads