Re: [css-d] Negative margins for image overflow

[Gunlaug Sørtun]

Mike Breiding wrote:

> 
>  So, I used a negative margin to "pull" the image into the left 
> column. It appears as I would like  it in Fire Fox, but in IE 6.0 the
>  image is clipped.

> Question: Is there a better way to handle this?

Since you're floating so many images you can of course float this one
too, but that's just a variant and not really any better.

> If not, can the clipped image be changed in IE6?

http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Gunlaug Sørtun]

Mike Breiding wrote:

>  alt=""/>  height="130" alt=""/>
> 
> If the long image is wrapped in a paragraph or an empty paragraph 
> inserted between the two images they then both float left.

Yes, floats act as floats, and in order to prevent them from trying to
line up alongside preceding floats we often have to separate or 'clear'
them.
Since cases and intended line-up differ, there's no definitive "works
perfect in all situations" solution. Some times we need a separating
element or 'clearer', but in most cases we can make those floats clear
each other with CSS only.

In your case those left-floating images should be given an additional
'clear: left' style-rule, to make them line up under each other without
the need for an element - paragraph or whatever - to separate them.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Tim Dawson]

Gunlaug Sørtun wrote:
> Mike Breiding wrote:
> 
>> > alt=""/> > height="130" alt=""/>
>>
>> If the long image is wrapped in a paragraph or an empty paragraph 
>> inserted between the two images they then both float left.
> 
> Yes, floats act as floats, and in order to prevent them from trying to
> line up alongside preceding floats we often have to separate or 'clear'
> them.
> Since cases and intended line-up differ, there's no definitive "works
> perfect in all situations" solution. Some times we need a separating
> element or 'clearer', but in most cases we can make those floats clear
> each other with CSS only.
> 
> In your case those left-floating images should be given an additional
> 'clear: left' style-rule, to make them line up under each other without
> the need for an element - paragraph or whatever - to separate them.
> 
> regards
>   Georg
  Perhaps this is a good opportunity to ask a question that's puzzled me for a 
while.  Can you have both a 'float' and a 'clear' in the same style ?
Georg seems to be saying you can. Is the order of the rules is going to make a 
difference ? (I'd have thought so).
e.g.
img.leftImg {float:left; clear:left;}

Tim Dawson

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Philippe Wittenbergh]

On Sep 9, 2008, at 8:49 PM, Tim Dawson wrote:

>  Perhaps this is a good opportunity to ask a question that's puzzled  
> me for a
> while.  Can you have both a 'float' and a 'clear' in the same style ?
> Georg seems to be saying you can. Is the order of the rules is going  
> to make a
> difference ? (I'd have thought so).
> e.g.
> img.leftImg {float:left; clear:left;}

Yes you can have both on the same element, and no, it doesn't matter  
in which order you write the rules.

selector {float:left; clear:left;} and selector { clear:left;  
float:left;} will give exactly the same result.

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





__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Gunlaug Sørtun]

Mike Breiding wrote:

> I added 'clear: left' to the rules for the '.leftImg' class. This
> does the job in FF, but in IE 6 it forces the first paragraph to the
> far right into a very narrow column.

That's because you have a 'width' on paragraphs, which to IE/win means
'hasLayout'[1] and non-standard behavior. There are several triggers for
IE's non-standard behavior in your styling - general use of 'position:
relative' for instance, so especially IE6 creates problems.

There's also severe problems caused by the 'auto-expansion' bug in IE6
(and older) on narrow windows, and some problems both on very narrow and
very wide windows in all browsers.

Major debugging necessary if you want stability in the most used IE/win
versions, but it isn't too bad since problems are mostly caused by
"over-styling", and the HTML source-code is generally sound.

> Back to the P container for images: I should then create another
> class for the rest of my images which will replace any styling
> applied by a P tag?

Generally, yes, another set of styles -- see below.

> Currently all my images are wrapped in P tags, which I now understand
> is not appropriate.

I'm not saying "having images inside paragraphs is wrong", as "right" or
"wrong" here depends on _why_ you have those images in paragraphs.

- What I am saying is that you do not need paragraphs (or other
elements) as "wrappers" for styling and positioning of images, as images
can be styled directly.

- Sometimes you want images to interact with text - text-wrapping around
the image for instance. In such cases you may as well place the image in
the paragraph along with the text.

An example from your page with such a change...

 It's June 2, 1977, and I am on I-79 in Pennsylvania ...


This allows for more flexible and efficient styling, as the paragraph
_and_ the image inside it can be styled. You can also have different
style-rules for images depending on whether they're inside or outside
paragraphs (or other elements), which provides you with more detailed
and targeted control of final presentation.

For more on how to control/position floats - images and otherwise - see...



--
Tim Dawson asks:

> Can you have both a 'float' and a 'clear' in the same style ?

Sure, no problem.

That is: especially IE6 can produce serious problems in some cases,
since that old thing is - well - pretty buggy.

I often have to add extra clearing-elements and other "strange"
solutions to make IE6 behave - especially since I prefer to keep IE6 in
quirks mode. Maybe that's why I'm generally more focused on
functionality than minimalism and purity :-)

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Alan Gresley]

Tim Dawson wrote:

>   Perhaps this is a good opportunity to ask a question that's puzzled me for 
> a 
> while.  Can you have both a 'float' and a 'clear' in the same style ?
> Georg seems to be saying you can. Is the order of the rules is going to make 
> a 
> difference ? (I'd have thought so).
> e.g.
> img.leftImg {float:left; clear:left;}
> 
> Tim Dawson


Yes you can but don't try to clear a previous float that is floated in 
the opposite direction since this will trigger a bug in < IE7.





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

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

http://www.wearechange.org/
__
css-discuss [EMAIL PROTECTED]
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] Negative margins for image overflow

[Mike Breiding]

Thanks to everyone for their help on this.
None of my replies went to the list and I had to set up a new account
for get mail to the list.

-Mike

__
css-discuss [EMAIL PROTECTED]
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/