Hi,
I'm creating a template paging sing pure CSS and all looks good except
the footer which I am having problems with.
1) When I space out each of the FOUR DIVS at 25%, it wraps in IE. I
hacked it by changing to 24% but don;t know why.
2) I can't get the right border to extend down to the bottom border
(both IE and Firefox).
The page can be seen at: https://testbed.odysseyshipping.com
The section is contained within:
<div id="footer">
.....
</div>
I don't know if you can view the CSS but if not, I am listing below:
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: small;
background-color: #FFFFFF;
color: #000000;
}
#wrapper {
margin: 5px;
padding: 0;
background-color: white;
color: black;
border: thin solid #2a78c3;
}
#header {
margin: 0;
padding: 0;
}
#header_logo {
width: 100%;
margin: 0;
padding: 0;
float: left;
list-style: none;
background-image: url(../images/title_bar_right .gif);
background-position: top right;
background-repeat: no-repeat;
}
#header_logo:af ter {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #header_logo { height: 1%; } /* for IE5+6 */
*:first-child+html #header_logo { min-height: 1px; } /* for IE7 */
..header_logo_i mage {
float: left;
margin: 0;
padding: 0;
}
#header_menubar {
width: 100%;
margin: 0;
padding: 0;
float: left;
list-style: none;
background-image: url(../images/menurest.jpg);
background-repeat: repeat-x;
}
#header_menubar :after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #header_menubar { height: 1%; } /* for IE5+6 */
*:first-child+html #header_menubar { min-height: 1px; } /* for IE7 */
..header_menuba r_image {
float: left;
margin: 0;
padding: 0;
}
#menuback {
width: 200px;
height: 31px;
}
#left_sidebar {
float: left;
width: 18%;
border-right: thin solid #2a78c3;
border-bottom: thin solid #2a78c3;
}
#left_sidebar:a fter {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #left_sidebar { height: 1%; } /* for IE5+6 */
*:first-child+html #left_sidebar { min-height: 1px; } /* for IE7 */
#left_sidebar_h eader {
background-image: url(../images/menurest.jpg);
background-repeat: repeat-x;
padding: 5px 5px 15px 5px;
color: white;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
* html #left_sidebar_h eader { padding-bottom: 5px; } /* for IE5+6 */
*:first-child+html #left_sidebar_h eader { padding-bottom: 5px; } /*
for IE7 */
#left_sidebar_f orm_wrapper {
margin-bottom: 20px;
padding-left: 3px;
padding-right: 3px;
}
#username_capti on {
color: #003366;
}
#username_input {
padding-bottom: 5px;
}
#password_capti on {
color: #003366;
}
#password_input {
padding-bottom: 5px;
}
#remember_passw ord {
float: left;
padding-bottom: 5px;
}
#remember_passw ord:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #remember_passw ord { height: 1%; } /* for IE5+6 */
*:first-child+html #remember_passw ord { min-height: 1px; } /* for IE7
*/
#remember_check box {
float: left;
}
#remember_capti on {
float: left;
padding-left: 5px;
font-size: 85%;
}
#login_button {
padding-left: 10px;
padding-bottom: 20px;
}
#forgotten_pass word_caption {
padding-bottom: 20px;
color: #993300;
font-size: 110%;
font-weight: bold;
}
#new_account_ca ption {
color: #993300;
font-size: 110%;
font-weight: bold;
}
#footer {
padding: 0;
margin: 0;
}
#footer_headers {
margin: 0;
padding: 0;
height: 2em;
padding-top: 2px;
list-style: none;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
color: white;
font-weight: bold;
}
#footer_headers li {
float: left;
width: 24%;
padding-left: 1%;
}
#footer_links {
margin: 0;
height: 5.5em;
color: #993300;
}
* html #footer_links { height: 5em; } /* for IE5+6 */
*:first-child+html #footer_links { height: 5em; } /* for IE7 */
#footer_links ul {
list-style-image: url(../images/acc_arrow.gif);
}
#our_company_li nks {
float: left;
width: 24%;
padding-top: 5px;
border-right: thin solid #2a78c3;
}
#vessel_schedul es_links {
float: left;
width: 24%;
padding-top: 5px;
border-right: thin solid #2a78c3;
}
#make_a_booking _links {
float: left;
width: 24%;
padding-top: 5px;
border-right: thin solid #2a78c3;
}
#rate_request_l inks {
float: left;
width: 24%;
padding-top: 5px;
}