Webpage width problem

Discussion in 'HTML' started by Marc Bradshaw, Jul 1, 2005.

  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
     
    Marc Bradshaw, Jul 1, 2005
    #1
    1. Advertising

  2. Marc Bradshaw

    Vladdy Guest

    Marc Bradshaw wrote:
    > 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
     
    Vladdy, Jul 1, 2005
    #2
    1. Advertising

  3. Vladdy wrote:
    > 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
     
    Marc Bradshaw, Jul 1, 2005
    #3
  4. Marc Bradshaw

    Vladdy Guest

    Marc Bradshaw wrote:
    > 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.

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

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

    > Thanks for your help.
    >
    > Marc


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

    --
    Vladdy
    http://www.klproductions.com
     
    Vladdy, Jul 1, 2005
    #4
  5. 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.


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

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

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

    > 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
     
    Marc Bradshaw, Jul 1, 2005
    #5
  6. Marc Bradshaw wrote:
    > 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/csstemplates/spider1.html

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Jul 1, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    785
    Bruce Barker
    Oct 10, 2005
  2. Replies:
    1
    Views:
    432
  3. Paul
    Replies:
    14
    Views:
    854
    Alexey Smirnov
    Jun 19, 2008
  4. sifar
    Replies:
    5
    Views:
    429
  5. soren625
    Replies:
    2
    Views:
    379
    soren625
    Dec 12, 2006
Loading...

Share This Page