Webpage width problem

#1

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

#2

Marc Bradshaw wrote:

Quote:

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.

--
Vladdy
http://www.klproductions.com

#3

Vladdy wrote:

Quote:

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

Such as?

Quote:

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?

Quote:

- 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

#4

Marc Bradshaw wrote:

Quote:

Vladdy wrote:

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

Such as?

My personal favorite is the absolute positioning of the side columns

with corresponding left and right margins for the content.

Quote:

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?
Quite the opposite, use em or ex to specify the width of a block such as

navigation.

Quote:

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

Quote:

Thanks for your help.

Marc

See if this helps:
http://webdeveloper.klproductions.co...utoptions.html

--
Vladdy
http://www.klproductions.com

#5

Vladdy wrote:

Quote:

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

Such as?

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.

Quote:

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?

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?

Quote:

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

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()"?

Quote:

See if this helps:
http://webdeveloper.klproductions.co...utoptions.html

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

Thanks again for your help.

Marc

#6

Marc Bradshaw wrote:

Quote:

Vladdy wrote:

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?

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...s/spider1.html

--
-bts
-This space intentionally left blank.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Webpage width problem

alt.html alt.html

Webpage width problem - 07-01-2005 , 07:24 AM

Re: Webpage width problem - 07-01-2005 , 09:20 AM

Re: Webpage width problem - 07-01-2005 , 10:29 AM

Re: Webpage width problem - 07-01-2005 , 11:41 AM

Re: Webpage width problem - 07-01-2005 , 01:02 PM

Re: Webpage width problem - 07-01-2005 , 01:32 PM