CSS padding question

1,024 Posts

Frank Reply #1, 14 years, 6 months ago

Hi.

i am trying to get a shadow around text boxes on a biolerplate/1044 grid site.
So I created a class (box) with the neccesary settings. Works fine on text boxes.
Problem arises when I insert an image in the sama box, it get s wrapped in 'p' tags and get s the margin I defined for the 'p' elements, however I want my Images borderless and to have that shadow. But because the 'p' element has the following properties:

article p{padding: 0 10px 15px 10px;}

The image shows a white padding and the shadow, so I am trying toi reset the 'p' to zero but cant get it to work. What am I doing wrong, here s what I throw in after the prvious declaration

article p img {padding:0px; }

116 Posts

Wanze Reply #2, 14 years, 6 months ago

Hi franklos,

I think he second code does not work, because it sets the padding around the img tag to zero, but not around the parent-p tag.
You could use a class for your articles tag when it contains an image:

article.nopadding p { padding: 0 }

1,024 Posts

Frank Reply #3, 14 years, 6 months ago

yeah you re right. However the

article.noborder p {padding:0;}

assumes I have an option to sett a class somewehere in the richtexttv that could carry text or could have an image. So I want the no padding applied to the surrounding p in case of an image. In case of text, no padding should not applie.

I guess php could solve this but I (still) cant write two proper lines of php script.

Can t do text tv either cause the site will be filled by end users, who cant do HTML.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 14 years, 6 months ago

You could do it in javascript using the "parentNode" element selector.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

116 Posts

Wanze Reply #5, 14 years, 6 months ago

I write Javascript only with the JQuery library. If you can use this library, something like this should do the trick:

<script>
$(document).ready(function(){
 $('article p').has('img').css('padding','0');
});
</script>

1,024 Posts

Frank Reply #6, 14 years, 6 months ago

@sottwell tnx, but will have to start learning scripting, tried and tried, just not my cupper. @Wanze, the html looks like this

<article class="threecol box">
[[*middle]]
</article>

the css like this

.box {margin: 0 0 10px 0; padding: 0 0 10px 0;
  -moz-box-shadow: 5px 5px 7px #888;
  -webkit-box-shadow: 5px 5px 7px #888;
}
article p{padding: 0 10px 15px 10px;}

.row .threecol {
width: 22.05%;
}

All wrapped in a col and the article in a section wrap, all reset at start.

Would that change your script. The page is using jquery, beeing called in the footer so I suppose your script goes there somewhere?

116 Posts

Wanze Reply #7, 14 years, 6 months ago

Yes, you need to insert this somwhere after including the jquery.js file.
Try this snippet:

<script type="text/javascript">
$(document).ready(function(){
 $('article.box p').has('img').css('padding','0');
});
</script>

1,024 Posts

Frank Reply #8, 14 years, 6 months ago

@Wanze, was gone for a week, but that works fine, now there s just a margin-bottom to zero down.
Won t do it like this, a tip?

<script type="text/javascript">
$(document).ready(function(){
 $('article p').has('img').css('padding','0').css('margin-bottom','0');
});
</script>

Happy Easter....

116 Posts

Wanze Reply #9, 14 years, 6 months ago

Sorry completely forgot this thread.. did you solve it?
Try writing "0px" instead of just "0".

Cheers

1,024 Posts

Frank Reply #10, 14 years, 6 months ago

@wanze, that s a good solution, fixed it all. Thanks loads