padding content

I want to position some graphics inside a div (e.g.footer) I know that if the content is text (p) I can use the following:

Code: Select all

#test {
float:left;
width:220px;
background-color:#FFFFFF;
}
#test .footer {
background: url(../img/lSm_bottom.gif) no-repeat;
height: 46px;
}
#test .footer p {
padding:10px;
}

However I need to put in a series of buttons, I can add in another div with padding but is there a cleaner way than below (nesting divs)? I was thinking if there was a way of saying "all content weather it be text/images to be styled"

Code: Select all

<div id="test">
<div class="footer">
<div class="pad">
<img src="http://www.webforumz.com/images/headers/imgName1.gif" alt="#" width="50" height="20" border="0" />
<img src="http://www.webforumz.com/images/headers/imgName2.gif" alt="#" width="50" height="20" border="0" />
</div>
</div>
</div>

Code: Select all

#test {
float:left;
width:220px;
background-color:#FFFFFF;
}
#test .footer {
background: url(../img/lSm_bottom.gif) no-repeat;
height: 46px;
}
#test .footer .pad {
padding:10px;
}

Thanks

Do you have a visual example of what you are trying to achieve!?!

None that i have hosted anywhere. its just if you add padding to the 'footer' style it displays different in various browsers (some add the padding value to the height, others dont) so the only way I have seen to fix this is to add a nested div and put the padding on that. I dont know if this is correct though because you end up with more and more nested divs?

Alright ... how about a link then so we can see what's going on?

Purists may gag, but you can ninja pad it.

Vertical: use <br class=> and use the class to set line-height. This is actually a nice touchup command, IMO.

Horizontal: use <span class=>&nbsp; </span> and use fontsize and/or letterspacing in the class. This is less satisfactory due to control issues over font-size display, although if all you are trying to control is the padding per se (and not the fit) it will work fine with a fixed font unit like pt.

Another old and REALLY noobie method is to use a transparent graphic as a spacer. Even I wouldn't do this, LOL.

And for a third idea, with more "pure" css, if you can center-align the main div contents, you can pad every element except the left pad on the leftmost element and the right pad on the rightmost element, or you can have 0 horizontal padding on the content elements and use a padding spacer between them (which is frequently done with horizontal lists). This works very nicely as long as the line doesn't exceed the space, but again, it's vulnerable to user-determined font size.

The world should be wrapped in <blink></blink> tags.

__________________
I hate IE 6. Just sayin....
http://www.mevans76.com