?
Solved

How to add padding to article images but not module images

Posted on 2010-08-26
8
Medium Priority
?
611 Views
Last Modified: 2012-05-10
I've adding left-padding to article images so keep text away from the edges, but doing this causes all other images, such as that in the header on the supplied link, to move to the right.

I need someone to help me with the CSS to stop this from happening on the site.

http://gator967.hostgator.com/~tekspec/vasarelli/index.php?option=com_content&view=article&id=54&Itemid=48
0
Comment
Question by:TonyCabone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 9

Expert Comment

by:Snarfles
ID: 33538394
rather than adding it to .img add it to its own class

<img class="paddedimage" border="0" align="right" src="/~tekspec/vasarelli/images/stories/bottle-shots/Chardonnay-mv.jpg">

then to your templates css add

.paddedimage{
padding-left:15px;
}

so basically when you add an image that you want padded just add this to the tag

class="paddedimage"
0
 

Author Comment

by:TonyCabone
ID: 33538644
Ok thanks for that it will work however I don't want users of the back end to have to input the code manually.

Is there a way that I can override the css in the header images using your method, rather than the article images?
0
 

Author Comment

by:TonyCabone
ID: 33538648
points increased
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Accepted Solution

by:
Snarfles earned 1000 total points
ID: 33538705
if you instead want all images on the site to have the padding-left of 15px but for the header image not to. Just go into your template file and change the following

<img width="640" border="0" src="/~tekspec/vasarelli/images/stories/wine.jpg">

to

<img width="640" border="0" style="padding-left: 0px;" src="/~tekspec/vasarelli/images/stories/wine.jpg">

This works because the direct style is applied to the element last which overrides the default img class.
0
 
LVL 4

Assisted Solution

by:jayantc
jayantc earned 200 total points
ID: 33538838
add padding to

table.contentpaneopen, table.contentpane img {padding-left:15px;}

remove
img { border: 0 none; padding-left: 15px;}

- JayantC
0
 

Author Comment

by:TonyCabone
ID: 33539080
Snarfles this solution also works but what about when I need to control these elements differently for IE & FF?

I need to control the padding of the images in this modules using CSS, like jayantc's suggestion only that did not appear to have any effect, any other ideas?

Points maxed.
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 800 total points
ID: 33539267
What Snarfles suggested was right!, and it applies to the article images.
In addition, you must remove the img css (img { border: 0 none; padding-left: 15px;}).
Another option, is to put the header image in a div with an id (<div id='header_image'>), and then add to the css the following:
#header_image .image {
      padding-left: 15px;
}
0
 

Author Closing Comment

by:TonyCabone
ID: 33540936
correct syntax #header_image img
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question