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: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;
}

[dorayme]

Re: CSS problem with footer

In article
<f88a1b2e-724e-42b2-84a5-620efc2dfc83@d4 5g2000hsc.googl egroups.com>,
donpro <donpro-2003@rogers.com wrote:

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