Solved

How to add padding to article images but not module images

Posted on 2010-08-26
8
609 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 250 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 50 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 200 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

Technology Partners: 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!

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

737 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