Stymied by the faulty IE box model! Help!

Discussion in 'HTML' started by Andrew, Oct 15, 2008.

  1. Andrew

    Andrew Guest

    Hi all,

    I'm looking for help with a problem with a site I'm trying to design.
    I've asked various friends and colleagues who know more than I do, and
    they all say that it's down to the faulty IE box model. At that point,
    though, they go fuzzy and disappear with better things to do....

    The site in question is here: www.theitservice.co.uk

    The site renders properly in IE7, Firefox and Opera. But in IE6, it
    looks... well... rubbish. It's only early days for the site yet - I'm
    still playing around with ideas for the design and for navigation
    systems, but if anyone could explain what I need to do to improve the
    issue I'd be grateful.

    And while we're at it (and I know I'm opening myself up here for
    torrents of abuse!) if anyone has any general comments along the lines
    of "You really should/shouldn't do such-and-such" I'd also be
    grateful...

    Many thanks in advance.

    Regards
    Andrew Richards
     
    Andrew, Oct 15, 2008
    #1
    1. Advertising

  2. Andrew

    Els Guest

    Andrew wrote:

    > The site in question is here: www.theitservice.co.uk
    >
    > The site renders properly in IE7, Firefox and Opera. But in IE6, it
    > looks... well... rubbish. It's only early days for the site yet - I'm
    > still playing around with ideas for the design and for navigation
    > systems, but if anyone could explain what I need to do to improve the
    > issue I'd be grateful.


    You have floated the content column to the left, and given it a left
    margin. You can choose either, I think it's the combination that makes
    IE6 go off. IE6 reckons your left margin should not cover the left
    column, so it gives you 132px for the left column, 150px for the left
    margin, total 182px space on the left of the content column.

    --
    Els http://locusmeus.com/
     
    Els, Oct 15, 2008
    #2
    1. Advertising

  3. Andrew

    dorayme Guest

    In article
    <>,
    Andrew <> wrote:

    > I'm looking for help with a problem with a site I'm trying to design.
    > I've asked various friends and colleagues who know more than I do, and
    > they all say that it's down to the faulty IE box model. At that point,
    > though, they go fuzzy and disappear with better things to do....
    >
    > The site in question is here: www.theitservice.co.uk
    >
    > The site renders properly in IE7, Firefox and Opera. But in IE6, it
    > looks... well... rubbish.


    First thing to do is to look at

    <http://validator.w3.org/>

    and fix up the errors.

    --
    dorayme
     
    dorayme, Oct 15, 2008
    #3
  4. Andrew

    Andrew Guest

    On Oct 15, 10:04 am, dorayme <> wrote:
    > In article
    > <>,
    >
    >  Andrew <> wrote:
    > > I'm looking for help with a problem with a site I'm trying to design.
    > > I've asked various friends and colleagues who know more than I do, and
    > > they all say that it's down to the faulty IE box model. At that point,
    > > though, they go fuzzy and disappear with better things to do....

    >
    > > The site in question is here:www.theitservice.co.uk

    >
    > > The site renders properly in IE7, Firefox and Opera. But in IE6, it
    > > looks... well... rubbish.

    >
    > First thing to do is to look at
    >
    > <http://validator.w3.org/>
    >
    > and fix up the errors.
    >
    > --
    > dorayme


    Thanks for the tip. I have tried this, and got 7 errors (less than I
    had feared!), mostly to do with tags (such as DIV ?!!) not being
    supported by my DOCTYPE. Again, my lack of knowledge lets me down here
    - I used DreamWeaver to write the code, and don't really know how to
    get around this.

    I don't, however, think it came up with anything which would cause the
    page to render as it does in IE6....

    Thanks, but still a little baffled...

    Andrew
     
    Andrew, Oct 15, 2008
    #4
  5. Andrew

    Andrew Guest

    On Oct 15, 9:36 am, Els <> wrote:
    > Andrew wrote:
    > > The site in question is here:www.theitservice.co.uk

    >
    > > The site renders properly in IE7, Firefox and Opera. But in IE6, it
    > > looks... well... rubbish. It's only early days for the site yet - I'm
    > > still playing around with ideas for the design and for navigation
    > > systems, but if anyone could explain what I need to do to improve the
    > > issue I'd be grateful.

    >
    > You have floated the content column to the left, and given it a left
    > margin. You can choose either, I think it's the combination that makes
    > IE6 go off. IE6 reckons your left margin should not cover the left
    > column, so it gives you 132px for the left column, 150px for the left
    > margin, total 182px space on the left of the content column.
    >
    > --
    > Els                    http://locusmeus.com/


    I've just tried removing the float:left attribute, but this caused
    a) no improvement in the arrangement of the divs at the top (the menu
    and the banner), and
    b) caused the "links" box on the right to drop to the bottom of the
    page - now below the content column because the content column is no
    longer floating left....

    Arrgh!

    Any more ideas out there?

    Thanks for the suggestions so far, though...

    Andrew
     
    Andrew, Oct 15, 2008
    #5
  6. Andrew wrote:
    > On Oct 15, 10:04 am, dorayme <> wrote:
    >> In article
    >> <>,
    >>
    >> Andrew <> wrote:
    >>> I'm looking for help with a problem with a site I'm trying to design.
    >>> I've asked various friends and colleagues who know more than I do, and
    >>> they all say that it's down to the faulty IE box model. At that point,
    >>> though, they go fuzzy and disappear with better things to do....
    >>> The site in question is here:www.theitservice.co.uk
    >>> The site renders properly in IE7, Firefox and Opera. But in IE6, it
    >>> looks... well... rubbish.

    >> First thing to do is to look at
    >>
    >> <http://validator.w3.org/>
    >>
    >> and fix up the errors.
    >>
    >> --
    >> dorayme

    >
    > Thanks for the tip. I have tried this, and got 7 errors (less than I
    > had feared!), mostly to do with tags (such as DIV ?!!) not being
    > supported by my DOCTYPE. Again, my lack of knowledge lets me down here
    > - I used DreamWeaver to write the code, and don't really know how to
    > get around this.
    >


    DIV is not supported by XHTML, div is! Sounds like your are using XHTML
    without understanding what XHTML is. Advise you use HTML 4.01 strict. I
    see no reason why you are using XHTML anyways...

    > I don't, however, think it came up with anything which would cause the
    > page to render as it does in IE6....


    XHTML and IE inability to support it isn't helping. The hodgepodge of
    CSS and presentational HTML, conditional comments, and (document.write a
    no-no in XHTML) complicates debugging. Strip is down and clean it up and
    then styling a bit at a time and isolate your problems.
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 15, 2008
    #6
  7. Andrew

    BessieBee Guest


    >And while we're at it (and I know I'm opening myself up here for
    >torrents of abuse!) if anyone has any general comments along the lines
    >of "You really should/shouldn't do such-and-such" I'd also be
    >grateful...


    I don't like gray text on a white background. As far as I'm concerned
    (I'm just a regular person who spends far too much time on the
    computer and is always trying to learn more about building web pages)
    a light text color on a white or light background serves no useful
    purpose other than making me move on to a page I can easily read.

    --
    BessieBee
    "Why isn't the number 11 pronounced onety-one?"
     
    BessieBee, Oct 15, 2008
    #7
  8. Andrew

    Andrew Guest

    On Oct 15, 2:03 pm, BessieBee <> wrote:
    > >And while we're at it (and I know I'm opening myself up here for
    > >torrents of abuse!) if anyone has any general comments along the lines
    > >of "You really should/shouldn't do such-and-such" I'd also be
    > >grateful...

    >
    > I don't like gray text on a white background.  As far as I'm concerned
    > (I'm just a regular person who spends far too much time on the
    > computer and is always trying to learn more about building web pages)
    > a light text color on a white or light background serves no useful
    > purpose other than making me move on to a page I can easily read.
    >
    > --
    > BessieBee
    > "Why isn't the number 11 pronounced onety-one?"


    Hmmm... Okay, thanks for the input. I'll think about changing the font
    colour... once I can get this ***** problems sorted!

    Andrew
     
    Andrew, Oct 15, 2008
    #8
  9. Andrew

    Bergamot Guest

    Andrew wrote:
    >
    > The site in question is here: www.theitservice.co.uk
    >
    > The site renders properly in IE7, Firefox and Opera.


    ....except when the viewport is less than ~950px wide. Or did you intend
    for everything on the right side to be chopped off?

    > But in IE6, it
    > looks... well... rubbish.


    The CSS looks like generated code - i.e. bloated - and should be trimmed
    if you expect to easily decipher it. The menu code is also full of hacks
    that you probably don't understand (I've gotten some good things off
    CSSplay myself, but I don't think this is one of them). Maybe "son of
    suckerfish" is less convoluted, but all of these drop-down menu things
    are user unfriendly.

    > And while we're at it (and I know I'm opening myself up here for
    > torrents of abuse!) if anyone has any general comments along the lines
    > of "You really should/shouldn't do such-and-such" I'd also be
    > grateful...


    You really should avoid anything that requires such exacting pixel
    precision. Web media is flexible by nature and you have no control over
    the user's system or browser settings, so your best bet is to stick with
    a flexible layout, that is one that adapts gracefully without self
    destructing. Test it with various window and text size settings to nip
    those layout bugs from the start, rather than find out it's broken once
    the site goes "live".

    --
    Berg
     
    Bergamot, Oct 15, 2008
    #9
  10. Andrew

    Andrew Guest

    On Oct 15, 4:43 pm, Bergamot <> wrote:
    > Andrew wrote:
    >
    > > The site in question is here:www.theitservice.co.uk

    >
    > > The site renders properly in IE7, Firefox and Opera.

    >
    > ...except when the viewport is less than ~950px wide. Or did you intend
    > for everything on the right side to be chopped off?
    >
    > > But in IE6, it
    > > looks... well... rubbish.

    >
    > The CSS looks like generated code - i.e. bloated - and should be trimmed
    > if you expect to easily decipher it. The menu code is also full of hacks
    > that you probably don't understand (I've gotten some good things off
    > CSSplay myself, but I don't think this is one of them). Maybe "son of
    > suckerfish" is less convoluted, but all of these drop-down menu things
    > are user unfriendly.
    >
    > > And while we're at it (and I know I'm opening myself up here for
    > > torrents of abuse!) if anyone has any general comments along the lines
    > > of "You really should/shouldn't do such-and-such" I'd also be
    > > grateful...

    >
    > You really should avoid anything that requires such exacting pixel
    > precision. Web media is flexible by nature and you have no control over
    > the user's system or browser settings, so your best bet is to stick with
    > a flexible layout, that is one that adapts gracefully without self
    > destructing. Test it with various window and text size settings to nip
    > those layout bugs from the start, rather than find out it's broken once
    > the site goes "live".
    >
    > --
    > Berg


    OK. That's helpful, thanks. I was aware that the page gets cut off
    with a width of less than ~950 - I'd thought that this is pretty
    standard? Sites such as the BBC and Yahoo behave similarly....
    However, I certainly take your point about the menu system. I've been
    trying to find a system which allows for expansion in time to come,
    and allows menus with sub-menus.

    I'll have another look around - are there any sites that you can
    recommend for finding such code? I do have some understanding of CSS
    and HTML, but as you can tell, it's not great, particularly when it
    comes to the topic of conditional stylesheets etc to cope with
    different browsers. CSS & HTML is one (ok - two) of those topics that
    I find really interesting but just don't have the time to investigate
    thoroughly... which of course shows when I come to develop a proper
    site :)

    Thanks again for your feedback - it's much appreciated.

    Regards
    Andrew
     
    Andrew, Oct 15, 2008
    #10
  11. Andrew

    Neredbojias Guest

    Neredbojias, Oct 16, 2008
    #11
    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. Zyd

    Faulty SRAM

    Zyd, Jul 12, 2004, in forum: VHDL
    Replies:
    0
    Views:
    734
  2. Naveen K Kohli

    td tag generating faulty code

    Naveen K Kohli, May 13, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    471
    David Lloyd
    May 13, 2005
  3. Taare
    Replies:
    2
    Views:
    505
    David Carlisle
    Apr 27, 2005
  4. Neil Cerutti

    Faulty encoding settings

    Neil Cerutti, Oct 17, 2006, in forum: Python
    Replies:
    3
    Views:
    399
    Neil Cerutti
    Oct 17, 2006
  5. Casey Rodarmor

    Dot operator magic has me stymied...

    Casey Rodarmor, Oct 29, 2008, in forum: Python
    Replies:
    1
    Views:
    289
    Arnaud Delobelle
    Oct 29, 2008
Loading...

Share This Page