https://testbed.odysseyshipping.com/index.php
This is driving me nuts. I've spent much time trying to style this
page footer but because I cannot set widths using "display: inline".
I've tried using floats. Now, for some reason, I can't get my borders
to display properly as it seems to nudge to the right for each level
of my footer (Firefox and IE).
Below is the CSS code.
I also need to place borders between each set of <ULand am dreading
that. Can I redo this footer without using Floats?
Thanks,
Don
#footer {
padding: 0;
margin: 0;
clear: both;
}
#footer_headers {
width: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
float: left;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
color: white;
font-weight: bold;
}
#footer_headers:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_headers { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_headers { min-height: 1px; } /* for IE7 */
#footer_headers .footer_header_title {
margin: 0;
padding: 0;
padding-left: 1%;
width: 24%;
float: left;
font-weight: bold;
}
#footer_links {
width: 100%;
margin: 0;
padding: 0;
float: left;
color: black;
text-align: left;
border-left: thin solid #2a78c3;
border-right: thin solid #2a78c3;
border-bottom: thin solid #2a78c3;
}
#footer_links:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_links { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_links { min-height: 1px; } /* for IE7 */
#footer_links .footer_links_title {
float: left;
width: 25%;
}
#footer_links .footer_links_title ul {
margin: 0;
padding: 10px 10px 10px 10px;
list-style-image: url(../images/acc_arrow.gif);
list-style-position: inside;
}
#footer_links .footer_links_title li {
color: #993300;
text-align: left;
}
#footer_copyright {
width: 100%;
margin: 0;
padding-right: 5px;
text-align: right;
font-size: 85%;
float: left;
border-left: thin solid #2a78c3;
border-right: thin solid #2a78c3;
border-bottom: thin solid #2a78c3;
}
#footer_copyright:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_copyright { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_copyright { min-height: 1px; } /* for IE7
*/