PDA

View Full Version : css divs containing an image problems


monkeymedia
11-01-2010, 05:15 PM
me again.

http://www.avagarosa.redwebhosting.co.uk/

so, my question is, why are the images for the cap and fotter of the 2 column div going off to the side? it looks to me like the <p> properties are somehow being inherited by the image but I'm 100% closing my <p>'s before the image.

I know I can just drop them outside the div but |I'm concerned doing that will get me problems further along the line.

as always, any help appreciated.

gentleone
11-01-2010, 06:02 PM
In Firefox mac it looks alright, but I still would recommend to move the background-image from the p tags to the singlecol div and then position the p tags with margin instead of padding.


.singlecol {
float: left;
width: 300px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background: url(images/1col_background.png) repeat-y;
}

.singlecol p {
font-size: 14px;
margin: 10px;
}

monkeymedia
11-01-2010, 07:07 PM
Hi Gentleone

I'm using png's with transparency. it doesnt show up because I've not finished the graphics yet, tohught I'd tackle the hard stuff first.

if I do what you suggest, would the background image not overlap the heading and footer images as they too have transparent areas?

gentleone
11-01-2010, 07:37 PM
if I do what you suggest, would the background image not overlap the heading and footer images as they too have transparent areas?
Yes you're right... I forgot that you have the shadow effect. You can solve that to remove the shadow effect from the header and footer images or wrap the p tags in a div and set that background image on that div. I think background images on a p tag is not really a good thing to do.

monkeymedia
11-05-2010, 08:28 AM
the <p> tags thing was recommended by another member on here and I think it seems sensible but then I know bugger all. why do you say it is not a good idea?

I dont understand why the properties for the p tag are effecting the footer image position when said images are outside of the p tags, can someone explain?

Corrosive
11-05-2010, 08:40 AM
Are you falling fowl of the default margins or padding in browsers? Try zeroing everything in p and see what you get;

CSS
p {margin: 0; padding: 0;}

domedia
11-10-2010, 01:09 PM
Paragraph tags does not have any default padding :-p

monkeymedia
11-18-2010, 03:15 PM
Are you falling fowl of the default margins or padding in browsers? Try zeroing everything in p and see what you get;

CSS
p {margin: 0; padding: 0;}

nope, still didn't fix it. very frustrating.

monkeymedia
11-18-2010, 03:31 PM
think I've fixed it. well not so much 'fixed' as 'worked round'

I had some padding or spacing applied to img tags for the test images. what I will now do is make the test image 20px wider with 10opx of slack each side so it sits central again

gentleone
11-18-2010, 07:16 PM
I had some padding or spacing applied to img tags for the test images. what I will now do is make the test image 20px wider with 10opx of slack each side so it sits central again
Why not just:

.singlecol img {
margin: 0 10px;
}

or

.singlecol img {
margin: 0 auto;
}