2 replies [Last post]
jsimmons
Offline
newbie
Last seen: 14 years 15 weeks ago
Joined: 2007-06-09
Posts: 2
Points: 0

I've got my basic styles all setup and they now all render the same way in IE 6, Opera 9.12, and FF 2.04. However, I have a couple of issues that I can't seem to resolve. I don't have a Mac so I can't test it with any Mac-specific browser, and I don't have any machines with IE7.

Innocent The container div is set to 100% height, but it extends 1px below the bottom border of the window (all browsers). This happens in all browsers. How do I fix that?

1) I want the content div to have a minimum height of 400, and it does everywhere except IE6. How do I make that happen?

2) I want the footer to remain at the bottom of the window until the window is resized to be shorter than the minimum height of the content div. I works okay - sort of. The problem is that the footer will continue to be repositioned until it's bottom edge is aligned with the bottom edge of the content div. What I want is for the footer's top edge to be positioned no higher than the bottom edge of the content div. (I hope I explained that sufficiently). What am I doing wrong?

Here's a link if you want to look at it in a browser (you'll see the divs with various border colors for easy identification):

http://75.11.0.157/testsite

I've found that opening the page in FireFox allows you to resize the FireFox window and actually watch the footer div move up and down as you make the window taller or shorter. I think this is the best way to see the problem because it happens in real time.

In any case, here's the code (and it passes the W3C CSS validation test):

HTML file:











Test content


The reset.css file

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100.01%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */
:focus
{
outline: 0;
}

body
{
line-height: 1.4;
color: black;
background: white;
font-size: 1em;
}

ol, ul
{
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table
{
border-collapse: separate;
border-spacing: 0;
}

caption, th, td
{
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: "";
}

blockquote, q
{
quotes: "" "";
}

form, fieldset
{
font-family: inherit;
}

The global.css file (not a factor at this point, but included for completeness):

.clear-both { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.float-left { float: left; }
.float-right { float: right; }
.font-bold { font-weight: bold; }
.font-italic { font-style: italic; }
.font-underline{ border-bottom: 1px solid; }
.no-border { border: 0; }
.no-bullet { list-style:none; list-style-image:none; }
.no-margin { margin: 0; }
.no-outline ( outline: none; }
.no-padding { padding: 0; }
.maxwidth1000 { max-width: 1000px; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.zindex10 { z-index: 10; }
.zindex20 { z-index: 20; }
.zindex30 { z-index: 30; }
.zindex40 { z-index: 40; }
.zindex50 { z-index: 50; }
.zindex60 { z-index: 60; }
.zindex70 { z-index: 70; }
.zindex80 { z-index: 80; }
.zindex90 { z-index: 90; }
.std-table { border:0; margin:0px; padding:0px; }

The dbk_style_3.css file:

/*============================================================================*/
/* dbk_style_3.css */
/* */
/* This is the main style sheet for the site. It defines the main page divs */
/* as IDs and element styles. The divs should be used on every page. */
/*============================================================================*/

/*----------------------------------------------------------------------------*/
/* Elements */
/*----------------------------------------------------------------------------*/
html
{
font-family:verdana, tahoma, arial;
font-size:80%;
color:#000000;
}

html,
body
{
background-color:#ffffff;
height: 100%;
margin:0;
padding:0;
}

img
{
border:0;
}

/*----------------------------------------------------------------------------*/
/* base page divs - these should never need to be changed */
/*----------------------------------------------------------------------------*/
#container
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 1000px;
padding-right: 2px;
margin: 0 auto;
text-align: left;
}

#header
{
position: relative;
margin:0px;
height:120px;
width:100%;
}

#nav
{
position:relative;
width:100%;
}

#content
{
position: relative;
width:100%;
min-height:400px;
height:auto;
padding-bottom:20px;
}
#footer
{
position: absolute;
bottom:-2px;
height:20px;
width:1000px;
line-height:20px;
margin-bottom:2px;
}

The ie.css file:

#container { padding-right:0; }
* html #content { height: 400px; }

The site_classes file:

.footerText
{
float:right;
font-size:8pt;
}

The debug.css file:

#container { border: 1px solid #000000; }
#header { border: 1px solid #ff0000; }
#nav { border: 1px solid #0000ff; }
#content { border: 1px solid #00ff00; }
#footer { border: 1px solid #ff00ff; }

jsimmons
Offline
newbie
Last seen: 14 years 15 weeks ago
Joined: 2007-06-09
Posts: 2
Points: 0

I re-worded my problem

I re-worded my problem description a little. Can anyone offer any comments?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

If you take a visit to the

If you take a visit to the how to forum and read my 100% height article, the code places a footer at the bottom for all browsers except IE MAC.