images left justified cover bullet points
-
-
- Real World Media Group
- Rocketeer
- Posts: 53
- Thanks: 1
-
Hi all,
Just wondering if anyone has any easy work arounds for the following problem.
When I left justify an image (even when I add margin to the right)
If its next to a bullet point list, the bullet points get covered over.
Ho do I stop this from happening. More importantly what is an easy way to explain to the client how to stop this from happening?
cheers,
anthony.
-
-
-
- Houston
- Elite Rocketeer
- Posts: 1077
- Thanks: 2
- How about a link to the problem if possible. There could be more than one thing causing this to happen. Is it happening in all browsers that you have tested or a specific one?
- Houston Brown -
www.splitlightdesigns.com
Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
mySQL Version = 5.5.21
Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
-
-
-
- Real World Media Group
- Rocketeer
- Posts: 53
- Thanks: 1
-
Hi Houston,
here is a link to an example of what I am talking about.
113.20.7.57/~nalum/index.php?option=com_...icle&id=99&Itemid=71
I did a bit more testing and found that the bullet points only disappear when your add a "list class" to them. Normal bullet lists are fine.
In this example I have created a right margin of 80px to be absolutely sure I have heaps of margin space. The list is:
# Credit Cards (Visa, Mastercard)
# EFTPOS
# Cash
# Direct Deposit
they have the-
class applied to them. and with the image there the bullet points are not in view.
Hope this helps.
cheers,
anthony.
-
-
-
- Houston
- Elite Rocketeer
- Posts: 1077
- Thanks: 2
-
The reason this is happening is because the image is floating which means that the image is actually covering the bullet points but pushing the UL to the right. So it wouldn't matter how much margin you put on the image because it is floated and the bullets will always stay behind the image in this case. By increasing the padding of the UL you will force the bullets to be visible. Since the image is 200 px wide you will need at least that much before you even start to see the bullets. I found 249px to be just right.
The following is from line 15 in typography.css
ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4 {
padding:0 0 0 249px;
}
This image is hidden for guests.
Please log in or register to see it.
Since this will effect all UL, you will probably want to create a special class for them and use it on this particular list. I think there might be other ways to fix this but this is what I would do.
Hope this helps. - Houston Brown -
www.splitlightdesigns.com
Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
mySQL Version = 5.5.21
Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
-
-
-
- Real World Media Group
- Rocketeer
- Posts: 53
- Thanks: 1
-
Thanks gents,
Great solutions. I think i may set the class up as this will be easy for the client to add to the image.
thanks again for your help.
cheers,
anthony...
-
Time to create page: 0.084 seconds