Solved

How to add padding to article images but not module images

Posted on 2010-08-26
8
610 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

691 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