Hehehe evil tables!!!!!
Andrew From: [email protected] [mailto:[email protected]] On Behalf Of Noel Tekiri Sent: Monday, 4 May 2009 3:09 p.m. To: [email protected] Subject: [phpug] Re: UL margin near floated image issue 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 _____ Find someone to light your fire this winter at Match.co.nz Brrr... its getting cold out there <http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fdating%2Enz%2Emsn%2Ecom%2Fc hannel%2Findex%2Easpx%3Ftrackingid%3D1048628&_t=773568480&_r=nzWINDOWSliveMA ILemailTAGLINES&_m=EXT> … __________ Information from ESET NOD32 Antivirus, version of virus signature database 4050 (20090503) __________ The message was checked by ESET NOD32 Antivirus. http://www.eset.com --~--~---------~--~----~------------~-------~--~----~ 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}