F*#king CSS
- Started
- Last post
- 14 Responses
- BarryWhiteZombi
It seems the more I start to know about building sites with CSS the more I get into trouble.
So the latest problem is with this http://www.coleyinc.com/goodpeop…
I have it working sort of in IE and mozilla but it screws up when I increase text size and I really dont know why it works
If anyone can explain it or fix it it would be appreciated
- monNom0
what exactly is screwing up?
- jevad0
I just see text
- version30
me 2
- lvl_130
i just see text and it works fine when the text is increased in safari
- BarryWhiteZombi0
I guess nothing is screwing up. Really I was hoping for an explanation of why adding 2px margin to the bottom got rid of the space under the images. Also how do I get the images to stay on the base line when the text is enlarged?
- BarryWhiteZombi0
or maybe Im retarted
- BarryWhiteZombi0
Yes I am retarted, I delted the images they are back up
- jevad0
I give up
- version30
it looks fine
- freshlysqueezed0
Get you coat....
- monNom0
first off: why use a span set to block instead of a div?
It looks like what's happening is that your text height pushes the container (span) up. Since the image spans are hanging off the top of the block, they get some empty space below them...
a couple of way to fix that:
make the graphics background images aligned to bottom left.
increase the top margin of the images to an em value so that it scales according to font size... requires working with ems though
relative positioning might work too.
- BarryWhiteZombi0
Thanks MonNom
Is there a benefit to working in Div over Span when in these cases?
I also understand the background image to keep its position but wont the span with the image still move up as the span with the text grows and pushes the baseline down?
- monNom0
nope, no benefit, just wondering why... it's a bit more work your way I guess.
good call on the span no scaling, didn't consider that.
try margin with em.
or floats could work too... you'd need to change your markup.
- snizl0
div = block elements (large areas that content)
span = inline elements (stylizing text properties.
besides that fact that your images are contained within the same span. to have independen control over each of them, make them seperate.
The thing with css is that it is trial and error. Good luck! If you need any help, hit me up.