Can't figure out what I'm doing wrong here.

[deronsizemore]

All I want to happen here is the text "Does your brain need a tune up?" to have a top margin so it is separated from the EEG Imaging pic and the list of things which is also an image. I want it about the same distance from then as EEG Neurofeedback is from the two images on top there, which is like 10px...but I can't seem to get this done. Looks like the effect I'm looking for is in IE, but Firefox is not happening.


Thanks
Deron

[leek]

Sample link/code?

[deronsizemore]

Sorry...here is the link for the site.

http://www.geocities.com/deronsizemore/eegneuro.htm

[deronsizemore]

anyone at all?

[Paul O'B]

Hi Deron,

Just put the margin on the image instead

#welcome {
}
#firstp {
}
#firstp img{
float: left;
margin:10px 14px 10px 0;
}
#secondp {
clear: left;
}

Saves 2 styles and does the same job

Paul

[deronsizemore]

Ohhhhhh..Thanks Paul. Was I correct in putting clear:left; in the secondp div??

[Paul O'B]

Ohhhhhh..Thanks Paul. Was I correct in putting clear:left; in the secondp div??

Well the images were floated so you'd probably need to clear them anyway otherwise the following content may butt up alongside.

I think the reason the margin wasn't working is that because the image was floated then its parent assumed it had no content and the bottom margin would have been applied from the parent which was collapsed into a single line at the top. If you had cleared the images inside their parent then the margin (probably) would have taken effect.

However its just simpler to give the image a margin and save a load of code.

Paul

[deronsizemore]

So there really is not need for the clear:left; to be inside of the second p div? In fact I should have placed a clear: both; inside of the #firstp img {};?

[Paul O'B]

No you still need to clear the floats:

#secondp {
clear: left;
}

Otherwise that secondp element will sit alongside the floated images (if there was room).

Paul