CSS problem with footer

[donpro]

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:after {
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_image {
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_menubar_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:after {
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_header {
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_header { padding-bottom: 5px; } /* for IE5+6 */
*:first-child+html #left_sidebar_header { padding-bottom: 5px; } /*
for IE7 */

#left_sidebar_form_wrapper {
margin-bottom: 20px;
padding-left: 3px;
padding-right: 3px;
}

#username_caption {
color: #003366;
}

#username_input {
padding-bottom: 5px;
}

#password_caption {
color: #003366;
}

#password_input {
padding-bottom: 5px;
}

#remember_password {
float: left;
padding-bottom: 5px;
}

#remember_password:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #remember_password { height: 1%; } /* for IE5+6 */
*:first-child+html #remember_password { min-height: 1px; } /* for IE7
*/

#remember_checkbox {
float: left;
}

#remember_caption {
float: left;
padding-left: 5px;
font-size: 85%;
}

#login_button {
padding-left: 10px;
padding-bottom: 20px;
}

#forgotten_password_caption {
padding-bottom: 20px;
color: #993300;
font-size: 110%;
font-weight: bold;
}

#new_account_caption {
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_links {
float: left;
width: 24%;
padding-top: 5px;
border-right: thin solid #2a78c3;
}

#vessel_schedules_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_links {
float: left;
width: 24%;
padding-top: 5px;
}

[dorayme]

In article
<f8**********************************@d45g2000hsc. googlegroups.com>,
donpro <do*********@rogers.comwrote:

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

1) You run out of room (even on my FF) because of your padding:

width: 25%;
padding-left: 1px;

So you do

#footer_headers li {
float: left;
width: 24%;
padding-left: 1%;
}

but you could

width: 25%;
padding-left: 0;

But your strategy is probably safest! The way widths are calculated is
not intuitive! Plus, in IE 6, there are float bugs which add pixels to
distance floats in some circumstances.

2) It extends fine when the browser widow is wide enough to view your
content comfortably. When not, the pic drops and then that border is
blocked. That pic of 660px wide is a bit big to have in this design!
Consider using it as a background image. Or experiment with letting it
resize with the element by percentage dimensioning it. Think more about
making your page comfortable in 800px wide browser windows.

--
dorayme