Forum Moderators: not2easy
Relevant CSS is
body
{
border: 0;
margin: 0 auto;
padding: 0;
background: #fff;
text-align: center;
}
#wrapper
{
border:1px solid #ccc;
border-top: 8px solid #999;
border-bottom: 0;
margin: 0 auto;
padding: 0;
background: #fff;
width: 750px;
#footer
{
clear: both;
border: 0;
border-bottom: 0;
border-top: 8px solid #ccc;
margin: 0;
padding: 0;
height: 25px;
background: #999;
text-align: left;
}
Footer sits within wrapper (as do other divs not mentioned here).
It's not critical - though I'd like to know why and a possible solution.
html, body {border:0; margin: 0 auto; padding: 0; background: #fff; text-align: center;}
Thanks. Although that tag could be considered redundant and shouldn't be necessary, it didn't sort it.
No worries. thanks anyway.
And, having validated, I don't have extra divs - though it's an easy error and I appreciate your reminder.
As a workaround, margin-bottom: -4px; fixes it - though I'll likely not use it without cross-testing.
Ah - the 'will it -won't it' joys of CSS.
Thanks. The original is fine... the error here is mine - I cut the box model hack to simplify the example.
normally gaps in Moz are due to collapsing margins, but in this case the small gap indicates an image alignment problem?
If there is an image try making it display: block and/or vertical-align: bottom;
Suzy
There's a couple - both li.
The footer is a strip containing a horizontal ul with 2 li - each an image (with one floated right so there's one on the left and the other the right) padded 10px horizontally and 5px vertically (thus effectively middle aligning them vertically.
Here's the HTML...
<div id="footer"><ul id="footernav">
<li class="right"><a href="#top" title="the top - zoom on up"><img src="/graphics/nav/footer/top.gif" width="15" height="15" alt="top" /></a></li>
<li><a href="/" title="home - begin again, Finnegan"><img src="/graphics/nav/footer/home.gif" width="15" height="15" alt="home" /></a></li></ul>
</div><!-- footer ends -->
Here's the CSS
#footer
{
clear: both;
border: 0;
border-bottom: 0;
border-top: 8px solid #ccc;
margin: 0;
padding: 0;
background: #999;
text-align: left;
vertical-align: middle;
}
#footer img
{
border: 0;
margin: 0;
padding: 5px 10px 5px 10px;
}
Changing to display: block didn't work - and the extra space is after the footer (and not the images).
;-)
g
collpasing margins may yet be coming into play but so could the image alignment..
Suzy
#footernav
{
border: 0;
padding: 0;
margin: 0;
}
#footernav ul
{
display: inline;
list-style: none;
border: 0;
padding: 0;
margin: 0;
}
#footernav li
{
display: inline;
list-style: none;
border: 0;
padding: 0;
margin: 0;
}
#footernav .right
{
float: right;
}
C... if it's dark in Devon it must be in Scotland... we should be sleeping - not hanging around a webforum.
...if it's dark in Devon it must be in Scotland... we should be sleeping - not hanging around a webforum...
No it's the advantage we have in summer ;) we have more daylight.. we're lucky right now if we get completely dark at all! in winter we have less than you tho' :(, but you're right what the heck am I doing here!
<back to topic!>
it is a combination of your <ul> css and the image alignment I mentioned before..
in your css you have #footernav ul, but it should be ul#footernav (ul id="footernav"), this is the first problem which means the css is not targetting the list correctly, then once you sort that the display:block; / vertical-align sorts the image alignment gap..
try this..
ul#footernav
{
list-style: none;
border: 0;
padding: 0;
margin: 0;
}#footernav img
{
border: 0;
margin: 0;
padding: 5px 10px;
vertical-align: bottom;
display: block;
}
let us know, after all it is late....(still not completely dark though it's close}.. :)
Suzy
Still not right though.
The # typo needed fixing - and I think that got rid of the unwanted white space.
Strange things still happening with the vertical alignment...
Vertical-align: middle; seems of no effect - depending on padding the image is either toward the top or bottom.
Adding a height to the footer also messes things. Even one which is mathematically correct as the sum of the image height plus padding. Height simply pushes the image up
No vertical padding aligns it top and anything greater than 5px pushes it down.
Whether img is inline or block seems to make no difference.
Padding most reliable (and trackable for future changes) on #footer rather than image.
I've had problems with caching and brain fade - later I'll try a test doc with in-page style and minimal other elements to reduce interaction and see how the vertical-align is handled.
Most reliable so far is...
#footer
{
clear: both;
border: 0;
border-top: 8px solid #ccc;
margin: 0;
padding: 5px 10px 5px 10px;
background: #999;
text-align: left;
vertical-align: middle;
}
#footernav img
{
display: block;
border: 0;
margin: 0;
padding: 0;
}
Much of the error is mine - and one of misunderstanding through assuming (rather than bothering to learn)...
I'd thought css vertical-align behaved similar to the table valign - now I know it doesn't...
-----
CSS Vertical-align
The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.
This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".
Vertical-align aligns the content inline.
This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.
-----
So, if I'm getting this right... to effectively vertically align an image/text block within a parent div, I should use equal top and botton padding?
As this thread is already long and this moves it off topic, I'll cross post an edit - might help others avoid the problem.
