html cross-browser help

Discussion in 'HTML' started by Kevin Audleman, Feb 7, 2008.

  1. Hi,

    I've written some code that works fine in Firefox and Safari, but not
    IE 6 on the PC. I can't seem to figure out what is wrong with my code,
    especially because the other browsers render it just fine.

    I was wondering if anybody could take a look and tell me -OR- point me
    in the direction of a good reference for browser compatibility issues.

    The site is here: http://quick2m.com/izzy/index.php

    And the header is the issue (big gaps show up).

    Thanks,
    Kevin
     
    Kevin Audleman, Feb 7, 2008
    #1
    1. Advertising

  2. Kevin Audleman

    dorayme Guest

    In article
    <
    >,

    Kevin Audleman <> wrote:

    > I've written some code that works fine in Firefox and Safari, but not
    > IE 6 on the PC. I can't seem to figure out what is wrong with my code,
    > especially because the other browsers render it just fine.
    >
    > I was wondering if anybody could take a look and tell me -OR- point me
    > in the direction of a good reference for browser compatibility issues.
    >
    > The site is here: http://quick2m.com/izzy/index.php
    >
    > And the header is the issue (big gaps show up).


    Look at
    <http://validator.w3.org/check?verbose=1&uri=http://quick2m.
    com%2Fizzy%2Findex.php> first and fix what you can.

    --
    dorayme
     
    dorayme, Feb 7, 2008
    #2
    1. Advertising

  3. Kevin Audleman

    rf Guest

    "Kevin Audleman" <> wrote in message
    news:...
    > Hi,
    >
    > I've written some code that works fine in Firefox and Safari, but not
    > IE 6 on the PC. I can't seem to figure out what is wrong with my code,
    > especially because the other browsers render it just fine.
    >
    > I was wondering if anybody could take a look and tell me -OR- point me
    > in the direction of a good reference for browser compatibility issues.
    >
    > The site is here: http://quick2m.com/izzy/index.php
    >
    > And the header is the issue (big gaps show up).


    You are abusing tables for layout and this is one of the hazards. You can
    *not* ensure that those cells containing the images will not expand to
    contain their content.

    Watch what happens when you increase your font size a few notches, even with
    Firefox. Everything falls apart.

    Why are you using images of text? The is a severe accessibility problem.

    --
    Richard.
     
    rf, Feb 7, 2008
    #3
  4. On Feb 6, 6:37 pm, "rf" <> wrote:
    > "Kevin Audleman" <> wrote in message
    >
    > news:...
    >
    > > Hi,

    >
    > > I've written some code that works fine in Firefox and Safari, but not
    > > IE 6 on the PC. I can't seem to figure out what is wrong with my code,
    > > especially because the other browsers render it just fine.

    >
    > > I was wondering if anybody could take a look and tell me -OR- point me
    > > in the direction of a good reference for browser compatibility issues.

    >
    > > The site is here:http://quick2m.com/izzy/index.php

    >
    > > And the header is the issue (big gaps show up).

    >
    > You are abusing tables for layout and this is one of the hazards. You can
    > *not* ensure that those cells containing the images will not expand to
    > contain their content.
    >
    > Watch what happens when you increase your font size a few notches, even with
    > Firefox. Everything falls apart.
    >
    > Why are you using images of text? The is a severe accessibility problem.
    >
    > --
    > Richard.


    Richard,
    I'm somewhat new to this and didn't realize I was abusing tables. I
    tried increasing font size in Firefox and just like you said my design
    fell apart. Yikes! Is there a better method for doing this?

    A lot of the text-in-images is just there as a placeholder. In the end
    the only text that will be an image is the logo.

    Kevin

    P.S. dorayme thanks for pointing out the validator to me!
     
    Kevin Audleman, Feb 7, 2008
    #4
  5. On Feb 7, 11:55 am, Kevin Audleman <> wrote:
    > I'm somewhat new to this and didn't realize I was abusing tables.


    Well that only depends on who you are talking to. There are several
    divisions here. One is over using tables for layout. There are those
    that say it is ALWAYS a no-no, and those that say "why deal with all
    this browser incompatibility CSS crap and go with tables until the
    browsers get it right." You decide.

    You should probably try to work with CSS design, but if you are
    between a rock and a hard place remember that MOST of your visitors
    will be arriving using IE.

    > I tried increasing font size in Firefox and just like you said my design
    > fell apart. Yikes! Is there a better method for doing this?


    Again, that depends. If you want your layout to look about the same
    on everyone's computer, then no, you are doing it right. A few people
    that come to your site with ridicules large font setting may not see
    your site the way you want them to. But remember they deal with this
    on a daily bases and are very used to making adjustments as needs (or
    they just leave your site and never return) Will them leaving hurt
    your business? Maybe, that depends on what you are selling. No one
    can answer that for you but you.

    Now, If you don't care how things are laid out, and are only concerned
    with the content that is there, then yes, there is a better way.
    Google flexible design and you will receive a ton of examples.
     
    Travis Newbury, Feb 7, 2008
    #5
  6. Kevin Audleman

    dorayme Guest

    In article
    <
    m>,
    Kevin Audleman <> wrote:

    > > The site is here: http://quick2m.com/izzy/index.php


    > didn't realize I was abusing tables. I
    > tried increasing font size in Firefox and just like you [...rf...] said my design
    > fell apart. Yikes! Is there a better method for doing this?
    >
    > A lot of the text-in-images is just there as a placeholder. In the end
    > the only text that will be an image is the logo.
    >
    > Kevin
    >
    > P.S. dorayme thanks for pointing out the validator to me!



    There is no inherent reason that a table layout should "break"
    when you enlarge text size. This sort of breaking is usually
    caused by the author trying to too heavily constrain the table
    layout with cell size dimensions. Being fluid and using tables
    are not quite incompatible bedfellows.

    nevertheless, you might read:

    http://www.sitepoint.com/article/tables-vs-css

    --
    dorayme
     
    dorayme, Feb 7, 2008
    #6
  7. Kevin Audleman

    Sam UK Guest

    dorayme wrote:

    > There is no inherent reason that a table layout should "break"
    > when you enlarge text size. This sort of breaking is usually
    > caused by the author trying to too heavily constrain the table
    > layout with cell size dimensions. Being fluid and using tables
    > are not quite incompatible bedfellows.
    >
    > nevertheless, you might read:
    >
    > http://www.sitepoint.com/article/tables-vs-css


    That article is a bit misleading due to its all-or-nothing approach. In
    reality, you have the option of using mostly CSS for layout but relying
    on tables to achieve things that are unreasonably difficult to do with
    CSS, such as side by side columns of equal height or footers that are
    aligned to the bottom of the browser window.

    Most of my sites are pure CSS except for tabular data, but given the
    choice between messing around with fiddly and over-complex CSS hacks
    like faux columns to achieve an effect that is trivial with a table, I
    don't feel much guilt about using a table.
     
    Sam UK, Feb 8, 2008
    #7
  8. Kevin Audleman

    dorayme Guest

    In article <>,
    Sam UK <> wrote:

    > dorayme wrote:
    >
    > > There is no inherent reason that a table layout should "break"
    > > when you enlarge text size. This sort of breaking is usually
    > > caused by the author trying to too heavily constrain the table
    > > layout with cell size dimensions. Being fluid and using tables
    > > are not quite incompatible bedfellows.
    > >
    > > nevertheless, you might read:
    > >
    > > http://www.sitepoint.com/article/tables-vs-css

    >
    > That article is a bit misleading due to its all-or-nothing approach. In
    > reality, you have the option of using mostly CSS for layout but relying
    > on tables to achieve things that are unreasonably difficult to do with
    > CSS, such as side by side columns of equal height or footers that are
    > aligned to the bottom of the browser window.
    >
    > Most of my sites are pure CSS except for tabular data, but given the
    > choice between messing around with fiddly and over-complex CSS hacks
    > like faux columns to achieve an effect that is trivial with a table, I
    > don't feel much guilt about using a table.


    That is fair enough. The interesting question is how difficult is
    it to achieve the column look? For many standards compliant
    browsers, there are many strategies that any keen person or
    professional author should be able to manage without too much
    trouble. A lot depends on the details of what is wanted and the
    requirements for cross browser purposes can lead to mess and
    fiddle.

    You should feel even less guilt when you realise that it is
    pretty hard to make first class semantic markup and columns
    without tables.

    There is another approach you can take. Go as much as your skill
    allows for semantic markup, design as much as you can without
    needing the visual look of equal length columns that have their
    own coloured backgrounds. And when you do fancy to have such,
    keep the requirements simple so that you can at least reduce the
    fiddle to a minimum.

    As it happens, I am looking into this business of equal columns
    and have a small set of pages at
    <http://netweaver.com.au/floatHouse/> which only yesterday was
    added to with a page 10. I am in the middle of making a page on
    faux columning too, and more on this are planned as it is seems
    so popular a desire to make columns that look like such.

    I am aware that it is one thing to expound on some of the
    possible strategies and real world applications, that maybe it is
    because it is a bit fiddly that it makes for a nice hobby. <g>

    --
    dorayme
     
    dorayme, Feb 8, 2008
    #8
  9. Kevin Audleman

    Ben C Guest

    On 2008-02-08, dorayme <> wrote:
    [...]
    > As it happens, I am looking into this business of equal columns
    > and have a small set of pages at
    ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > added to with a page 10. I am in the middle of making a page on
    > faux columning too, and more on this are planned as it is seems
    > so popular a desire to make columns that look like such.


    Your nested three-column design (Fig 2) is interesting, but it does
    require that the text in the pink column is shorter than the higher of
    the yellow and green ones, and that the text in the yellow column is
    shorter than that in the green.
     
    Ben C, Feb 8, 2008
    #9
  10. Kevin Audleman

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-02-08, dorayme <> wrote:
    > [...]
    > > As it happens, I am looking into this business of equal columns
    > > and have a small set of pages at
    > ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > > added to with a page 10. I am in the middle of making a page on
    > > faux columning too, and more on this are planned as it is seems
    > > so popular a desire to make columns that look like such.

    >
    > Your nested three-column design (Fig 2) is interesting, but it does
    > require that the text in the pink column is shorter than the higher of
    > the yellow and green ones, and that the text in the yellow column is
    > shorter than that in the green.


    Actually, I have just this minute uploaded some changes, mainly
    to the explanatory spiels within the columns on this one. I only
    made this page yesterday and am putting in some extra details as
    I see fit.

    In the engine for this technique - the iterative use of "nuclear"
    families - it *is* true that one must know, for each nuclear
    component, which of the two siblings within is the longest in
    advance.

    The text in the pink column certainly needs to be less than the
    higher of the two children in the first nuclear family - as you
    say.

    A severe general limitation for some sites that are under a lot
    of development! But in many cases, it just is known which is
    longest of a number of columns and so some people might find this
    sort of technique useful.

    If I had the power to influence, I would advise people not to be
    over keen on equal height table style cols.

    (I think page 11 will be on using that background image technique
    one reads about. I have made some demos already and it is a lot
    of fun and quite easy to do.)

    --
    dorayme
     
    dorayme, Feb 8, 2008
    #10
  11. Kevin Audleman

    Ben C Guest

    On 2008-02-08, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2008-02-08, dorayme <> wrote:
    >> [...]
    >> > As it happens, I am looking into this business of equal columns
    >> > and have a small set of pages at
    >> ><http://netweaver.com.au/floatHouse/> which only yesterday was
    >> > added to with a page 10. I am in the middle of making a page on
    >> > faux columning too, and more on this are planned as it is seems
    >> > so popular a desire to make columns that look like such.

    [...]
    > (I think page 11 will be on using that background image technique
    > one reads about. I have made some demos already and it is a lot
    > of fun and quite easy to do.)


    I like this one, which has been posted here before:

    http://www.nrkn.com/3ColEqualPositioned/

    It seems to me one of the more natural ways of solving the problem.
     
    Ben C, Feb 8, 2008
    #11
  12. Kevin Audleman

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-02-08, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2008-02-08, dorayme <> wrote:
    > >> [...]
    > >> > As it happens, I am looking into this business of equal columns
    > >> > and have a small set of pages at
    > >> ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > >> > added to with a page 10. I am in the middle of making a page on
    > >> > faux columning too, and more on this are planned as it is seems
    > >> > so popular a desire to make columns that look like such.

    > [...]
    > > (I think page 11 will be on using that background image technique
    > > one reads about. I have made some demos already and it is a lot
    > > of fun and quite easy to do.)

    >
    > I like this one, which has been posted here before:
    >
    > http://www.nrkn.com/3ColEqualPositioned/
    >
    > It seems to me one of the more natural ways of solving the problem.


    Yes, I have seen Nick's page before. Interesting. It uses a bit
    of absolute positioning too. There are quite a few ways to go
    about these things.

    So far, I have been keeping to more purely floating layouts in
    those pages of mine and not really tackling practical whole page
    layouts, more rather about the sorts of things floats are, what
    they can be used to build elementarily etc.

    --
    dorayme
     
    dorayme, Feb 8, 2008
    #12
  13. Kevin Audleman

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-02-08, dorayme <> wrote:
    > [...]
    > > As it happens, I am looking into this business of equal columns
    > > and have a small set of pages at
    > ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > > added to with a page 10. I am in the middle of making a page on
    > > faux columning too, and more on this are planned as it is seems
    > > so popular a desire to make columns that look like such.

    >
    > Your nested three-column design (Fig 2) is interesting, but it does
    > require that the text in the pink column is shorter than the higher of
    > the yellow and green ones, and that the text in the yellow column is
    > shorter than that in the green.


    I don't know whether I made it clear but one of my motives for
    this particular method was its basic simplicity of concept and
    its generational potential. The idea being you start with a
    nuclear family and keep adding them as children in further
    nuclear families to build as many columns as you please. The sort
    of thing that has a simple algorithmic base (with the limitation
    you point out about having to know longest col). Perhaps it would
    be easy to program a wysiwyg to make it all?

    --
    dorayme
     
    dorayme, Feb 9, 2008
    #13
  14. Kevin Audleman

    Ben C Guest

    On 2008-02-09, dorayme <> wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> On 2008-02-08, dorayme <> wrote:
    >> [...]
    >> > As it happens, I am looking into this business of equal columns
    >> > and have a small set of pages at
    >> ><http://netweaver.com.au/floatHouse/> which only yesterday was
    >> > added to with a page 10. I am in the middle of making a page on
    >> > faux columning too, and more on this are planned as it is seems
    >> > so popular a desire to make columns that look like such.

    >>
    >> Your nested three-column design (Fig 2) is interesting, but it does
    >> require that the text in the pink column is shorter than the higher of
    >> the yellow and green ones, and that the text in the yellow column is
    >> shorter than that in the green.

    >
    > I don't know whether I made it clear but one of my motives for
    > this particular method was its basic simplicity of concept and
    > its generational potential. The idea being you start with a
    > nuclear family and keep adding them as children in further
    > nuclear families to build as many columns as you please. The sort
    > of thing that has a simple algorithmic base (with the limitation
    > you point out about having to know longest col). Perhaps it would
    > be easy to program a wysiwyg to make it all?


    In general you need to know more than just the longest col-- you need
    all the cols sorted in order of length. Each level of the tree contains
    a "leaf" (a single float) and its sibling, another nuclear family or
    subtree. At _each_ level the leaf must be shorter than the subtree, for
    it all to work.

    Sorting the columns in order of height is easy to do approximately,
    especially if all they contain is text, but in general it's not possible
    without actually laying the page out in a browser following all the
    complicated rules for line-breaking, line-box height, positioning and
    width and height calculations. And in some cases the final height order
    would be affected by the user's choice of viewport width, font size and
    family.

    The other question is the HTML. The most natural is three divs side by
    side for the three columns with maybe an extra wrapper or clearer here
    and there to make it work. Going to three levels of nesting is OK but
    probably doesn't reflect the "semantic" structure of the document (blah
    blah etc.)-- it just reflects the expected order of their final heights.

    When trying to do three columns, it's possible to make the container's
    height take the maximum height of the three. It's then possible to fake
    up a background for each column based on that known container height,
    either using borders or background images creatively on the container,
    or by sliding in some absolutely positioned divs behind the columns as
    in Nik Coughlin's version.

    This works because absolutely positioned elements are the only things
    whose height can be set to be the same as the automatic height of their
    containers: circularity is avoided because a container's used auto
    height depends only on its _normal-flow_ descendents (and in some cases
    floats), never on the positioned ones.

    At the moment your document is about floats and how they affect heights
    of other elements. You'd need another chapter about absolute positioning
    to link to...

    But the background image and border tricks fit in perfectly well with
    the rest of the document.

    The nuclear family method is a good example for explaining how things
    work, so I would leave it in there, explain the height-order problem,
    and then go on to some border/background tricks. But of course it's your
    doc and it's up to you.
     
    Ben C, Feb 9, 2008
    #14
  15. Kevin Audleman

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-02-09, dorayme <> wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2008-02-08, dorayme <> wrote:
    > >> [...]
    > >> > As it happens, I am looking into this business of equal columns
    > >> > and have a small set of pages at
    > >> ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > >> > added to with a page 10.


    > > I don't know whether I made it clear but one of my motives for
    > > this particular method was its basic simplicity of concept and
    > > its generational potential. The idea being you start with a
    > > nuclear family and keep adding them as children in further
    > > nuclear families to build as many columns as you please. The sort
    > > of thing that has a simple algorithmic base (with the limitation
    > > you point out about having to know longest col). Perhaps it would
    > > be easy to program a wysiwyg to make it all?

    >
    > In general you need to know more than just the longest col-- you need
    > all the cols sorted in order of length.


    Yes, you need to know too much for a lot of practical purposes as
    you detail below. I was having a few thoughts at once when doing
    the page. The main thought was the further exploration of how
    floats work and how they do 'basic' columning.

    This other thought of mine about nuclear generation smacks too
    much of the practical and could be misleading! I will tone it
    down or make some things clearer about the impracticalities next
    time I visit the page. I would be unlikely to employ the method
    myself in practice for more than the basic nuclear family with 2
    cols.

    I must be careful not to stray too much into the area of a manual
    on "How to make good website pages" or "Introduction to best
    webpage layout practice". The whole set of pages is not really
    about that and I am not sure I should be presuming to tell folk
    about these things too heavily. To adapt a phrase of Dirty Harry,
    "Every being must know its limitations". <g>


    > Sorting the columns in order of height is easy to do approximately,
    > especially if all they contain is text, but in general it's not possible
    > without actually laying the page out in a browser [...] And in some cases the final height order
    > would be affected by the user's choice of viewport width, font size and
    > family.
    >
    > The other question is the HTML. The most natural is three divs side by
    > side for the three columns with maybe an extra wrapper or clearer here
    > and there to make it work. Going to three levels of nesting is OK but
    > probably doesn't reflect the "semantic" structure of the document (blah
    > blah etc.)-- it just reflects the expected order of their final heights.
    >


    Ah, the HTML, indeed this is something I am conscious of and one
    more reason for toning down the generational aspect of this
    nuclear family thing.


    > When trying to do three columns, it's possible to make the container's
    > height take the maximum height of the three. It's then possible to fake
    > up a background for each column based on that known container height,
    > either using borders or background images creatively on the container,
    > or by sliding in some absolutely positioned divs behind the columns as
    > in Nik Coughlin's version.
    >
    > This works because absolutely positioned elements are the only things
    > whose height can be set to be the same as the automatic height of their
    > containers: circularity is avoided because a container's used auto
    > height depends only on its _normal-flow_ descendents (and in some cases
    > floats), never on the positioned ones.
    >


    I guess if I am thinking of adding something about faux columns
    in relation to floats (as I am doing) there is no reason in
    principle not to have something on floats that get some help from
    abs pos. Nick's idea is interesting and probably deserving - <g>
    - a place in this hobby of mine. Will think about it.

    > At the moment your document is about floats and how they affect heights
    > of other elements. You'd need another chapter about absolute positioning
    > to link to...
    >
    > But the background image and border tricks fit in perfectly well with
    > the rest of the document.
    >
    > The nuclear family method is a good example for explaining how things
    > work, so I would leave it in there, explain the height-order problem,
    > and then go on to some border/background tricks. But of course it's your
    > doc and it's up to you.


    --
    dorayme
     
    dorayme, Feb 9, 2008
    #15
  16. Hey everyone,

    Great discussion! I just thought I'd mention that I've figured out how
    to use nested div tags and have made a new design that is cross-
    browser compatible. You can check it out here: http://quick2m.com/izzy/index.php

    I found that I could do almost everything with div tags. The only
    exception was the three links in the top right corner. I wanted them
    to take up 33% of the space right of the tab each, and I couldn't see
    how to do that with divs. With a table it was easy.

    Thanks for the stimulating conversation, all.

    Kevin
     
    Kevin Audleman, Feb 10, 2008
    #16
  17. Kevin Audleman

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <>,
    > Ben C <> wrote:
    >
    > > On 2008-02-09, dorayme <> wrote:
    > > > In article <>,
    > > > Ben C <> wrote:
    > > >
    > > >> On 2008-02-08, dorayme <> wrote:
    > > >> [...]
    > > >> > As it happens, I am looking into this business of equal columns
    > > >> > and have a small set of pages at
    > > >> ><http://netweaver.com.au/floatHouse/> which only yesterday was
    > > >> > added to with a page 10.


    > In general you need to know more than just the longest col-- you need
    > all the cols sorted in order of length.


    > This other thought of mine about nuclear generation smacks too
    > much of the practical and could be misleading! I will tone it
    > down or make some things clearer about the impracticalities next
    > time I visit the page. I would be unlikely to employ the method
    > myself in practice for more than the basic nuclear family with 2
    > cols.
    >


    Actually, I have completely rewritten page 10 now and got down to
    more elementary tin tacks. The nuclear family has become a one
    float one and caveats about such columning have been put in. I
    can already see several more pages ahead on related matters! (I
    need things to turn to when I get bored or bleary eyed with paid
    work <g>)

    --
    dorayme
     
    dorayme, Feb 10, 2008
    #17
    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. Jeff
    Replies:
    13
    Views:
    1,149
    vanilla
    Oct 6, 2007
  2. msdngroup
    Replies:
    5
    Views:
    716
    msgroup
    Jan 30, 2008
  3. msdngroup
    Replies:
    0
    Views:
    590
    msdngroup
    Dec 15, 2007
  4. msdngroup
    Replies:
    5
    Views:
    371
    msgroup
    Jan 30, 2008
  5. Replies:
    16
    Views:
    253
    Richard Cornford
    Sep 7, 2006
Loading...

Share This Page