Re: [css-d] Padding effect: explanation please

2007-04-30 Thread david 
Skip Knox wrote:
>  > 1) You have no width in the html for the image (and no title is
> needed). The 
>> code should be.
>>
>>  width="200px" 
>> height="295px" />
> I didn't realize I had to specify a width and height. Seems to work
> with or without the same way.

I've always been told that you should specify both. I don't know if the 
official standards have anything to say about it. I just prefer not 
giving browsers leeway to do something wrong. I believe it also speeds 
up rendering, because the browser knows exactly how much screen space to 
allocate for the image before the image has completed downloading.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Alan Gresley 
On May 01, 2007, I wrote:

> On May 01, 2007, Skip wrote:
>
> > I have constructed a caption div for images that seems to work well for
> > me. You can see it here:
> > http://www.boisestate.edu/webcenter/workshops/02/file09.html

> div.image {
>   height: auto;
>   width: auto;
>   padding: 20px;
>   margin: 0 0 20px 20px;
>   float: right;
> }
> div.image img {
>   border: 1px solid #000;
>   width: 200px;
>   width: 295px;
> }
> p.imgcaption {
>   border: 1px solid #000;
>   font-family: verdana, sans-serif;
>   font-size: .7em;
>   text-align: center;
>   margin: 0;
>   padding-left: 10px;
>   padding-right: 10px;
> }


To further what I said. I havr notice that the image div is outside the 
maincontent div. It would look better if the image div is within the 
maincontent div and this would allow the text to flow around it. To accommodate 
the image the maincontent div and the text be change to similar.

div.maincontent {
line-height: 2em;
width: 100%;
}
div.maincontent p {
text-indent: 3em;
margin: 0 15%;
}
div.maincontent blockquote {
margin: 0 15%;
}

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Skip Knox 
>However, setting the dimensions may speed up rendering of the page,
Yes, that's how I always understood it.

>If you set the dimensions in HTML, they should be pure numbers, e.g.
width="200" height="295" 
I wondered about that. I'd always understood it was no units of
measurements in the HTML. Glad to have that confirmed.

-- 

Skip Knox
Boise State University
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Jukka K. Korpela 
On Mon, 30 Apr 2007, Skip Knox wrote:

>>  width="200px"
>> height="295px" />
> I didn't realize I had to specify a width and height. Seems to work
> with or without the same way.

If the dimensions set are the same as the dimensions of the image itself, 
it makes no difference in rendering result whether you specify the width 
and height in HTML or in CSS. However, setting the dimensions may speed up 
rendering of the page, since the browser can reserve space for the image 
before having got the image data, so it continue formatting the page with 
no need for reformatting later.

If you set the dimensions in HTML, they should be pure numbers, e.g. 
width="200" height="295" (though browsers generally accept the 
syntactically incorrect form as well, ignoring everything after the 
numbers). On the other hand, if you set them in CSS, the unit (px) is 
required, e.g. style="width: 200px; height: 295px".

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Jukka K. Korpela 
On Mon, 30 Apr 2007, Skip Knox wrote:

>> You could use markup like
>> caption text
>> and set
>> div.imgcaption { width: 200px; }
>> div.imgcaption div { padding: 0 0.75em; }
>> (instead of the style="width: 200px" attribute).
> The trouble with this is that pictures across multiple pages will have
> unpredictable widths, so there's no way to set it in the stylesheet.

Yes, it gets awkward, but I'm afraid it's the only way. (You can set the 
widths in the stylesheet, but each img element would need its own setting, 
so no _general_ stylesheet alone could handle this.)

>> There are probably easier ways too. If you rely on browsers applying
>
>> "shrink-to-fit" width to floated elements by default (and you
> probably
>> could), you could leave div.imgcaption width unspecified and just set
> the
>> padding.
> If I leave the width unspecified then there's no way to ensure that it
> stays within the width of the image.

You're right, I was too eager in my optimism. Using just a floated div 
works if the caption text is not longer than the width of the image, 
but if it's longer, the shrink-to-fit width of the div is determined by 
the text length.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Skip Knox 
Thanks for the responses, Alan.
 
