Click to See Complete Forum and Search --> : Bullets go under/over aligned left images
WebMaister
04-16-2009, 02:23 PM
I hope is something simple to solve, but I couldn't find how to fix this. :confused:
Whan placing an ordered/unordered list close to an aligned left image (or float: left if u prefer to use styles) the bullets go behind the image in IE and over the image in FF/Safari.
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
</head>
<body>
<div>
<img src="test.jpg" style="width: 150px; heoght: 200px; float: left">
<p>Hello this is some text, the bullets below are not showing they go behing the image in IE and over the image in FF/Safari (same issue if we use an ordered list).</p>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
</ul>
<p> </p>
<p> </p>
<p>Hello this is more text, here the bullets display properly as supposed.</p>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
</ul>
</div>
</body>
</html>
Does anyone know how to solve this issue?
I mean obviously I could add more margin left to the 1st bullets' list, but is there way to fix this issue for all bullets' list without having to add special styles for each bullets' list that comes close to an aligned left image?
Try changing your image to display: block;
WebMaister
04-16-2009, 03:24 PM
Try changing your image to display: block;
It obviously does not work! :eek:
Obviously if I remove the float: left (or align="left" if u prefer to use attributes in place of styles) it works, but I wouldn't need the display: block at all.
And it's not what we want here. We want text to flow around image that's why we set float: left.
escoles
01-14-2010, 01:02 PM
Dealing with this same issue. A more precise description of the behavior might be this: The left edge of bulleted text aligns at the right margin of the image.
It's cross-browser -- I've observed it in IE6/7/8, Firefox 3.5.x, Safari 4 and Chrome for Mac. Have tried the following to deal with it:
<ol><li>Increased margin and padding settings -- no effect on either the UL or LI containers. </li><li>placed image in a separate paragraph (ensure it's not within an LI container)</li><li>w.r.t. [2], tried setting padding attributes on the containing P (which I now know can't work because floating collapses the parent)</li></ol>
So, simple and obvious solutions don't work.
Tancredi
01-14-2010, 01:41 PM
..is if the image is set to float, you should define its position in relation to the container div and place it where you want it to the side to the ul. If you don't specify the position the browsers will place it at their own default value...:)
Tancredi
01-14-2010, 01:42 PM
img {
position: relative;
top: ?
left: ?
}
Tancredi
01-14-2010, 01:45 PM
..if you throw in a bulleted image into the mix you have to separate the two img by using a class selector or a contextual selector - on either one will do probably.
escoles
01-14-2010, 01:55 PM
I don't know whether that would address this problem or not, but it's a totally unworkable solution in a site with user-maintained content. If you have to rely on pixel-level positioning to place images, then you basically can't have end users place images.
Think of sites running on CMS platforms, like Drupal or Joomla.
Tancredi
01-14-2010, 02:22 PM
Just to respond to that last comment - if you don't specify the relative position it is there anyway. All images, and every other block level element in CSS is set by default to position in relation to its parent element. So all you are doing is taking control of the placement. In other words everything block level is set to position relative in the browser style sheet unless you specify otherwise.
If you were not using a float property you would achieve the same result by using the margin of the image itself to position it within the parent element. But as the image is not behaving like a block level element, you should set the positions to 0 or you are leaving it to the browser. Also notice how the float is effecting the image in the list. You should use a clearing rule, and define how you want each image to be positioned. I don't know if it matters if you use a cms or not because its standard CSS practice to be specific especially when floating is concerned.
escoles
01-14-2010, 02:32 PM
My point about the CMS is that the type of positioning you're describing is not something that one can reasonably expect end users to do. Most of the web is NOT edited by developers, it's edited by end-users. So solutions to normal editing problems (like the fact that bullets don't clear floated images) which require people to know anything about CSS, including how to spell it, are non-solutions. They have to be able to apply a style class from a pull-down list (in my experience, that's absolutely the most sophisticated thing you can expect of them) and be done with it.
I'm not sure what you mean about using a clearing rule. The point here is to have the list wrap around the image. Or are you saying set the UL to clear: none? I'm not following you.
It looks as though it might be possible (I haven't re-tried it yet) to get the margin-right property to make the bullets display in the whitespace instead of on top of the image, if you make margin-right large enough. But to do so you have to set it to a value at least equal to the amount of the bullet indent, which leaves an extremely wide right margin for normal text -- i.e., warping the normal presentation (ordinary text) to suit the exception (bullets).
Tancredi
01-14-2010, 02:32 PM
p.s if you are really desperate use blueprint.
http://www.blueprintcss.org/
You might use the margin property anyway on the img rule, it will work, but you'll need to do the math.
If the site content is user generated I agree with the last post that you should use a cms.
Tancredi
01-14-2010, 02:36 PM
if you want to wrap a list around an image. first place the image and the list in the same parent element. Place the image in a div and float the div to the left. Floating will take care of the rest. If you have an image inside a list this method wil not effect the image because you are floating the div, not the im tags.
That should work.
Tancredi
01-14-2010, 02:45 PM
as far as controlling the exact positioning of the image within the list...target it with a contextual or ckacss selector.
body div li { }
you could use a class selector or an id to signpost the div or the ul.
Tancredi
01-14-2010, 02:50 PM
If you post the css it may give up the answer...
escoles
01-14-2010, 02:51 PM
Again, these are solutions that only work in terms of end-user workflow if you are editing code using a web development tool. They do not work for user-generated content. You can't tell people to put all their images in divs -- it's just not realistic. That's assuming it would work.
Let me put this plainly: This is a defect in how browsers handle lists and images. I really don't care whether it's explicable or makes logical sense when you think about how the DTD is specified or the DOM is parsed, it makes no intuitive sense to a user. It doesn't work that way in any editing environment they use, anywhere else. It's something that's easy to do in any word processor, without having to go through weird manipulations. That's what matters.
The only real workaround for this at the end of the day seems to be to not use left-floated images in user-maintained content that might have bullets adjacent to the images.
As for Blueprint, I'll look into that on the next site. I've used Tripoli for the last 7, so maybe it's time to look at other reset libraries again.
Tancredi
01-14-2010, 03:05 PM
well..this all depends on how skillfully you prepare the css. I mean the float property is designed to do wrap text around an the IMG element. That was the job it was added to CSS1 to do so you can assume that it works. I can't say for sure that how you are coding your CSS is sufficiently well thought through to make it work how you want it to-obviously without seeing it it would be me assuming that you have thought it through. So I can't comment nor make a suggestion that would be informed.
god bless and good luck
verikal
01-14-2010, 03:34 PM
Try this ...
ul {overflow: hidden;}
OR
img {margin-right:35px}
Tancredi
01-14-2010, 03:45 PM
I checked out your site its nice by way. Here is a Website I designed that uses floated images, lists...the lot.
http://alicesaunders.com/
If you have any specific questions relating to that I can assist you using my own style sheet as I can't really decipher anything from two rules that you provided.