Re: Div not collapsing in IE

Discussion in 'HTML' started by dorayme, Sep 7, 2008.

  1. dorayme

    dorayme Guest

    In article <2008090617505716807-emailnotchecked@gmailcom>,
    patrick j <> wrote:

    > Hi
    >
    > I'm wondering if some of the extremely knowledgeable people here might
    > be able to provide assistance.
    >
    > If you visit this web-page:
    >
    > http://www.patrickjames.co.uk/bicycle_mongrel.php
    >

    ....
    >
    > Is there anything I can do to make it look okay in IE?
    >


    You might look at:

    http://dorayme.890m.com/alt/patrick2.html

    and try something along this line. How does it go in IE?

    --
    dorayme
    dorayme, Sep 7, 2008
    #1
    1. Advertising

  2. dorayme

    dorayme Guest

    In article <2008090705381116807-emailnotchecked@gmailcom>,
    patrick j <> wrote:

    > On 2008-09-07 01:48:33 +0100, dorayme <> said:
    >
    > > You might look at:
    > >
    > > http://dorayme.890m.com/alt/patrick2.html
    > >
    > > and try something along this line. How does it go in IE?

    >
    > Hi dorayme
    >
    > That looks good in IE 7 and 6 :)
    >
    > I'm going to replace my HTML/CSS with that. It is a neater way to
    > achieve the result.
    >
    > Thank you very much!
    >


    One other thing, when you come to adopt this for a bunch of pics, you
    will save on the CSS by using a wrapper like #picSeries and specifying
    the style for the inner div blocks like

    #picSeries div {...}

    and

    #picSeries span {...}

    and then no need to class the inner divs or spans. See:

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

    I think I displayed the main image as block in last patrick2, but I
    often it is better to take advantage of the descender space that is
    often found a nuisance. In this case, we take advantage by having the
    space grow and therefore give some natural padding on user text size
    increase. And you save on having to specify display, it is default. In
    this case, given you know the size of the pics and therefore the whole
    wrapper width, the captions can do no other than wrap to where you want.
    (display: block is often used to make the text start on a new line, then
    the text can be loose and not need a block element of its own)

    > BTW, my fairly recent "find" for the Mac is Panic Software's Coda:
    >
    > http://www.panic.com/coda/
    >
    > I'm going to be writing about it in my blog soon. It is absolutely
    > lovely for editing CSS.
    >
    > Another recent find for the Mac is Xyle Scope:
    >
    > http://culturedcode.com/xyle/
    >
    > This does the trick that Firebug does in Firefox of showing you the CSS
    > margins/padding applied to elements in the browser window. It has more
    > in that regard, it also displays the elements in a columnar view like
    > the OS X columnar view and provides a very neat diagrammatic view. You
    > really get to see the whole story with it :)
    >
    > I'm going to be writing about this in my blog soon as well :)
    >
    > Both built around Webkit.


    Sounds interesting Patrick. I was just about to upgrade to FF 3 on my
    Mac but Firebug and FireFTP are said not to be updated for this version
    yet. So perhaps I should take a look at xyle.

    I hope it does not cost money! You know, when something costs money, it
    hurts me even I if I don't buy it. It works a bit like you can get a
    sore back from watching someone lifting a big weight. <g>

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

  3. dorayme

    dorayme Guest

    In article <2008090710264675249-emailnotchecked@gmailcom>,
    patrick j <> wrote:

    > On 2008-09-07 06:36:42 +0100, dorayme <> said:
    >
    > > One other thing, when you come to adopt this for a bunch of pics, you
    > > will save on the CSS by using a wrapper like #picSeries and specifying
    > > the style for the inner div blocks like
    > >
    > > #picSeries div {...}
    > >
    > > and
    > >
    > > #picSeries span {...}

    >
    > Have done :)
    >
    > > and then no need to class the inner divs or spans. See:
    > >
    > > <http://dorayme.890m.com/alt/patrick3.html>

    >
    > Looks good!
    >
    > I've updated my web-site with a slimmed-down version of what I had. I
    > don't use the <span> that you had instead floating the small .png image
    > itelf. This does mean I need a class for each img element as there are
    > two being "worked on"
    >
    > <http://www.patrickjames.co.uk/bicycle_mongrel.php>
    >
    > <http://www.patrickjames.co.uk/styles/pjstyles.css>
    >
    > Relevant bit from styles:
    >
    > .pics {
    > width: 302px;
    > right: 10px;
    > top: 40px;
    > position: absolute;
    > }
    >
    > .pics div {
    > font-size: 70%;
    > margin-bottom: 10px;
    > }
    >
    > .thumbnail {
    > border-color: black;
    > border-style: solid;
    > border-width: 1px;
    > }
    >
    > .toBigger {
    > border-width: 0px;
    > margin-left: 10px;
    > margin-bottom: 6px;
    > float: right;
    > }
    >


    Fair enough. Good move to float the image and not bother with a span. I
    was spanning because I had a go trying to do something with alignment to
    avoid confronting IE6 with floats (it is prejudiced against them you
    know!). But ended floating it anyway.

    One point I was making about the CSS was a minor quibble. *Some* of your
    above could be shortened and simplified by

    ..pics div {
    font-size: 70%;
    margin-bottom: 10px;
    }

    ..pics img {border: 1px solid black;}

    ..pics .toBigger {
    border: 0;
    margin-left: 10px;
    margin-bottom: 6px;
    float: right;
    }

    and saving having to have a class="thumbnail" in the html. If you could
    reliably refer to the second image in each div, you could do away with
    the class="toBigger". Nice name by the way.

    But it is a very minor thing! You have saved by floating the image, this
    is just a bit more saving I am suggesting. It counts more when you have
    more pics! I see you mention the pseudo class below. But I think IE
    would understand my above because the all the images are simply styled
    one way and the toBigger is then overridden in part, all solid stuff I
    think.

    > The only difference with IE is that the small 10x10 .png (with class
    > .toBigger) would sit up against the image (with class .thumbnail), so
    > for IE only I put 2 px margin on top of 10x10 .png.
    >
    > Would have been nice to use first-child pseudo element for that div
    > inside div with class .pics but that won't be understood by IE I have
    > been told.
    >
    > > I think I displayed the main image as block in last patrick2, but I
    > > often it is better to take advantage of the descender space that is
    > > often found a nuisance. In this case, we take advantage by having the
    > > space grow and therefore give some natural padding on user text size
    > > increase. And you save on having to specify display, it is default. In
    > > this case, given you know the size of the pics and therefore the whole
    > > wrapper width, the captions can do no other than wrap to where you want.
    > > (display: block is often used to make the text start on a new line, then
    > > the text can be loose and not need a block element of its own)

    >
    > This is interesting and may explain why IE insisted on a <br> between
    > image (.thumbnail) and text. Without it would put the first word of the
    > text to the right of the image jutting out of the div.


    Are you saying that even given that you width the parent container and
    the pic takes up the whole width, IE fails to put the caption
    underneath? I would have thought in these circumstances it would make no
    difference whether you display: block the image or not, the text would
    wrap. But I am no expert on IE.

    --
    dorayme
    dorayme, Sep 7, 2008
    #3
  4. dorayme

    dorayme Guest

    In article <2008090715245816807-emailnotchecked@gmailcom>,
    patrick j <> wrote:

    > On 2008-09-07 11:15:50 +0100, dorayme <> said:
    >
    > > Are you saying that even given that you width the parent container and
    > > the pic takes up the whole width, IE fails to put the caption
    > > underneath? I would have thought in these circumstances it would make no
    > > difference whether you display: block the image or not, the text would
    > > wrap. But I am no expert on IE.

    >
    > Hi dorayme
    >
    > I have agreed with all of your posting but being a keen trimmer I have
    > only included this last point of yours in the reply.
    >


    You got the bit I wanted to know about.

    > Without <br> and with the parent container with a set width IE would
    > "fail" to put first word of caption underneath, even though the image
    > in the container is exactly the width of the container. That one word
    > was "poking" out to the right. This with IE 6 and IE 7.
    >
    > However IE does have a case when we examine the situation move closely.
    >
    > I had put the first word of the caption immediately after the image tag
    > with no space.


    Ah, this explains all. I see, the space at least is needed for IE.


    > So I think to IE it looks like an unbreakable word
    > greater than the width of the container, and so IE decided not to break
    > the unbreakable word and instead bus through the container.
    >
    > If I put a space between the image tag and the first word of the
    > caption then IE was fine.
    >
    > As it happens I put a <br> between them because in the HTML code it is
    > more visually descriptive for me to see what was happening.


    Know what you mean. I tend to just space (to be sure) and break in the
    text editor but not put in that break tag. To make the doc "look like"
    the intended effect.

    --
    dorayme
    dorayme, Sep 7, 2008
    #4
  5. dorayme

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2008-09-07, patrick j <> wrote:
    > > On 2008-09-07 11:15:50 +0100, dorayme <> said:
    > >
    > >> Are you saying that even given that you width the parent container and
    > >> the pic takes up the whole width, IE fails to put the caption
    > >> underneath? I would have thought in these circumstances it would make no
    > >> difference whether you display: block the image or not, the text would
    > >> wrap. But I am no expert on IE.

    > >
    > > Hi dorayme
    > >
    > > I have agreed with all of your posting but being a keen trimmer I have
    > > only included this last point of yours in the reply.
    > >
    > > Without <br> and with the parent container with a set width IE would
    > > "fail" to put first word of caption underneath, even though the image
    > > in the container is exactly the width of the container. That one word
    > > was "poking" out to the right. This with IE 6 and IE 7.
    > >
    > > However IE does have a case when we examine the situation move closely.
    > >
    > > I had put the first word of the caption immediately after the image tag
    > > with no space.
    > >
    > > So I think to IE it looks like an unbreakable word
    > > greater than the width of the container, and so IE decided not to break
    > > the unbreakable word and instead bus through the container.

    >
    > I was just about to say the same thing and ask if you had a space after
    > the <img> tag.
    >
    > As far as I know it isn't specified anywhere what the "breaking class"
    > of an inline image is, so putting a space after it is safer and a <br>
    > even safer. This isn't necessarily an IE bug, just a difference.


    I like what IE does. It is true to itself: artless, simple minded.
    Browsers can be said with some credibility to treat inline images like
    text characters but most browsers leave it to extraterrestrial types to
    wax on about such imagery without taking this to extremes.

    --
    dorayme
    dorayme, Sep 8, 2008
    #5
    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. Chris K.
    Replies:
    4
    Views:
    871
    Bergamot
    Jun 4, 2008
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    743
  3. john
    Replies:
    2
    Views:
    242
  4. Jeremy Epstein

    Sections not collapsing properly in Firefox

    Jeremy Epstein, Oct 16, 2004, in forum: Javascript
    Replies:
    4
    Views:
    94
    Jeremy Epstein
    Oct 16, 2004
  5. Replies:
    2
    Views:
    99
Loading...

Share This Page