> You have given no padding for the image div. 
I don't want padding because I have a border around the image and that
will create unwanted whitespace.

 > 1) You have no width in the html for the image (and no title is
needed). The 
> code should be.
> 
>  height="295px" />
I didn't realize I had to specify a width and height. Seems to work
with or without the same way.

> 2) You have set the width for the paragraph in the html. This is 
> presentational.
Yes, but how else can I set width when the width varies from one
picture to the next, one page to the next?

 
> 3) The div.image img has a margin-left: 1em.
Yes it does. Why is that a problem? I don't get this one.

 
> 4) You have the image and paragraph caption floated instead of the
div.
Yes. If I float the div, the content in Firefox doesn't appear until
below the div. Can't have that.


> 
> div.image {
>   height: auto;
>   width: auto;
>   padding: 20px;
>   margin: 0 0 20px 20px;
>   float: right;
> }
> div.image img {
>   border: 1px solid #000;
>   width: 200px;
>   width: 295px;
> }
You meant height on the 295. But I can't do this because not all my
images are the same size. I could create a separate class for each
image, but that would be horrific in a site with dozens, if not
hundreds, of images.

> p.imgcaption {
>   border: 1px solid #000;
>   font-family: verdana, sans-serif;
>   font-size: .7em;
>   text-align: center;
>   margin: 0;
>   padding-left: 10px;
>   padding-right: 10px;
> }
I think I see what you are doing. You are adding padding to the image,
which allows padding to be added on the imgcaption. But, as stated
earlier, I can't have padding on the image because that creates
whitespace between the border and the image.

I realize that captioning images is a problem. The W3 has recognized
this and I think it's part of the CSS3 proposal. So maybe I just work
within the limitations. No padding on the caption for Wednesday's
workshop, that's for sure!


-- 

Skip Knox
Boise State University
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Skip Knox 

> That's one possible approach, putting the image and the caption
inside a 
> div element and setting the width of the element containing the
caption to 
> match the width of the image. There are many other ways to attach 
> captions to images; for some of them, see 
> approaches, see http://www.cs.tut.fi/~jkorpela/www/captions.html 
> 
Yep. That's where I got the approach that I used.

> You could set the padding in pixels and subtract it from the width
value 
> that you set for the content of p.imgcaption. 
Too clumsy.

>You could use markup like
> caption text
> and set
> div.imgcaption { width: 200px; }
> div.imgcaption div { padding: 0 0.75em; }
> (instead of the style="width: 200px" attribute).
The trouble with this is that pictures across multiple pages will have
unpredictable widths, so there's no way to set it in the stylesheet.

> There are probably easier ways too. If you rely on browsers applying

> "shrink-to-fit" width to floated elements by default (and you
probably 
> could), you could leave div.imgcaption width unspecified and just set
the 
> padding.
If I leave the width unspecified then there's no way to ensure that it
stays within the width of the image.

I've used the table approach before. In many ways it's simpler, but I
was trying to get it accomplished with styles. Someone else suggested
making a container div just for the image caption. I'm going to try that
next.

Jukka, your page on captions is very helpful. I don't seriously expect
you to rewrite it, but one thing that's of great help to us mere mortals
is having examples of When Things Go Wrong. Or trade-offs, so we can see
what happens if we use approach A versus approach B. Yeah, I know: why
don't I write it myself



-- 

Skip Knox
Boise State University
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Alan Gresley 
On May 01, 2007, Skip wrote:

> I have constructed a caption div for images that seems to work well for
> me. You can see it here:
> http://www.boisestate.edu/webcenter/workshops/02/file09.html
>
> I wanted to add some padding inside p.imgcaption. This worked, but it
> also produced an unexpected effect, which you can see here:
> http://www.boisestate.edu/webcenter/workshops/02/file10.html
>
> It appears that the padding actually expanded the size of the div
> which, since I set it inline at a specific width, I certainly did not
> expect and don't know how to explain. And since I'm teaching a workshop
> on this, I figure I ought to be able to explain it!
>
> My students are going to ask the obvious follow-up, too; namely, since
> this doesn't seem to work, if I *did* want to add some left-right space,
> without expanding the box beyond the picture, how would I go about it?

