468,306 Members | 1,169 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,306 developers. It's quick & easy.

CSS problem with footer

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;
}
Jun 27 '08 #1
1 1871
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
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Xavier Onassis | last post: by
4 posts views Thread by Neri | last post: by
6 posts views Thread by tshad | last post: by
mikeinspain
6 posts views Thread by mikeinspain | last post: by
reply views Thread by gnewsgroup | last post: by
3 posts views Thread by Emma Middlebrook | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.