homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<ul> discs cut off/hidden by floating image next to it.
Perfection




msg:3591445
 12:19 am on Mar 5, 2008 (gmt 0)

I'm looking to float an image to the left of an unordered list. The problem is the discs from the list get covered by the floating image.

If I increase the margin between the image and list to a large enough width, the discs will eventually get pushed into view. However, this causes the rest of the non-list text on the side of the image to get pushed too far away and look a little funny.

Is there some ul value that I'm just not aware of that will easily fix this? Or perhaps something else?

Any help would be greatly appreciated. Thanks.

 

MarkFilipak




msg:3591466
 12:54 am on Mar 5, 2008 (gmt 0)

I've found floats to be a real pain. They're hacks. Browsers deal with floats by inserting a p closing tag (i.e., </p>) into the text. This screws up lots of things. I don't know of a fix. Sorry. As a consequence of this, I avoid floats.

SuzyUK




msg:3591649
 7:14 am on Mar 5, 2008 (gmt 0)

maybe the 4th post in this thread [webmasterworld.com] would be an answer?

(2nd post is not your answer as that's what you're trying already!)

a possible downside to that would be that if the list were longer than the image it would not wrap

You can also pull the list bullet "inside" the ul, the default is outside e.g. list-style-position: inside;, which might help but it's not similar x-browser either and the possible downside with that one is that longer list items wrap under the bullet instead of inline with the line above it.

MarkFilipak - Welcome to WebmasterWorld!

you're almost right about the floats, but the UA's don't insert a <p>. All elements generate Anonymous Inline Boxes [w3.org] (AIB's) it's those anonymous inline boxes which are margined (given clearance) to sit beside floats and allows for wrapping around floats to occur. In the case of a multi line block like a long <p> or a ul with many list items, each line generates a single AIB and is treated separately explicitly for the purpose of wrapping like a long column of text in a newspaper column.

so only the AIB is cleared the block element itself is not and sits underneath the float.

ul's and ol's are already a different case in that their default indent is created by either padding or margin on the UL/OL and their AIB's do not include the bullet unless its position is moved to "inside" so while it's not too hard to get the bullet from under the image, it is hard to get it there with its default indent, the correct way to margin from a float is to margin the floated element itself as Perfection has already tried, but that doesn't help if there's other plain text beside the float too.

-Suzy

MarkFilipak




msg:3592044
 4:47 pm on Mar 5, 2008 (gmt 0)

Hi Suzy,

Thanks for your greeting. I feel at home here.

You're right. UAs don't insert <p> when they encounter a float, they insert </p>, which is what I wrote. IIRC, they do this only for right floats, not left floats -- or is it the other way around? I've tried to replicate what I've encountered in the past and I can't cook up an example. I can only relate what I've found in the past (read on...)

I had a table cell with text in a p-element that justified the text. I put a float (a float:right, IIRC) in the middle of the text. My innerHTML looked something like this:

<td><p style='text-align:justify;...'>Some text. Some text. Some text. Some <div style='float:right;...'> ... </div>text. Some text. Some text.</p></td>

The text following the float didn't have the p-element's style, it had the table-element's style! When I examined the innerHTML I found this:

<td><p style='text-align:justify;...'>Some text. Some text. Some text. Some </p><div style='float:right;...'> ... </div>text. Some text. Some text.</p></td>

(Note the inserted </p> just before the floated div.) I was amazed!

I changed my source code to eliminate the p-element and move the style into the td-element, to wit:

<td style='text-align:justify;...'>Some text. Some text. Some text. Some <div style='float:right;...'> ... </div>text. Some text. Some text.</td>

and all was happy. (The UA still inserted a </p> just before the floated div, but it didn't have any visual consequence.)

SuzyUK




msg:3592190
 6:46 pm on Mar 5, 2008 (gmt 0)

ahh I see what you're getting at Mark, ..however it makes no difference to what I said previously <p></p> whatever it's Anonymous inline boxes that float honest ;)

That behaviour you're describing is not float related, it's normal behaviour for HTML parsers.

in HTML certain elements have what's called Optional Closing Tags a <p> is one of them (there are others). The thing is all these "optional" closing tags are still really necessary for the correct rendering of a page and if you don't explicitly insert them, as is your right, a UA will implicitly insert them, that it it will close these elements according to the rules of the HTML.

XHTML requires that ALL elements are closed and it's easier to see (and for me to explain) if you've learned the XHTML way (have you?)

In the case of a <p> the rule is that a UA will implicitly close the </p> as soon as it meets any other block level element. (that includes a div whether floated or not).. if you have learned the XHTML way you will know that makes sense because you cannot nest a block element inside a <p>, therefore the UA is simply following that rule. Although the </p> is optional it still needs to exist in the flow in the correct place and the UA will insert it.

It's not always a simple a rule as that one, e.g. the <head> element also has an optional closing tag.. but the UA knows to implicitly insert </head> right before the opening <body> tag

also </body> and </html> are optional but it doesn't take genius to figure out where they should go ;)

I have an internal toolbar I use which shows at glance which tags are optional or not, but as I learned the (soon to be) old fashioned XHTML way I've always used closing tags.. it has been good practice AND it has helped me understand CSS better so I don't regret it ;)

-Suzy

Perfection




msg:3592201
 7:06 pm on Mar 5, 2008 (gmt 0)

Thanks for the reply Suzy. I tried your suggestions, and it seems the best solution for me is to just float the image to the right of the list. Doing so eliminates all of the problems I was originally having, and I guess floating the image to the other side of the list isn't THAT big of a deal.

Thanks again for the help.

SuzyUK




msg:3592226
 7:28 pm on Mar 5, 2008 (gmt 0)

You're Welcome!

yes floating right will work as that avoids the default indent altogether, I'm glad you found the best solution for you

MarkFilipak




msg:3592410
 11:05 pm on Mar 5, 2008 (gmt 0)

>> In the case of a <p> the rule is that a UA will implicitly close the </p> as soon as it meets any other block level element.

Really? I'm not an XHTML programmer. Can you give me a reference for this rule?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved