How can I remove the overlapping bullets on the image on this page, I would like to move them to the right
In IE7 the bullets are hidden on all the list items that wrap below the floated image. That was the reason I had suggested that you manually set the left padding on the UL for all browsers.
I want the margin from the right of the image to still be 10px. while the bullets should align to the paragraph above them, without having to use the inline on the list style position
That can be done but it is a little trickier than just using relative positioning.
To that request I would add: “While keeping the bullet margins at 10px after they wrap below the image”
That way they would line up with another <p> that might follow them.
Here is what I came up with -
http://www.css-lab.com/test/bullet-margin.html
It takes more code to do it but it meets your requirements plus my addition while keeping all browsers within a couple of pixels (even works in IE6). We have no control over where the UA actually positions the bullets and that is where the slight 1-2px discrepancy is found.
Even if you decide not to use the code it was a good challenge for me. I ran into the “Missing Bullet Bug” in IE7 and fixed it with inline-block. That was due to floating the first <p> tag with the intro text in it while having the UL following that float and sitting beside a float. If it had not been for that IE7 bug I could have done it without any hacks at all. The bug is present not in IE6 AFAIK.
Here is the code for future reference -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UL BUllet Margins with Sibling Float</title>
<style type="text/css">
#content {
float:left;
width:640px;
overflow:hidden;
font:12px/20px Helvetica, Arial, sans-serif;
background:#ECE8E1;
}
#content p {
margin:1em 10px 1em;
color: #716D6D;
}
#content p.pic-wrap {
float:left;
margin:1em 24px 1em 0;/*24px rt margin (bullets slide under appx 14px)*/
}
#content p.pic-wrap img {
display:block;
border:1px solid #D3C9BA;
padding:5px;
background:#FFF;
}
#content p.pic-rt {
/*float:left; /* triggers "missing bullet bug" in IE7 (1st bullet disappears)*/
display:inline-block;/* the bug fix*/
width:316px;
margin:1em 0 1em -14px;/*-14px lt margin (slide it under p.pic-wrap's 24px rt margin to make it 10px*/
}
* html #content p.pic-rt {float:left;}/*float for IE6*/
*+html #content p.pic-rt {display:inline;}/*IE7*/
#content ul {
margin:0;
padding:0 0 0 24px;/*places bullets appx. 10px from image*/
}
#content li {
margin:5px 0;/*add vertical margins with reduced line-height*/
line-height:15px;/*reset from #content*/
color:#585555;
}
</style>
</head>
<body>
<div id="content">
<p class="pic-wrap">
<a href="#">
<img src="http://www.mitcentre.com/wp-content/uploads/IMG00055-20100625-1830-300x225.jpg"
alt="" width="300" height="225">
</a>
</p>
<p class="pic-rt">
MITC today operates from new premises situated at TG Complex Suite 3 Level 1 Brewery Street Mriehel.
among its facilities and Resources one will find:
</p>
<ul>
<li>Reception facilities</li>
<li>Free WiFi internet connection</li>
<li>3 fixed computer stations with internet facilities (free use)</li>
<li>Use of technical library (reference only)</li>
<li>Classrooms are equipped with whiteboards, projection facilities and felt boards</li>
<li>An interactive board</li>
<li>A mini conference room is also available which can take a maximum of 50/60 students</li>
<li>Photocopies (available at a charge)</li>
<li>Central location with ample parking spaces in the vicinity</li>
<li>Lift connecting ground floor to first floor</li>
<li>Fully equipped to host physically disabled participants</li>
<li>Coffee and snacks</li>
</ul>
<p>
Lorem ipsum dolor sit amet consectetuer orci at vitae eget justo. Elit Vestibulum convallis cursus
Aenean laoreet neque Aenean justo Duis justo. Cras magna Donec Curabitur orci Pellentesque id Curabitur
Aliquam et Quisque. Diam lobortis Duis congue eget rhoncus ac massa auctor eget non. Vivamus eu id vel
enim pede et tortor ac orci tincidunt.
</p>
</div>
</body>
</html>
I would get rid of that RP you just put on the UL. It is throwing off the wrapping list items below the image.
To get any sort of x-browser consistency you are going to need to remove the default margin/padding on the UL and define them manually as I mentioned above. You have not done that yet.
The problem is that sibling margins (the UL) slide under floats (the img). You must place margins on floats to keep other content from sliding under the floats.
You could do as I suggested and then shift the first <p> tag left with a negative margin. That would require a class or :first-child to be used on it.
made the changes you suggested but this is still not what I want. I want the margin from the right of the image to still be 10px. while the bullets should align to the paragraph above them, without having to use the inline on the list style position
Hi,
- You can increase the right margin of that left floated image
.alignleft {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #D3C9BA;
float:left;
[B]margin-right:20px;[/B]
padding:5px;
vertical-align:text-top;
}
- Override the default margin/padding of the UL
#content ul {
margin:0;
padding:0 0 0 [B]20px[/B];
}
If you do both of those changes you should be able to adjust the bullet position as you choose.
As a last resort you could change the list-style-position to “inside” if you want to line the bullets up with the preceding paragraph.