Border problem: ie7 versus Mozilla Firefox 3.0.1

Discussion in 'HTML' started by Paul David Buchan, Aug 30, 2008.

  1. I am using:
    Windows XP
    version 2002, SP 2
    Browser: IE 7.0.5730.13 and Mozilla Firefox 3.0.1

    The problem:

    When defining in style border-width, IE shrinks the box to
    adjust to the size of the box for a DIV and
    it does not for IMG. The IMG is the correct size, but the
    DIVs are too small.

    This does not happen in Mozilla. In other words, with Mozilla,
    all my boxes are displayed in the same, correct size whether
    they are IMG or DIV.

    Here is a simplified (but tested) version of my HTML:

    <html>
    <head>
    </head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test borders</title>
    <style>
    ..colorbox {
    height: 100; width:100;
    border-width: 20px 20px 20px 20px;
    border-spacing: 0px;
    border-style: solid solid solid solid;
    border-color: Red Red Red Red;
    border-collapse: separate;
    }
    </style>
    <table>
    <tbody id="colortable">
    <tr>
    <td height="140" width="140">
    <div id="divisionBlack" class="colorbox" title="Black"
    style="background: rgb(0, 0, 16)"/>
    </td>
    <td height="140" width="140">
    <img id="divisionpicture" class="colorbox" height="120" width="120"
    src="F:picture.gif" title="Heather Gray"/>
    </td>
    <td height="140" width="140">
    <div id="divisionPearl" class="colorbox" title="Pearl"
    style="background: rgb(254, 250, 237)"/>
    </td>
    <td height="140" width="140">
    <div id="divisionGreen" class="colorbox" title="Green"
    style="background: rgb(100, 200, 100)"/>
    </td>
    </tr>
    </tbody>
    </table>
    </html>

    I'm not sure whether this is my mistake and one browser
    is more fault-tolerant than the other, or whether there's a bug in
    IE or Firefox.

    I looked here

    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

    but couldn't convince myself that my problem was exactly
    the same as one of the bugs listed.

    Can anybody tell me if this is my mistake, or whether
    there's a browser bug I need to work around?
    Any suggested solutions are welcome.

    Thanks,
    Dave Buchan
     
    Paul David Buchan, Aug 30, 2008
    #1
    1. Advertising

  2. Paul David Buchan

    John Hosking Guest

    Paul David Buchan wrote:
    > I am using:
    > Windows XP, SP 2
    > Browser: IE 7.0.5730.13 and Mozilla Firefox 3.0.1
    >
    > The problem:
    >
    > When defining in style border-width, IE shrinks the box to
    > adjust to the size of the box for a DIV and
    > it does not for IMG. The IMG is the correct size, but the
    > DIVs are too small.
    >
    > This does not happen in Mozilla. In other words, with Mozilla,
    > all my boxes are displayed in the same, correct size whether
    > they are IMG or DIV.


    What happens when you use valid code?
    http://validator.w3.org/check

    What happens when you don't provoke quirks mode?
    http://hsivonen.iki.fi/doctype/

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

    >
    > Here is a simplified (but tested) version of my HTML:


    URL please, rather than pasted (even if it were valid) code.

    HTH

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    Possessive "its" has no apostrophe. Even on the Internet.
     
    John Hosking, Aug 30, 2008
    #2
    1. Advertising

  3. Paul David Buchan

    dorayme Guest

    In article <48b998f5$>,
    John Hosking <> wrote:

    > Paul David Buchan wrote:
    > > I am using:
    > > Windows XP, SP 2
    > > Browser: IE 7.0.5730.13 and Mozilla Firefox 3.0.1
    > >
    > > The problem:
    > >
    > > When defining in style border-width, IE shrinks the box to
    > > adjust to the size of the box for a DIV and
    > > it does not for IMG. The IMG is the correct size, but the
    > > DIVs are too small.
    > >
    > > This does not happen in Mozilla. In other words, with Mozilla,
    > > all my boxes are displayed in the same, correct size whether
    > > they are IMG or DIV.

    >
    > What happens when you use valid code?
    > http://validator.w3.org/check
    >
    > What happens when you don't provoke quirks mode?
    > http://hsivonen.iki.fi/doctype/
    >
    > Try using a doctype of:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > >
    > > Here is a simplified (but tested) version of my HTML:

    >
    > URL please, rather than pasted (even if it were valid) code.


    Good advice, everything.

    The only sensible looking thing that the OP might want would be the look
    you get in quirks mode (in FF) after a bit of tidying up of the code
    just to make it adhere to some standard at least. With a good doctype,
    the whole thing needs recasting. But lets see if OP does a bit of the
    work and posts a URL.

    --
    dorayme
     
    dorayme, Aug 31, 2008
    #3
  4. Hi guys,

    ok. I think I've cleaned up most of it.

    http://www.pdbuchan.com/borderproblem.html

    The links you gave are a goldmine of info. Thanks very much.

    I'm getting the same behavior now in Firefox and IE.

    The only thing left is this little shift upwards of the second box.

    Comments?

    Thanks again,

    Dave
     
    Paul David Buchan, Aug 31, 2008
    #4
  5. Paul David Buchan

    dorayme Guest

    In article <>,
    Paul David Buchan <> wrote:

    > Hi guys,
    >
    > ok. I think I've cleaned up most of it.
    >
    > http://www.pdbuchan.com/borderproblem.html
    >
    > The links you gave are a goldmine of info. Thanks very much.
    >
    > I'm getting the same behavior now in Firefox and IE.
    >
    > The only thing left is this little shift upwards of the second box.
    >
    > Comments?
    >
    > Thanks again,
    >
    > Dave


    Add img {display: block;} to your styles.

    I don't know if you want to know why?

    BTW, If it were me I would stick in the body opening and closing tags in
    your html.

    You might say what you are wanting this layout for? There may be
    interesting alternative ways to do it.

    --
    dorayme
     
    dorayme, Aug 31, 2008
    #5
  6. Paul David Buchan

    Ari Heino Guest

    > In other words, with Mozilla,
    > all my boxes are displayed in the same, correct size whether
    > they are IMG or DIV.


    I experienced the contrary. IE shows it somewhat correctly (?), but FF
    shrank the img box.

    > Here is a simplified (but tested) version of my HTML:


    Don't give simplified html, we can't know what you have there and what
    not, that might solve (or be part of) the problem.

    > <html>
    > <head>
    > </head>



    > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    > <title>Test borders</title>
    > <style>


    Style type missing.

    > .colorbox {
    > height: 100; width:100;


    What's the unit above? px?

    > border-width: 20px 20px 20px 20px;
    > border-spacing: 0px;
    > border-style: solid solid solid solid;
    > border-color: Red Red Red Red;
    > border-collapse: separate;
    > }
    > </style>


    All above should be inside the head section! And border: 20px solid
    #ff0000; would be shorter.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Aug 31, 2008
    #6
  7. On Sun, 31 Aug 2008 20:07:12 +1000, dorayme wrote:
    >
    > Add img {display: block;} to your styles.
    >
    > I don't know if you want to know why?
    >
    > BTW, If it were me I would stick in the body opening and closing tags in
    > your html.
    >
    > You might say what you are wanting this layout for? There may be
    > interesting alternative ways to do it.


    Hi,

    I made the change and it works as promised.

    http://www.pdbuchan.com/borderproblem.html

    I would indeed be interested to know why.
    As you can see, I'm new this html business.

    Here's what's going on. There's a commercial
    site that needs some fixing up. It's old and
    broken; errors are reported when you visit
    the site.

    They asked to have this one thing fixed, but
    actually, a lot more needs to be fixed. Those
    boxes are color swatches people can use when
    choosing the color of clothing. They sit below
    the image of the garment. They used to be click-able,
    and they'd change the color of the garment. But
    that's broken too.

    One thing that worries me is, the rest of
    the site is doc-type transitional. I can
    see that, if possible, people recommend to
    use strict for maximum compatability. On the
    other hand, that means a lot of rework of the
    site. Rework that probably should be done,
    mind you.

    What would you guys do?

    Thanks for everybody's suggestions. I hope you see this.
    I'm a bit late replying.

    Dave
     
    Paul David Buchan, Sep 3, 2008
    #7
  8. Paul David Buchan

    dorayme Guest

    In article <>,
    Paul David Buchan <> wrote:

    > On Sun, 31 Aug 2008 20:07:12 +1000, dorayme wrote:
    > >
    > > Add img {display: block;} to your styles.
    > >
    > > I don't know if you want to know why?
    > >
    > > BTW, If it were me I would stick in the body opening and closing tags in
    > > your html.
    > >
    > > You might say what you are wanting this layout for? There may be
    > > interesting alternative ways to do it.

    >
    > Hi,
    >
    > I made the change and it works as promised.
    >
    > http://www.pdbuchan.com/borderproblem.html
    >
    > I would indeed be interested to know why.
    > As you can see, I'm new this html business.
    >


    In short, images by default are inline (they are treated rather like a
    character, like a letter, like an A or Y or 7, usually quite a big one
    compared). With inline text there is room for the descenders as in y, g,
    p. So, even though there are no descenders in images* they stay in
    character (so to speak) and take their place like any other character in
    lines.

    They are subject to line-height specifications just as text is...

    <http://dorayme.890m.com/alt/imagesInline.html>

    where you will see the yellow div having a normal line height set for
    its inline boxes while the yellow div has an unusually large one. The
    blue div illustrates how the odd tall image stretches the imaginary line
    box. All this is inline behaviour. Block behaviour is different.

    By displaying as block, it changes the character of the image element to
    make it not behave like a character or word on a line of text. It is
    formatted as a block box (within which you can have inline images among
    other things) and the rules for these things you will gather as you go.

    You can read

    <http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

    and more generally

    <http://www.w3.org/TR/CSS21/visuren.html#x0>

    Too boring? OK, just simply think of "inline" as a violin sound and
    "block" as a sort of thud when a huge block of concrete falls on Jerry
    with Tom not being at all innocent but looking as if he had nothing to
    do with it.

    > Here's what's going on. There's a commercial
    > site that needs some fixing up. It's old and
    > broken; errors are reported when you visit
    > the site.
    >
    > They asked to have this one thing fixed, but
    > actually, a lot more needs to be fixed. Those
    > boxes are color swatches people can use when
    > choosing the color of clothing. They sit below
    > the image of the garment. They used to be click-able,
    > and they'd change the color of the garment. But
    > that's broken too.
    >

    I saw a very nice Flash application of this concept once, to help people
    order products.

    > One thing that worries me is, the rest of
    > the site is doc-type transitional. I can
    > see that, if possible, people recommend to
    > use strict for maximum compatability. On the
    > other hand, that means a lot of rework of the
    > site. Rework that probably should be done,
    > mind you.
    >
    > What would you do?


    Leave it as transitional until and unless you are guaranteed to have
    this job as a longer term project. And then sort it out and get out of
    transitional. Once you have transitioned, that is.


    ------------------------
    * Don't let cartoons where things hang out of the boxes fool you. There
    was a nice cartoon I saw a few years back where the characters were
    aware they were in the cartoon and one of them decided to take a look
    outside by popping his head out under the bottom border.

    We stared at each other, transfixed. Till he decided to dart back in his
    box. I was about to flee too, he looked a bit finni... mean.

    --
    dorayme
     
    dorayme, Sep 4, 2008
    #8
  9. Paul David Buchan

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > while the yellow div has


    while the green div has

    --
    dorayme
     
    dorayme, Sep 4, 2008
    #9
  10. Paul David Buchan

    Irina Rempt Guest

    dorayme wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    >> while the yellow div has

    >
    > while the green div has


    Just out of curiosity, are you a tetrachromat?

    Irina

    --
    "Of course it is happening inside your head, Harry, but why on earth
    should that mean that it is not real?" --Albus Dumbledore
    http://www.valdyas.org/foundobjects/index.cgi Latest: 02-Sep-2008
     
    Irina Rempt, Sep 4, 2008
    #10
  11. Paul David Buchan

    dorayme Guest

    In article <48bf737c$0$182$4all.nl>,
    Irina Rempt <> wrote:

    > dorayme wrote:
    >
    > > In article <>,
    > > dorayme <> wrote:
    > >
    > >> while the yellow div has

    > >
    > > while the green div has

    >
    > Just out of curiosity, are you a tetrachromat?


    You sense a frustration on my part about my using #ffccff; and such, eh?
    Supposing perhaps I would have preferred to be able to use #88UUccZZ
    where the capitals denote ultraviolet...?

    An interesting thought.

    But it is not like any of this for me. I have no normal sensory
    channels, a bit like a god really, I'm big on simply just knowing things
    by no means at all. Except, unlike with a god, there is the awkward
    thing that I do get things wrong now and then. It is a trait that gods
    rather envy, did you know that they get terribly bored with always being
    right? I know this because I have seen them weep with anguish at me.

    --
    dorayme
     
    dorayme, Sep 4, 2008
    #11
  12. On Thu, 04 Sep 2008 09:19:56 +1000, dorayme wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    >> while the yellow div has

    >
    > while the green div has


    Thanks very much for all your help.
    I really appreciate you taking the
    time. Of course, now you run the risk that I
    might ask more questions. "No good deed goes
    unpunished, etc etc."

    Dave
     
    Paul David Buchan, Sep 4, 2008
    #12
  13. Paul David Buchan

    dorayme Guest

    In article <>,
    Paul David Buchan <> wrote:

    > On Thu, 04 Sep 2008 09:19:56 +1000, dorayme wrote:
    >
    > > In article <>,
    > > dorayme <> wrote:
    > >
    > >> while the yellow div has

    > >
    > > while the green div has

    >
    > Thanks very much for all your help.
    > I really appreciate you taking the
    > time. Of course, now you run the risk that I
    > might ask more questions. "No good deed goes
    > unpunished, etc etc."
    >


    Honest questions and discussion is not the biggest risk around here...

    :-|

    --
    dorayme
     
    dorayme, Sep 4, 2008
    #13
    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 Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    543
    Adrienne Boswell
    Mar 2, 2007
  2. freemont
    Replies:
    4
    Views:
    687
    freemont
    Mar 19, 2008
  3. kdubya
    Replies:
    5
    Views:
    2,296
    dorayme
    Jul 24, 2008
  4. Brian Binnerup

    Do MSFT programmers hate Mozilla Firefox users? (Border problem).

    Brian Binnerup, Nov 11, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    4
    Views:
    363
    Brian Binnerup
    Nov 12, 2004
  5. Paul Butcher
    Replies:
    12
    Views:
    764
    Gary Wright
    Nov 28, 2007
Loading...

Share This Page