CSS help

shifty_uk

shifty_uk

shifty_uk

Soldato
Joined
27 Sep 2004
Posts
13,406
Location
Glasgow
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! :)
 
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.
 
Is there any reason you're putting your images inside a p tag? (CMS perhaps?) Why not just do something like:

<p>Blah blah blah text</p>
<img src="http://lorempixel.com/105/105/" alt="lorempixel" height="105" width="105">
<img src="http://lorempixel.com/105/105/" alt="lorempixel" height="105" width="105">
<img src="http://lorempixel.com/105/105/" alt="lorempixel" height="105" width="105">
<img src="http://lorempixel.com/105/105/" alt="lorempixel" height="105" width="105">
<img src="http://lorempixel.com/105/105/" alt="lorempixel" height="105" width="105">
<p>Blah Blah Blah</p>

That way, line height of your text stays correct and the images all touch each other (kinky!).

Also, you're really good at drawing.
 
Last edited:
The joys of WYSIWYG text editors I assume. I think the only way you can get around this is to either modify the text editor to stop it wrapping everything in a p tag or have a little bit of javascript on the page to look for images in paragraph tags and remove the wrapping paragraph.
 
Code: 
.post p img {margin-bottom: -1.65em;}
.post p img:last-of-type {margin-bottom: 0;}

Bit of a faff, as if you change decide to change the line-height of the p at a later stage, you'll have to remember to change the margin-bottom here to compensate. Does what you want, though.
 
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!
 
shifty_uk said:
Apologies, I'm not aware of the technicalities surrounding the issue :p

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!
Click to expand...

I wouldn't have thought the page should look any different: Chrome and Safari use the same rendering engine, webkit.
 
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...

His issue is with the line height being applied to an image. Its very hard to adjust margins using em to take into account the extra space above / below.

If you go and look at the example he posted and put a margin bottom of -0.5em you will get the perfect amount of negative margin. -1.65em will take it up too high as that is the whole line height you are using. Em only works nicely when its being used as it should be.

I have no idea at all why WYSIWYG editors think that every man and his dog should be wrapped in a p tag but its pretty frustrating.
 
fez said:
His issue is with the line height being applied to an image. Its very hard to adjust margins using em to take into account the extra space above / below.
Click to expand...
But if the margin is caused entirely by a line-height that's specified in ems, then using a non-relative measurement to correct it won't work in all instances.

fez said:
If you go and look at the example he posted and put a margin bottom of -0.5em you will get the perfect amount of negative margin. -1.65em will take it up too high as that is the whole line height you are using. Em only works nicely when its being used as it should be.
Click to expand...
My mistake - I forgot to mention that I'd also declared img {display: block}. With that declaration in place - as it should be ;) - the gap between the images was 1.65em.

No, I've got no idea why they'd put an img in a p element either. But then again, we regularly put a block element
 
fez said:
I have no idea at all why WYSIWYG editors think that every man and his dog should be wrapped in a p tag but its pretty frustrating.
Click to expand...

I think you'll find that most editors use [shift]+[enter] for a <br> tag. Usually [enter] defaults to <p>
 
The problem you have is images are normal displayed "inline".

Inline will add a gap beneath the picture to leave room for the letters that hand below the line. Like g or p etc.

That's the gap you are seeing.

To get rid of that gap the easiest way is going to be applying "display: block" but also removing the "<br />" between each image.

By removing the <br /> your will not force the browser to render a new line. The rest of the styling of the page will handle the fact that if you display two of your images next to each other they will drop below one another without a gap.

So, remove the <br /> between the images and use "display: block" on .post img
 
You must log in or register to reply here.
Back
Top Bottom