Hi Skip

You have given no padding for the image div. There are these issues in both the 
html and CSS.

1) You have no width in the html for the image (and no title is needed). The 
code should be.



2) You have set the width for the paragraph in the html. This is presentational.

3) The div.image img has a margin-left: 1em.

4) You have the image and paragraph caption floated instead of the div.

A width for an image must be stated in the html so the browser knows how much 
space to allocate for the image before it load (CSS alone doesn't work for IE). 
The margin-left for the image is creating the space between the left of the 
image and the div. The paragraph for the caption has no margin and the div has 
no padding so the paragraph sides are resting on the sides of the div. You need 
to remove the margin-left for the image a have padding for the div. This will 
make the image and the paragraph the same width. The CSS should be. Floating 
the image and paragraph caption instead of div is the reason that there is a 
break in the content text in IE7.

div.image {
height: auto;
width: auto;
padding: 20px;
margin: 0 0 20px 20px;
float: right;
}
div.image img {
border: 1px solid #000;
width: 200px;
width: 295px;
}
p.imgcaption {
border: 1px solid #000;
font-family: verdana, sans-serif;
font-size: .7em;
text-align: center;
margin: 0;
padding-left: 10px;
padding-right: 10px;
}

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread Jukka K. Korpela 
On Mon, 30 Apr 2007, Skip Knox wrote:

> I have constructed a caption div for images that seems to work well for
> me. You can see it here:
> http://www.boisestate.edu/webcenter/workshops/02/file09.html

That's one possible approach, putting the image and the caption inside a 
div element and setting the width of the element containing the caption to 
match the width of the image. There are many other ways to attach 
captions to images; for some of them, see 
approaches, see http://www.cs.tut.fi/~jkorpela/www/captions.html

> I wanted to add some padding inside p.imgcaption. This worked, but it
> also produced an unexpected effect, which you can see here:
> http://www.boisestate.edu/webcenter/workshops/02/file10.html

The width of the content of the p.imgcaption element is the same as the 
width of the image, so if you add padding, the _box_ of the element (with 
borders in this case) is necessarily wider than the image.

> It appears that the padding actually expanded the size of the div
> which,

It expands the width of the box of the p.imgcaption element, and this in 
turn is part of the content of the div.image element, making it wider.

> My students are going to ask the obvious follow-up, too; namely, since
> this doesn't seem to work, if I *did* want to add some left-right space,
> without expanding the box beyond the picture, how would I go about it?

You could set the padding in pixels and subtract it from the width value 
that you set for the content of p.imgcaption. This won't work on some old 
browsers like IE 5, which compute the width of an element incorrectly 
(namely the way that many people would regard as more natural than the CSS 
model where the width property sets the _content_ width and the total 
width occupied by an element contains padding, too). You could use markup 
like
caption text
and set
div.imgcaption { width: 200px; }
div.imgcaption div { padding: 0 0.75em; }
(instead of the style="width: 200px" attribute).

There are probably easier ways too. If you rely on browsers applying 
"shrink-to-fit" width to floated elements by default (and you probably 
could), you could leave div.imgcaption width unspecified and just set the 
padding.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Padding effect: explanation please

2007-04-30 Thread David Dorward 
On 30/04/07, Skip Knox <[EMAIL PROTECTED]> wrote:
> It appears that the padding actually expanded the size of the div
> which, since I set it inline at a specific width, I certainly did not
> expect and don't know how to explain.

Width is "Width of content", padding goes around the width (and then
the border goes around the padding).

http://css-discuss.incutio.com/?page=BoxModel

> My students are going to ask the obvious follow-up, too; namely, since
> this doesn't seem to work, if I *did* want to add some left-right space,
> without expanding the box beyond the picture, how would I go about it?

Either reduce the width by the sum of the left and right padding, or
use a child container with the padding you want and width "auto".

-- 
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/