Solved

How to add padding to article images but not module images

Posted on 2010-08-26
8
605 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
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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

863 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now