Seona Bellamy wrote:
> Hi guys,
>
> I have a footer, which has a background image. Within the footer I have a
> bunch of links (marked up as a list and floated left) and a copyright notice
> (marked up as a paragraph floated right). In most browsers, this seems to
> work just fine. In Opera 9.21 and Netscape 8.1.3, however, they are falling
> out of the Footer div.
>
> The easiest fix I can think of would be to apply a negative top margin to
> the list and paragraph. But that would involve finding a way to apply that
> fix only to Opera and Netscape. Is there a way to do that? Is this even the
> best way around the problem? I've hunted on positioniseverything.net so no
> avail, and Google isn't helping much either.
>
> I've included the relevant code below, in case it helps anyone.
>
> Cheers,
>
> Seona.
Hi Seona
When you start giving heights to elements in such constructions you will get
many mixed results, especially with IE due to height (and width) being a
hasLayout trigger. The height of the footer can be set in pixels, ems or have
no height given at all. Using vertical padding in the footer (as I have added)
can also be used to create the height of the footer. This you will need to
experiment with yourself using either height, padding or both.
#footer {
position: relative;
clear: both;
margin: 0 auto;
width: 958px;
background: url(../images/telstra-footer-tile.gif) top left repeat-x;
/*height: 40px; needs testing for best solution */
/*margin-top:-40px; delete */
text-align:right; /* add to align the copyright text */
padding:10px 0; /* add to give space above and below the child elements
*/
}
#footer #footerlinks {
padding-left: 10px;
background: red url(../images/telstra-footer-start.gif) top left
no-repeat;
list-style: none;
/*float: left; delete */
/*width: 640px; delete */
/*height: 30px; delete */
margin: 0; /* add */
}
#footer #footerlinks li {
float: left;
padding-right: 10px;
line-height: 30px;
}
#footer #copyright {
margin: 0;
padding: 0 10px 0 0;
background: url(../images/telstra-footer-end.gif) top right no-repeat;
color: #999999;
line-height: 200%; /* change to a relative size instead of absolute
size */
/*float: right; delete */
/*width: 295px; delete */
/*height: 30px; delete */
display:inline; /* add, displays this paragraph which is a block
element as inline */
}
The changes I have made are similar to how my footer and its' contained
elements are styled on my site (link below). I hope this helps.
Kind Regards, Alan
<http://css-class.com>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
