Re: [WSG] list item markers disappear behind floated image
Peter Ottery wrote: Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always obey the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem. Hi, i just woke up nose straight in to thunderbird ... :) have you tryed to ad a padding or a margin to your floated img ? padding or margin right should to the trick for you since everithing that comes after the img will stay n pixels/em/etc away from it ! and if there is no image there is no padding or margin ... i think but than again i just woke up :) ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] list item markers disappear behind floated image
Title: list item markers disappear behind floated image Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always obey the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem.
Re: [WSG] list item markers disappear behind floated image
Well - I have not experienced this - but - if I was looking for a quick fix (although it will sound like a hack) I would look at adding a DIV around either or both blocks of text and see if that helps with the visible/invisible image issue. (I know - it sounds like wrapping table tags to give nice layout - but CSS is still not perfect and certainly not across all browsers) Gary Menzel - Original Message - From: Peter Ottery [EMAIL PROTECTED] Date: Tue, 17 Aug 2004 16:52:05 +1000 Subject: [WSG] list item markers disappear behind floated image To: Web Standards Group (E-mail) [EMAIL PROTECTED] Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always obey the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem. ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] list item markers disappear behind floated image
Pete,
This may sound insane but the problem is fixable by floating the ul element.
ul { float: left; }
0r if more specific version is needed:
ul#wrapped-list { float: left; }
This will have a major impact on content that comes after the list (will
appear up beside the list), but this could be fixed by clearing after the
list. You could clear the semantically pure way:
http://www.positioniseverything.net/easyclearing.html
Or, you could apply an html based clear after the list.
Ok, I know it is a weird solution...
Russ
Hi,
I have a problem with images that are floated left and then when a list wraps
around that image the list bullet points themselves dont get pushed out by the
floated image and instead remain behind (or on top of) the image. to help
explain i've put a simple demo page together to show the problem in its most
basic form explain in a bit more detail:
http://c41.com.au/test/ul_test.html
the css is all inline very basic. the img tag has an empty src on purpose.
this is just an *example* of the prob. dont fear, the execution looks better
than the example :)
basically what I'm looking for is if there is a way to make the list item
markers always obey the floated image, but just behave as normal when the
image doesnt appear.
any help greatly appreciated. hope i've explained this well enough...
pete
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] list item markers disappear behind floated image
Title: list item markers disappear behind floated image Try giving the ul list-style-position:inside. No need for additional p or div. drew From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Ottery Sent: Tuesday, August 17, 2004 2:52 AM To: Web Standards Group (E-mail) Subject: [WSG] list item markers disappear behind floated image Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always obey the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem.
RE: [WSG] list item markers disappear behind floated image
Title: RE: [WSG] list item markers disappear behind floated image
Russ wrote: This may sound insane but the problem is fixable by floating the ul element.ul { float: left; }
that does sound weird but on reflection of the finer points of the behaviours of floats, does make sense. fix a float with a float...
this method should do the trick for my situation as the next thing after the ul will need to be clear:left anyway. so thanks! :)
drew wrote: Try giving the ul list-style-position:inside. No need for additional p or div.
ah ha! so thats what list-style-position:inside is for. have often wondered. the only drawback i can see from that is that when the list item text wraps, it wraps right back underneath the marker (and your text isnt all nicely aligned left). Again, in my situation this wouldnt affect me cause the text is of a gauranteed length and wont wrap (in all but the most exteme cases of text sizing, and I'm not concerned about alignment in those instances) so I can use this method aswell.
thanks guys! not 1 but 2 workable solutions. great stuff.
cheers,
pete
ps: in breaking news (sorry, cant help myself) please dont reply to this list about this, but there are 2 whales outside my window *inside* darling harbour (past the bridge in sydney harbour). theres a bunch of people taking photos so hopefully one will end up on shameless plughttp://www.smh.com.au//shameless plug. which uses a css layout. see. on topic ;-)
Re: [WSG] list item markers disappear behind floated image
Pete, that's not a drawback - that's what list-style-position: inside is intended to do! N ___ Omnivision. Websight. http://www.omnivision.com.au/ On Wednesday, Aug 18, 2004, at 09:45 Australia/Sydney, Peter Ottery wrote: the only drawback i can see from that is that when the list item text wraps, it wraps right back underneath the marker (and your text isnt all nicely aligned left).
Re: [WSG] list item markers disappear behind floated image
I tried that too, Hugh, but in Safari the background images on the list items went all the way under the floated image. Each browser seems to have their own reading on where the background of a list should stop. Here is a sample page with both options: http://www.maxdesign.com.au/jobs/css/list-float.htm?? Note that the float-left option also has display:inline for the wonderful IE Russ The only other (not quite ideal) solution would be to abandon the default HTML bullets (list-style:none) and add graphic bullets closer to your list items: padding-left: 1em; list-style: none; background: url(images/bullet.gif) no-repeat 110px 0.4em; If you increase the right margin on the image just a little you will have more room to play with. A tricky one! -Hugh ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
