Webmaster Forum / HTML, CSS, Scripts / CSS / May 2008

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