css bug in IE: circumvention, anybody?

Discussion in 'HTML' started by Greg N., Jun 25, 2005.

  1. Greg N.

    Greg N. Guest

    Hi folks,
    have a look at my test case at http://coolhaus.de/misc/csstest.htm .

    There is a div whose width is defined through some margin definitions.

    Within the div is a table with width 100%, hence it should assume the
    same width as the div. In Mozilla, this works fine. Under IE though,
    the table exceeds the specified div width.

    Can anybody come up with a circumvention how to make this work under IE?
    V6 ? I mean, such that it works correctly under FF and IE?

    Thanks,
    Greg
    Greg N., Jun 25, 2005
    #1
    1. Advertising

  2. Greg N.

    Neredbojias Guest

    With neither quill nor qualm, Greg N. quothed

    > Hi folks,
    > have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >
    > There is a div whose width is defined through some margin definitions.
    >
    > Within the div is a table with width 100%, hence it should assume the
    > same width as the div. In Mozilla, this works fine. Under IE though,
    > the table exceeds the specified div width.
    >
    > Can anybody come up with a circumvention how to make this work under IE?
    > V6 ? I mean, such that it works correctly under FF and IE?
    >
    > Thanks,
    > Greg
    >


    On the div put style:position:relative;

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Jun 25, 2005
    #2
    1. Advertising

  3. Greg N.

    Greg N. Guest

    Neredbojias wrote:

    >>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>
    >>There is a div whose width is defined through some margin definitions.
    >>
    >>Within the div is a table with width 100%, hence it should assume the
    >>same width as the div. In Mozilla, this works fine. Under IE though,
    >>the table exceeds the specified div width.
    >>
    >>Can anybody come up with a circumvention how to make this work under both
    >>FF and IE?


    >
    > On the div put style:position:relative;
    >


    Does not work for me. Any other ideas?

    Greg
    Greg N., Jun 25, 2005
    #3
  4. Greg N.

    Els Guest

    Greg N. wrote:

    > Neredbojias wrote:
    >
    >>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>
    >>>There is a div whose width is defined through some margin definitions.
    >>>
    >>>Within the div is a table with width 100%, hence it should assume the
    >>>same width as the div. In Mozilla, this works fine. Under IE though,
    >>>the table exceeds the specified div width.
    >>>
    >>>Can anybody come up with a circumvention how to make this work under both
    >>>FF and IE?

    >
    >>
    >> On the div put style:position:relative;
    >>

    >
    > Does not work for me. Any other ideas?


    Yup, leave it as is, but add this line to the top of your file:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Makes IE try to follow the same standards as the other browsers ;-)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #4
  5. Greg N.

    Els Guest

    Els wrote:

    > Greg N. wrote:
    >
    >> Neredbojias wrote:
    >>
    >>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>>
    >>>>There is a div whose width is defined through some margin definitions.
    >>>>
    >>>>Within the div is a table with width 100%, hence it should assume the
    >>>>same width as the div. In Mozilla, this works fine. Under IE though,
    >>>>the table exceeds the specified div width.
    >>>>
    >>>>Can anybody come up with a circumvention how to make this work under both
    >>>>FF and IE?

    >>
    >>> On the div put style:position:relative;

    >>
    >> Does not work for me. Any other ideas?

    >
    > Yup, leave it as is, but add this line to the top of your file:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > Makes IE try to follow the same standards as the other browsers ;-)


    Eh.. addition: background isn't a valid attribute in Strict, so
    instead, add the style to your styleblock:
    td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #5
  6. Greg N.

    Greg N. Guest

    Els wrote:

    >>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .

    >>Yup, leave it as is, but add this line to the top of your file:
    >>
    >><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >>
    >>Makes IE try to follow the same standards as the other browsers ;-)

    >
    > Eh.. addition: background isn't a valid attribute in Strict, so
    > instead, add the style to your styleblock:
    > td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}


    Hmm, that will open up another bag of worms for me.

    The sample code is my way of showing some extra-wide images. By making
    them a cell background, only as much as the table width allows is shown,
    no horizontal scrollbars are used. I want that effect.

    I have dozens of such tables on my pages, each showing a different
    image. I don't think I'd like to manage that through CSS. What should I
    do?

    Greg
    Greg N., Jun 25, 2005
    #6
  7. Greg N.

    Els Guest

    Greg N. wrote:

    > Els wrote:
    >
    >>>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>Yup, leave it as is, but add this line to the top of your file:
    >>>
    >>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>
    >>>Makes IE try to follow the same standards as the other browsers ;-)

    >>
    >> Eh.. addition: background isn't a valid attribute in Strict, so
    >> instead, add the style to your styleblock:
    >> td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}

    >
    > Hmm, that will open up another bag of worms for me.
    >
    > The sample code is my way of showing some extra-wide images. By making
    > them a cell background, only as much as the table width allows is shown,
    > no horizontal scrollbars are used. I want that effect.
    >
    > I have dozens of such tables on my pages, each showing a different
    > image. I don't think I'd like to manage that through CSS. What should I
    > do?


    Give each table a class (<table class="foo"> and <table class="bar">
    for instance) and then in CSS:
    table.foo td{background-image:url(....);}
    table.bar td{background-image:url(....);}
    etc

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #7
  8. Greg N.

    Els Guest

    Els wrote:

    > Greg N. wrote:
    >
    >> Els wrote:
    >>
    >>>>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>>Yup, leave it as is, but add this line to the top of your file:
    >>>>
    >>>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>>
    >>>>Makes IE try to follow the same standards as the other browsers ;-)
    >>>
    >>> Eh.. addition: background isn't a valid attribute in Strict, so
    >>> instead, add the style to your styleblock:
    >>> td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}

    >>
    >> Hmm, that will open up another bag of worms for me.
    >>
    >> The sample code is my way of showing some extra-wide images. By making
    >> them a cell background, only as much as the table width allows is shown,
    >> no horizontal scrollbars are used. I want that effect.
    >>
    >> I have dozens of such tables on my pages, each showing a different
    >> image. I don't think I'd like to manage that through CSS. What should I
    >> do?

    >
    > Give each table a class (<table class="foo"> and <table class="bar">
    > for instance) and then in CSS:
    > table.foo td{background-image:url(....);}
    > table.bar td{background-image:url(....);}
    > etc


    btw - if the table has no other function than provide a frame for that
    background image, you can just use a div instead.
    div.foo{
    height:[height of your image];
    background-image:url(...);
    }

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #8
  9. Greg N.

    Greg N. Guest

    Els wrote:


    > btw - if the table has no other function than provide a frame for that
    > background image, you can just use a div instead.
    > div.foo{
    > height:[height of your image];
    > background-image:url(...);
    > }


    Well, as I said, I use the table to make the right edge of the image
    invisible, and avoid horizontal scroll bars. Can a div do that?
    Greg N., Jun 25, 2005
    #9
  10. Greg N.

    Greg N. Guest

    Els wrote:

    > Greg N. wrote:
    >
    >
    >>Els wrote:
    >>
    >>
    >>>>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>>
    >>>>Yup, leave it as is, but add this line to the top of your file:
    >>>>
    >>>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>>
    >>>>Makes IE try to follow the same standards as the other browsers ;-)
    >>>
    >>>Eh.. addition: background isn't a valid attribute in Strict, so
    >>>instead, add the style to your styleblock:
    >>>td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}

    >>
    >>Hmm, that will open up another bag of worms for me.
    >>
    >>The sample code is my way of showing some extra-wide images. By making
    >>them a cell background, only as much as the table width allows is shown,
    >>no horizontal scrollbars are used. I want that effect.
    >>
    >>I have dozens of such tables on my pages, each showing a different
    >>image. I don't think I'd like to manage that through CSS. What should I
    >>do?

    >
    >
    > Give each table a class (<table class="foo"> and <table class="bar">
    > for instance) and then in CSS:
    > table.foo td{background-image:url(....);}
    > table.bar td{background-image:url(....);}
    > etc


    I have just learned that one should do the content in basic HTML, and do
    all formatting through CSS. Fine.

    What you're proposing would, in my case, put my content into CSS? In my
    case, there are too many different images to make this viable.

    By the way, though "background isn't a valid attribute in Strict", it
    seems to work. What negative effects would I risk if I go on using
    background (apart from making the purists cringe :) ?

    Greg
    Greg N., Jun 25, 2005
    #10
  11. Greg N.

    Els Guest

    Greg N. wrote:

    > Els wrote:
    >
    >> Greg N. wrote:
    >>
    >>>Els wrote:
    >>>
    >>>
    >>>>>>>>have a look at my test case at http://coolhaus.de/misc/csstest.htm .
    >>>>>
    >>>>>Yup, leave it as is, but add this line to the top of your file:
    >>>>>
    >>>>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>>>> "http://www.w3.org/TR/html4/strict.dtd">
    >>>>>
    >>>>>Makes IE try to follow the same standards as the other browsers ;-)
    >>>>
    >>>>Eh.. addition: background isn't a valid attribute in Strict, so
    >>>>instead, add the style to your styleblock:
    >>>>td{background-image:url(ttp://coolhaus.de/misc/smily.gif);}
    >>>
    >>>Hmm, that will open up another bag of worms for me.
    >>>
    >>>The sample code is my way of showing some extra-wide images. By making
    >>>them a cell background, only as much as the table width allows is shown,
    >>>no horizontal scrollbars are used. I want that effect.
    >>>
    >>>I have dozens of such tables on my pages, each showing a different
    >>>image. I don't think I'd like to manage that through CSS. What should I
    >>>do?

    >>
    >> Give each table a class (<table class="foo"> and <table class="bar">
    >> for instance) and then in CSS:
    >> table.foo td{background-image:url(....);}
    >> table.bar td{background-image:url(....);}
    >> etc

    >
    > I have just learned that one should do the content in basic HTML, and do
    > all formatting through CSS. Fine.
    >
    > What you're proposing would, in my case, put my content into CSS?


    If the image is content, it shouldn't be a background-image at all.
    People on text browsers wouldn't see it, nor see an alternative
    description throught alt text. So, if it really is content, and not
    decoration, you'll have to make it an <img src="..." alt="...">. But
    the fact that you're okay with clipping the right side of the image,
    my guess is that it is indeed decoration, and as such, not content.

    > In my case, there are too many different images to make this viable.


    For that, there is the style attribute:
    <td style="background-image:url(...);">&nbsp;</td>

    > By the way, though "background isn't a valid attribute in Strict", it
    > seems to work. What negative effects would I risk if I go on using
    > background (apart from making the purists cringe :) ?


    Just that, I think <g>

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #11
  12. Greg N.

    Els Guest

    Greg N. wrote:

    > Els wrote:
    >
    >> btw - if the table has no other function than provide a frame for that
    >> background image, you can just use a div instead.
    >> div.foo{
    >> height:[height of your image];
    >> background-image:url(...);
    >> }

    >
    > Well, as I said, I use the table to make the right edge of the image
    > invisible, and avoid horizontal scroll bars. Can a div do that?


    Sure. You think the background of a div will extend beyond the border
    of that div? Impossible :)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 25, 2005
    #12
  13. in alt.html, Els wrote:
    > [Greg:]
    > > What you're proposing would, in my case, put my content into CSS?

    >
    > If the image is content, it shouldn't be a background-image at all.
    > People on text browsers wouldn't see it, nor see an alternative
    > description throught alt text. So, if it really is content, and not
    > decoration, you'll have to make it an <img src="..." alt="...">. But
    > the fact that you're okay with clipping the right side of the image,
    > my guess is that it is indeed decoration, and as such, not content.


    Yes. but if it is content, you can easily clip it:

    div {width:100%;overflow:hidden;min-width:Npx;}

    <div><img alt="foo" src="bar"></div>

    But I still have no clue what Greg wants to get... If it is to have
    image, and style it so that it will be repeted to width of element, then
    I would use

    <div style="background:url(foo.png)"><image alt=foo src=foo.png></div>


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Support me, buy Opera:
    https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173
    Lauri Raittila, Jun 25, 2005
    #13
  14. Greg N.

    Greg N. Guest

    Lauri Raittila wrote:

    > But I still have no clue what Greg wants to get... If it is to have
    > image, and style it so that it will be repeted to width of element, then
    > I would use
    >
    > <div style="background:url(foo.png)"><image alt=foo src=foo.png></div>


    Here is an example of what I'm working on:

    http://hothaus.de/greg-tour-2004/ionia.htm

    The wide images are cetrtainly content, not decoration, although I feel
    it does not matter if part of those images get clipped off the right.

    There is another case, too, where I'm using the the same code to display
    repetitive images:

    http://hothaus.de/greg-tour-2004/meteora.htm (near the bottom of the
    page).

    Don't look at the source, please <g>. The current solution is all table
    based, which I want to convert to CSS as far as possible. I started
    this here thread as I already stumbled in my attempt to get rid of the
    outermost table and replace it wih a div.

    But I've got a few very valuable hints here which I'm in the process of
    implementing. Thanks, folks.


    Greg
    Greg N., Jun 26, 2005
    #14
  15. Greg N.

    Greg N. Guest

    Greg N. wrote:

    > Lauri Raittila wrote:
    >
    >> But I still have no clue what Greg wants to get... If it is to have
    >> image, and style it so that it will be repeted to width of element,
    >> then I would use
    >> <div style="background:url(foo.png)"><image alt=foo src=foo.png></div>

    >
    >

    By the way, there is another need I have: Those clipped, extra wide or
    repetitive images should also serve as links, see this example:

    http://hothaus.de/greg-tour-2004/serbien.htm
    Greg N., Jun 26, 2005
    #15
  16. in alt.html, Greg N. wrote:
    > Lauri Raittila wrote:


    > Here is an example of what I'm working on:


    So you need both of my code examples... Should be enough. If you want
    repeated image to be link, use a {width:100%}.

    When there is several ways to do things with CSS (and there usually is),
    choosing right one depends on what you want, not on whjat was best
    possible with tables.
    A) it is quite possible that it is possible to make better way using CSS
    B) it is quite possible that the way it works with tables won't be as
    well supported as the better CSS way.

    > http://hothaus.de/greg-tour-2004/ionia.htm
    >
    > The wide images are cetrtainly content, not decoration, although I feel
    > it does not matter if part of those images get clipped off the right.


    That is totally in pieces in Opera 8.01, and you are trickering quirks
    mode, which means it is pointless to do anything before getting rid of
    it. (google.)

    > I started
    > this here thread as I already stumbled in my attempt to get rid of the
    > outermost table and replace it wih a div.


    Codesnippets I gave should be enough to get it working (unless you run
    some IE bug I don't know.). Hint: when converting table layout to CSS,
    first get rid of *all* tables, unless you really know what you are doing.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 26, 2005
    #16
  17. Greg N.

    Greg N. Guest

    Els wrote:

    > If the image is content, it shouldn't be a background-image
    > at all. People on text browsers wouldn't see it...


    It's sortof a photoalbum application, so I don't care much for those who
    don't care for pictures.

    > So, if it really is content, and not decoration,
    > you'll have to make it an <img src="..." alt="...">.


    I'm willing to use semantically correct markup where possible, in other
    cases I'll use just about any markup that works for me the way I want. <g>

    > But the fact that you're okay with clipping the
    > right side of the image, my guess is that it is
    > indeed decoration, and as such, not content.


    It's certainly content. As I said, it's a photoalbum app. I have a
    number of panoramic images that I have built such that the more relevant
    part is in the left half of the image, hence, I don't mind a certain
    amount getting clipped off the right.

    > For that, there is the style attribute:
    > <td style="background-image:url(...);">&nbsp;</td>


    I thought about this, but how about browsers that don't understand CSS
    at all?
    Greg N., Jun 26, 2005
    #17
  18. Greg N.

    Els Guest

    Greg N. wrote:

    >> For that, there is the style attribute:
    >> <td style="background-image:url(...);">&nbsp;</td>

    >
    > I thought about this, but how about browsers that don't understand CSS
    > at all?


    Like which?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Rod Stewart - Maggie May
    Els, Jun 26, 2005
    #18
  19. Greg N.

    Greg N. Guest

    Els wrote:

    > Greg N. wrote:
    >> but how about browsers that don't understand CSS
    >>at all?

    >
    > Like which?
    >

    like, say, netscape v4? Are you telling me those have become so rare I
    should no longer bother? I'd like that. :)
    Greg N., Jun 26, 2005
    #19
  20. in alt.html, Greg N. wrote:
    > Els wrote:
    >
    > > If the image is content, it shouldn't be a background-image
    > > at all. People on text browsers wouldn't see it...

    >
    > It's sortof a photoalbum application, so I don't care much for those who
    > don't care for pictures.


    I surely would look your image gallery, even using lynx with external
    viewer, if nothing else was available... those images are good.

    > It's certainly content. As I said, it's a photoalbum app.


    And very nice indeed. Is it application, in sence that you have some
    program that you use to output it? I would be really interested...

    > I have a
    > number of panoramic images that I have built such that the more relevant
    > part is in the left half of the image, hence, I don't mind a certain
    > amount getting clipped off the right.


    Of course, you could do it so that snipping happens from both ends, if
    the most important part is in the middle, using CSS.

    I think your idea of autocropping *thumbnails* is very good idea (of
    course, not many people have over 800px wide thumbnails). I hope I can
    find time to read the texts (my german is way too rusty to cope without
    dictionary...)

    I need to get around to make similar for my forthcoming trip (but with
    bicycle...

    > I thought about this, but how about browsers that don't understand CSS
    > at all?


    CSS:
    ..block {display: block;border:2px solid #d9e8b9;
    width:100%;overflow:hidden;}
    ..block:visited {border-color:#ccc;} /* to make difference */
    ..block:hover {border:2px double #494}
    /* guessed #494 for olivedrap, propably not same... */

    HTML:

    <a class="block" TITLE="hier klicken zum Vergr&ouml;ssern des Bildes"
    href=http://coolhaus.de/iv/v4.php?width=1706&height=520&h1=Griechenland+[
    3]:+Meteora&img=img/040610/XL-M1915.jpg><img src="img/040610/M1915.jpg"
    alt"mahtava panoraama">
    </a>

    <a style="background:url(http://hothaus.de/greg-tour-
    2004/img/040611/M1943.jpg)"
    TITLE="hier klicken zum Vergr&ouml;ssern des Bildes" class="block"
    href=http://coolhaus.de/iv/v4.php?width=750&height=562&h1=Griechenland+[3
    ]:+Meteora&img=img/040611/XL-M1943.jpg>
    <img src="img/040611/M1943.jpg" alt="ikoneja"></a>

    (get rid of all tables for layout. Replace alt text with something in
    german.)

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 26, 2005
    #20
    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. RikardN
    Replies:
    0
    Views:
    446
    RikardN
    May 28, 2004
  2. Dmitry Bond.
    Replies:
    2
    Views:
    609
    Dmitry Bond.
    Aug 24, 2005
  3. dong seok huh

    Anybody have MegaDecrypt 2

    dong seok huh, Sep 1, 2003, in forum: VHDL
    Replies:
    0
    Views:
    690
    dong seok huh
    Sep 1, 2003
  4. walala
    Replies:
    2
    Views:
    1,055
    walala
    Sep 13, 2003
  5. jb
    Replies:
    7
    Views:
    424
    Spartanicus
    Sep 15, 2005
Loading...

Share This Page