The old (I'm sure) IE Box Model problem help???? 2

[BobMCT]

Gentlemen;

This forum has been such a great help and I've learned so much from those who responded. Thank you.

Now that I have my site looking like I planned, I'm being bitten by the IE (5,6,7) positioning problems. I've read through many discussion and the tutorials on this subject and tried many of the suggestions. But without success.

I am hoping that someone familiar with this can peruse my class snippets below and be able to easily see what I am missing (as many of you have in the past).

If you would be so kind to do so, a tired and frustrated develop would be greatly appreciative!

css classes in the order they are displayed:

/* Main Site Declarations */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #4c5e2a;
}
/* Overall Page Container */
.container {
width: 970px;
min-height: 100%;
position: relative;
margin: auto;
background: #fff url(pix/TILE.jpg) top repeat;
border: 1px solid #4c5e2a;
}
/* Common Page Heading Declarations */
.heading {
position: relative;
width: 100%;
height: 60px;
margin: 0;
text-align: left;
background-color: #4c5e2a;
}
/* Main Page Content Area */
.main {
position: relative;
height: 100%;
margin: 0 142px 0 142px;
padding: 10px 10px 20px 10px;
}
/* Definition of Left Columns w/nav buttons */
.left-col {
position: absolute;
top: 60px;
width: 140px;
background-color: #4c5e2a;
height: auto;
}
/* Common Right Column content */
.right-col {
position: absolute;
top: 90px;
margin-left: 828px;
width: 142px;
height: 100%;
}
/* Common Page Footing Declarations */
.footing {
position: absolute;
bottom: 0;
border-top: 1px solid #666;
padding-top: 1em;
font-size: x-small;
text-align: center;
width: 100%;
clear: both;
display: block;
height: 20px;
}

Let's hope that someone sees something blatantly obvious.

Thanks

 

[traingamer]

What is the problem you are seeing?


IE6 does not understand min-height; you may need to use height instead.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[BobMCT]

To quickly respond to your question:

The left-column appears almost directly centered on the page. And the right column is off screen. IE 8 displays properly as do all other browsers I've tested with.

I will keep looking but hopefully this helps.

 

[Vragabond]

You might want to give your left and right columns zero left and right values respectively. As is now, your columns are positioned absolutely within their parent, which I guess is either .main or .container some pixels from the top (60px and 90px to be exact). They have no left value assuming left should be where the current flow of the document is. IE7 apparently expects that flow somewhere other than all other browsers.

For anything more, we would need to see your HTML structure as well.

IE5 is an ancient browser with an incredibly buggy CSS support. I would not expect it to ever work correctly in IE5. IE6 and IE7, given proper doctype, at least render the box model correctly.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BobMCT]

Thanks Vragabond;

The left and right 0; suggestion solved the column issues with IE. BUT, the footer now is very high and WAY right almost off the page.

As you suggested, here is the html div structure taken directly from the page output:

<div class="container">

<div class="heading">
</div><!-- End of heading Section -->

<div class="heading-nav">
</div><!-- End of heading-nav Section -->

<div class="main">
</div><!-- End of main mrea -->

<div class="left-col">
</div><!-- End of left-col area -->

<div class="right-col">
</div><!-- End of right-col area -->

<div class="footing">
</div><!-- End of footing Area -->

</div><!-- End of container area -->


Hopefully I've got this part correct.

Any ideas on the footer???

Thanks

 

[Vragabond]

Since .footing is at the bottom of the .container (bottom: 0), .container will have to have a height, or else .footing will be anywhere where automatic height for the .container ends. IE6 does not support min-height, and I am not sure how other browsers do it with placing absolutely positioned elements at the bottom, when min-height is larger than height. Is your footer misplaced in IE, or all browsers?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[traingamer]

Give the footer a specific left offset, similar to the nav suggestion, like (tested)

left: 0px;

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[BobMCT]

Thanks Greg and Vragabond;

At least the old IE's are displaying usable formats now and althought the footer is still not all the way at the bottom I can deal with that later.

Your suggestions were right on.

B