I am truly baffled - I've got a site I'm working on, this is the address for the test home page:http://www.mysticpharmaceuticals.com/test2/
At the bottom, the footer text is taking the font-size style, but not the margins (tried everything from FF to Chrome). It looks right in the browser preview within Homesite, but online it's not working in any of the 5 browsers I've checked it with.
The relevant divs are:
footer {
width: 1016px; height: 39px; clear: both; color: #333; background-image: url(ftr_bg.jpg); }
.txt { font-size:10px; margin-top:18px; margin-left:30px; }
.spacer { margin-left: 364px; }
I've tried it with and without the spacer span, and also have tried it with "#footer txt" vs. just ".txt", and originally had the margins as "margin: 18px 0px 0px 30px;" - this one baffles me, and I can't find anything online as to why it's not working. Help?
what's wrong with
.txt { font-size:10px; margin-top:18px; margin-left:300px; // <-- or whatever spacing you want }
?
Just tested that in FF with Firebug and it seemed to budge the footer text over ok.
Actually it's the top margin that's not working, it's ignoring the margin-top attribute entirely.
[edit - so in my browser, the footer text is supposed to be centered vertically in the beige bar at the bottom, but instead it's displaying at the very top of the beige bar]
[edit - oh and "spacer" is being used to position the copyright text over to the other side of the footer bar]
I would guess the root of the problem may be the inline display assigned to content.
However for a quick and dirty fix you could do:
footer {
width: 986px; height: 21px; padding:18px 0px 0px 30px; clear: both; color: #333; background-image: url(http://www.mysticpharmaceuticals.com/test2/assets/ftr_bg.jpg); }
.txt { font-size:10px;
}
it seems to be collapsing that margin, not sure why though, maybe becuase the parent is clearing? - try sticking a padding-top on the .txt instead, that seemed to work here
try
line-height: 30px;
or
padding-top: 10px;
see if either of those work
"padding-top" seems to be working, thanks Mac - DBM, yeah that's the thing, I mean I can just do a work-around but I'd really like to understand better why it's not working, if I remove the "clear:both" attribute I lose the wrapper graphic spanning to the footer... but it seems that the clear attribute is the culprit. Moving the margins for the text into the footer div unfortunately repositions the background image, so that's not a good solution either.
Either way, I'll run with the padding workaround for the deadline, thanks all =)
Instead of using a or design element, I usually use a br tag to clear and it seems to work well without creating problems.
for example
and in your css:
.clear_both { height:0px; clear:both; }
then you can re-use it whenever you need to.
Interesting, I'll have to play with that.
Page layout with CSS can get a bit nutty at times, but the more I use it the more amazing it is to me.