Re: [css-d] Floating images - understanding the details

[Keith Purtell]

OK, I'm taking a break. I need to re-read everything you all sent me,
and I need to finish Eric's book.

Then, I'll revise the page and style sheet.

Thanks a million!

- Keith Purtell



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Keith Purtell]

Bobby,

Embarrassed to admit this, but Firebug was one of three Firefox add-ons
that were suggested; all have been installed but I've been too busy to
try them out!


- Keith Purtell



On 8/19/2010 5:51 AM, Bobby Jack wrote:
> I don't think anyone's mentioned Firebug yet, which must be a first! It's a 
> Firefox plugin which is excellent as a debugging tool, a design tool, and a 
> training tool for those new to CSS. Firebug will (to some extent) answer your 
> 3 questions - and many more - by providing visual feedback, in your browser, 
> of how various styles affect the design.
> 
> http://getfirebug.com/
> 
> I recommend it as an absolute must for any web design work.
> 
> - Bobby
> 
> 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 1px difference in IE7

[Daniel Hammond]

URL: http://www.northsidecreativeservices.org/sportsandrec
CSS: http://www.northsidecreativeservices.org/sportsandrec/sports.css

In IE7, the horizontal navigation is shifted down one pixel, so the bottom of 
the buttons covers up the black horizontal line that is the bottom border for 
the horizontal navigation area. All other browsers (FF, Safari, Chrome, Opera 
[all on Mac and Win], and IE8) seem to display it correctly.

Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Alan Gresley]

Tim Arnold wrote:
> On Thu, Aug 19, 2010 at 9:39 AM, Alan Gresley  wrote:
> 
>> I should remind myself. Floating an element causes it to display as a
>> block. Also width and margin values are used.
>>
>> Lucky me, I didn't need Philippe to remind me this time.
>>
>>
>> --
>> Alan http://css-class.com/
>>
>>
> I'm not so sure that it causes it to display as block so much as makes the
> styles noticeable when they might not otherwise be.  On the same test page,
> the second image has no float and all rules are still applied.  I changed
> the margin from right to left to make it more apparent.
> 
> Cheers,
> Tim
> 
> -
> tim.arn...@gmail.com



It's in the spec [1]. The computed value for float is set to block 
which causes an element to generate a block box [2].

I am completely wrong about IMG when it is display inline. A margin, 
width or height is applied since an IMG is a inline replaced element. 
I also wrong about inline non replaced elements. Width and height are 
not applied but horizontal margin values that are not auto are used.



1. 
2. 


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Philippe Wittenbergh]

On Aug 19, 2010, at 10:39 PM, Alan Gresley wrote:

> I should remind myself. Floating an element causes it to display as a 
> block. Also width and margin values are used.
> 
> Lucky me, I didn't need Philippe to remind me this time.

he's hibernating under canicular temperatures and overflowing rivers... and 
forgot everything.

On Aug 19, 2010, at 10:33 PM, Tim Arnold wrote:

> Actually "display: block;" is not necessary for images to correctly have
> width, margin and padding applied to them.

Or any floated block, for the matter. Floats are always 'display: block' 
(except when they are not, but that is rather a lone case - table). So sez 
Alan, above. And the CSS 2.1 spec


And btw, width, height, margin, padding always apply to images (inline replaced 
elements). Padding and margin may not affect the layout – (in-)line boxes or 
block boxes level. But it is there nonetheless.




Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Thierry Koblentz]

Hi Alan,

> Alan Gresley wrote:
> 
> > .floatL {
> >float:left;
> >margin: 0 1 em 1em;
> >padding: 0.25em;
> >display: block;
> > }
> 
> 
> I should remind myself. Floating an element causes it to display as a
> block. Also width and margin values are used.

Yes, floats get computed as display:block, but also images are not inline
elements they are *replaced elements* hence they can get all the styling
(margin, padding, width/height).


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Tim Arnold]

On Thu, Aug 19, 2010 at 9:39 AM, Alan Gresley  wrote:

> I should remind myself. Floating an element causes it to display as a
> block. Also width and margin values are used.
>
> Lucky me, I didn't need Philippe to remind me this time.
>
>
> --
> Alan http://css-class.com/
>
>
I'm not so sure that it causes it to display as block so much as makes the
styles noticeable when they might not otherwise be.  On the same test page,
the second image has no float and all rules are still applied.  I changed
the margin from right to left to make it more apparent.

Cheers,
Tim

-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Alan Gresley]

Alan Gresley wrote:

> .floatL {
>float:left;
>margin: 0 1 em 1em;
>padding: 0.25em;
>display: block;
> }


I should remind myself. Floating an element causes it to display as a 
block. Also width and margin values are used.

Lucky me, I didn't need Philippe to remind me this time.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Tim Arnold]

On Thu, Aug 19, 2010 at 3:47 AM, Alan Gresley  wrote:

