CSS help

shifty_uk

shifty_uk

shifty_uk

Soldato
Joined
27 Sep 2004
Posts
13,685
Location
.
Question 1.
Is there anyway to isolate and set the line height to items contained within a <p> tag?

For example, on my blog all the images within the posts are contained in a paragraph tag however when I change the line-height of the paragraph, it messes up everything else, including text. Could I have for example:

Code: 
.post p img {line-height: 0px;}
.post img {line-height: 0px;}

None of those work obviously but that's just to give an example of how I'd like to isolate the image tags. :)

Question 2.
I'd like to have all the images on the blog set to an opacity of circa 20% and only 100% visible when rolled over. However, I don't want the cursor to change nor do I want the images to link onto anything. What would be the best method of doing this?

Thanks in advance chaps, always a great help on here! :)
 
I've tried wrapping the images in a span class but even that isn't working! Really doing my head in this. I just want no gaps between the images :p
 
Tried it. :)

When I post an image it's automatically contained within a <p> tag which dictates the line height between the images. No matter what I try I can't alter the spacing between the images unless I edit the paragraph styling which in return makes it work but messes everything else up.

I just want zero spacing between the images but the line height of all text around it the same.
 
fez said:
If you put the line height back to a normal size and add margin-bottom: -5px to the img that should sort it out in most browsers.
Click to expand...

Nope, definitely not working in Safari :(

edit, got it working. Just means I need to individually add style="margin-bottom: -5px;" to every single image I have.
 
simisker said:
Bit more of a faff than my suggestion [plus you're correcting an em-based problem with a px-based solution, which isn't strictly sensible] :p
Click to expand...
Apologies, I'm not aware of the technicalities surrounding the issue :p
Riddell said:
Wait, how? Surely you just apply css:

Code: 
p>img{
margin-bottom: -5px;
}

Don't tell me you're applying inline CSS! ;)
Click to expand...
That's the way my img {margin-bottom: -5px;} is sitting right now on my style sheet but as you can see, it does nothing to the rest of the images :)

Thanks for the screenshot though, weird seeing the site rendered in Chrome, text looks so different!
 
You must log in or register to reply here.
Back
Top Bottom