Hello Peter,
Another solution is to use "overflow:hidden" on your UL element. This will
effectively resize the UL element to fit within the space next to a floated
element. You can even leave out the div that wraps the img tag and it will
still work!
img {margin:30px; float: left;}
ul {overflow: hidden;}
The only downside to this approach is that if your list is longer than the
height of the image - the list will not wrap under the image.
Don't use tables - TABLES ARE EVIL!!!
Hope that helps?
Date: Sun, 3 May 2009 10:20:11 +1200
Subject: [phpug] Re: UL margin near floated image issue
From: [email protected]
To: [email protected]
>Or be evil and put it in a table
Of all the excellent suggestions, this is the one that actually works. I chose
to wrap the UL in a one cell table, and problem solved. Of course it means
putting all ULs in tables but yeah, what can you can say about such a bizarre
behavior. The right flloat is also an excellent piece of lateral thinking! Ill
use that too.
Cheers all
Peter
On Mon, Apr 27, 2009 at 6:32 PM, Andrew McMurtrie <[email protected]> wrote:
Just to qualify that: the float left image will affect the position of your
text not the bullet point or the edge of the other elements like <p> or <ul>
they will start from the edge of the page. Either add a padding-right to
your image or use margins on your text. If you don't have the boarders then
padding should be ok if you do have boarders or background colour you need
to use margin. Think that is how it works. Or be evil and put it in a table
(that is bound to excite some people) and your positioning woes will vanish
in a puff of none purest smoke.
Andrew
-----Original Message-----
From: [email protected] [mailto:[email protected]] On Behalf
Of Andrew McMurtrie
Sent: Monday, 27 April 2009 6:16 p.m.
To: [email protected]
Subject: [phpug] Re: UL margin near floated image issue
Only margin will work to give you the indent you need with that left
floating element, padding won't do it.
Andrew
-----Original Message-----
From: [email protected] [mailto:[email protected]] On Behalf
Of Dmitry Ruban
Sent: Monday, 27 April 2009 5:47 p.m.
To: [email protected]
Subject: [phpug] Re: UL margin near floated image issue
Hi Peter,
Give some space to left floating div by adding "margin-left: 150px" to P
and UL elements.
Peter S:
> Ok. I tried that and it helps ... a little, but still not right. This is
> really starting to look weird, probably a browser bug, but in both IE
> and firefox? I have updated the test page with colored borders and valid
> xhtml.
> http://farmworks.studiomadfish.com/test.html
>
> Any other ideas?
>
> The closest i can get to a sane solution is this (if they can live
> without indented lists):
> á á á á ul, li {margin:0; padding:0;}
> á á á á ul á{list-style-position:inside;}
>
> Would another doctype help?
>
> Surely others have encountered this bizzzare behavior? Its not just ULs
> its any thing with margins or padding near floated elements.
>
> <Begins tearing hair>
>
> P.
>
>
>
>
> On Mon, Apr 27, 2009 at 8:05 AM, Rory Casey <[email protected]
> <mailto:[email protected]>> wrote:
>
>
> á á li { list-style-position:inside; }
>
> á á + add some margin to your img
>
> á á img { margin:1em; }
>
> á á Adding borders to your ul elements lets you see what's going on.
>
> á á On Mon, Apr 27, 2009 at 6:40 AM, Peter S <[email protected]
> á á <mailto:[email protected]>> wrote:
> á á á> Thanks guys. The suggestion to add padding just pads the problem
> á á further
> á á á> right. The suggestion to add clear='both' stops the wrap, which i
> á á want. The
> á á á> suggestion to make the img into a block level element makes no
> á á difference,
> á á á> and indeed the original problem page has it inside a div box.
> á á Incidentally
> á á á> the problem is the same using <img align='left' src='ddff' />
> á á á>
> á á á> So how exactly does one left float an image without problems like
> á á this?
> á á á>
> á á á> Peter
> á á á>
> á á á>
> á á á> On Sat, Apr 25, 2009 at 7:54 AM, .: christian mazur :.
> á á <[email protected] <mailto:[email protected]>>
> á á á> wrote:
> á á á>>
> á á á>> Hi!
> á á á>> Add "padding-right: n px" on your img tag.
> á á á>>
> á á á>> Ex.
> á á á>> <img style="float: left; padding-right:30px;"
> á á á>> src="http://farmworks.studiomadfish.com/images/soil_ss1.jpg"/>
> á á á>>
> á á á>> ch.-
> á á á>>
> á á á>>
> á á á>> 2009/4/24 Peter S <[email protected]
<mailto:[email protected]>>:
> á á á>> > Ive been doing mysql/php/html/css for a while, and
> á á occassionally noticed
> á á á>> > odd
> á á á>> > margin behavior around floated elements, but this UL oddity
> á á has finally
> á á á>> > made
> á á á>> > me ask whats going on...
> á á á>> >
> á á á>> > The problem is distilled down to a few lines here:
> á á á>> >
> á á á>> > http://farmworks.studiomadfish.com/test.html
> á á á>> >
> á á á>> > But ive also seen things like <hr>s run the full page width
> á á through a
> á á á>> > floated element.
> á á á>> >
> á á á>> > Appreciate any pointers, thanks alot.
> á á á>> >
> á á á>> > Peter
> á á á>> >
> á á á>> >
> á á á>> >
> á á á>> > >
> á á á>> >
> á á á>>
> á á á>>
> á á á>
> á á á>
> á á á> >
> á á á>
>
>
>
>
> >
__________ Information from ESET NOD32 Antivirus, version of virus signature
database 4035 (20090425) __________
The message was checked by ESET NOD32 Antivirus.
http://www.eset.com
__________ Information from ESET NOD32 Antivirus, version of virus signature
database 4035 (20090425) __________
The message was checked by ESET NOD32 Antivirus.
http://www.eset.com
__________ Information from ESET NOD32 Antivirus, version of virus signature
database 4035 (20090425) __________
The message was checked by ESET NOD32 Antivirus.
http://www.eset.com
__________ Information from ESET NOD32 Antivirus, version of virus signature
database 4035 (20090425) __________
The message was checked by ESET NOD32 Antivirus.
http://www.eset.com
_________________________________________________________________
Brrr... its getting cold out there… Find someone to light your fire this winter
at Match.co.nz
http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fdating%2Enz%2Emsn%2Ecom%2Fchannel%2Findex%2Easpx%3Ftrackingid%3D1048628&_t=773568480&_r=nzWINDOWSliveMAILemailTAGLINES&_m=EXT
--~--~---------~--~----~------------~-------~--~----~
NZ PHP Users Group: http://groups.google.com/group/nzphpug
To post, send email to [email protected]
To unsubscribe, send email to
[email protected]
-~----------~----~----~----~------~----~------~--~---
![http://farmworks.studiomadfish.com/images/soil_ss1.jpg"/](http://farmworks.studiomadfish.com/images/soil_ss1.jpg"/){kind=link}