> Since IMG are inline elements, then any margin or width values will
> not be used. For the margin and width values to work, one must make
> the IMG display as a block element.
>
> .floatL {
>   float:left;
>   margin: 0 1 em 1em;
>   padding: 0.25em;
>   display: block;
> }
>
>
Actually "display: block;" is not necessary for images to correctly have
width, margin and padding applied to them.  Here is my test page I threw
together to be sure:

http://extranets.beaconfire.us/test/imgfloat.html

Using this CSS:  img {width: 100px; float: left; margin-right: 40px;
padding-bottom: 40px;}

All styles are applied correctly without "display: block;" in all browsers.
Note, the actual width of the image is 267px.

-Tim


-- 
-
tim.arn...@gmail.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fwd: Floating images - understanding the details

[Wesley Acheson]

Sent this to the wrong list.

owch.

-- Forwarded message --
From: Wesley Acheson 
Date: Thu, Aug 19, 2010 at 12:50 PM
Subject: Re: [css-d] Floating images - understanding the details
To: ANOTHER MAILING LIST


Pardon I knew that, I must have been having an off day. Yes what I said is
wrong.


On Thu, Aug 19, 2010 at 12:46 PM, Bobby Jack  wrote:

> --- On Wed, 8/18/10, Wesley Acheson  wrote:
>
> No-one spotted the deliberate mistake? ;)
>
> > 4 values: are Top, bottom, left and right.
>
> should be
>
> 4 values: are top, right, bottom, left
>
>
> - Bobby
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Tim Climis]

On Thursday, August 19, 2010 6:51:28 am Bobby Jack wrote:
> --- On Wed, 8/18/10, Keith Purtell  wrote:
> > First, I don't understand width.
> > 
> > Second, I especially don't understand how he has
> > illustrated margin.
> > 
> > Third, the padding. Why is it necessary and how is it
> > affecting the the flow of text around my images?
> 
> I don't think anyone's mentioned Firebug yet, which must be a first! It's a
> Firefox plugin which is excellent as a debugging tool, a design tool, and
> a training tool for those new to CSS. Firebug will (to some extent) answer
> your 3 questions - and many more - by providing visual feedback, in your
> browser, of how various styles affect the design.
> 
> http://getfirebug.com/
> 
> I recommend it as an absolute must for any web design work.
> 

there's also the Webkit developer console, which is included in Chrome and 
Safari, and prvides the same functionality (but isn't an add-on), and the 
deveolper toolbar in IE8, but I can't remember if that's an add-on or not.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Bobby Jack]

--- On Wed, 8/18/10, Keith Purtell  wrote:

> First, I don't understand width.
>
> Second, I especially don't understand how he has
> illustrated margin.
> 
> Third, the padding. Why is it necessary and how is it
> affecting the the flow of text around my images?

I don't think anyone's mentioned Firebug yet, which must be a first! It's a 
Firefox plugin which is excellent as a debugging tool, a design tool, and a 
training tool for those new to CSS. Firebug will (to some extent) answer your 3 
questions - and many more - by providing visual feedback, in your browser, of 
how various styles affect the design.

http://getfirebug.com/

I recommend it as an absolute must for any web design work.

- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Bobby Jack]

--- On Wed, 8/18/10, Wesley Acheson  wrote:

No-one spotted the deliberate mistake? ;)

> 4 values: are Top, bottom, left and right.

should be

4 values: are top, right, bottom, left


- Bobby
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Alan Gresley]

Climis, Tim wrote:
>> {float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
>>
>> First, I don't understand width. It's not the width of my image; what is
>> it doing?

Currently the width does nothing (please see below for reason).

[...]
> Padding is like margin, except that it's inside the border (so background 
> colors apply to it), and it doesn't collapse.  So, if you had a border around 
> your image, but you wanted some space between the image and the border, use 
> padding.  Or if you wanted a margin, but you wanted it to be green, you could 
> use padding for that too.  Or if you wanted the margins to not overlap on 
> adjoining elements, you can use padding for that as well.  Or if you need an 
> inside margin and an outside margin, padding is the inside, and margin is the 
> outside. (see below)

This is the current CSS.

.floatL {
   float:left;
   margin: 0 1 em 1em;
   padding: 0.25em;
}

Since IMG are inline elements, then any margin or width values will 
not be used. For the margin and width values to work, one must make 
the IMG display as a block element.

.floatL {
   float:left;
   margin: 0 1 em 1em;
   padding: 0.25em;
   display: block;
}

To see what the margin and padding values are actually doing, play 
around with this CSS.


.floatL {
   float:left;
   display: block; /* width and margin values are used */
   border: 5px solid blue;
   margin-top: 50px;
   margin-right: 50px;
   margin-bottom: 50px;
   margin-left: 50px;
   padding-top: 50px;
   padding-right: 50px;
   padding-bottom: 50px;
   padding-left: 50px;

}



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/