Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Re: Div not collapsing in IE (http://www.velocityreviews.com/forums/t634071-re-div-not-collapsing-in-ie.html)

dorayme 09-07-2008 12:48 AM

Re: Div not collapsing in IE
 
In article <2008090617505716807-emailnotchecked@gmailcom>,
patrick j <email.not.checked@gmail.com> 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 09-07-2008 05:36 AM

Re: Div not collapsing in IE
 
In article <2008090705381116807-emailnotchecked@gmailcom>,
patrick j <email.not.checked@gmail.com> wrote:

> On 2008-09-07 01:48:33 +0100, dorayme <doraymeRidThis@optusnet.com.au> 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 09-07-2008 10:15 AM

Re: Div not collapsing in IE
 
In article <2008090710264675249-emailnotchecked@gmailcom>,
patrick j <email.not.checked@gmail.com> wrote:

> On 2008-09-07 06:36:42 +0100, dorayme <doraymeRidThis@optusnet.com.au> 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 09-07-2008 10:39 PM

Re: Div not collapsing in IE
 
In article <2008090715245816807-emailnotchecked@gmailcom>,
patrick j <email.not.checked@gmail.com> wrote:

> On 2008-09-07 11:15:50 +0100, dorayme <doraymeRidThis@optusnet.com.au> 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 09-07-2008 11:23 PM

Re: Div not collapsing in IE
 
In article <slrngc80sb.31m.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> On 2008-09-07, patrick j <email.not.checked@gmail.com> wrote:
> > On 2008-09-07 11:15:50 +0100, dorayme <doraymeRidThis@optusnet.com.au> 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


All times are GMT. The time now is 08:10 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.