content div truncated in IE

[trudge]

I've got a weird situation where a content div I have defined is truncated in IE if it is longer than the browser window. In other words, if the page doesn't fit in the window, it gets truncated just prior to the border of the div.

.column-left
{
	font-family:verdana,helvetica,arial;
	color: #000;
	float:left;
	width:225px;
	background-color:#9CCFC8;
	position:absolute;
	margin:0px 0px 0px 0px;
	padding:15px 0px 15px 15px;
	border: 3px solid #000;
}

.column-right
{
	float:left;
	font-family:verdana,helvetica,arial;
	color: #000;
	background-color:#9C9;
	border: 3px solid #000;
	margin-left:250px;
	position:absolute;
	text-align:left;
	width:490px;
	padding:10px;
}

.content-left is a navigation panel and .content-right is for content. If that content requires a vertical scroll bar, the page does not scroll enough to view the border at the bottom.

[mostafadotnet]

1-Don't use classes for a unique element in the page which is not used more than once like content and/or navigation panel DIVs.
2-Don't use IE6 to test your CSS any more if you do!
3-Use Firefox 2! [to get better results]
4-Change your code like this:

#column-left
{
	font-family:verdana,helvetica,arial;
	color: #000;
	float:left;
	width:225px;
	background-color:#9CCFC8;
	position:absolute;
	margin:0px 0px 0px 0px;
	padding:15px 0px 15px 15px;
	border: 3px solid #000;
}

#column-right
{
	float:left;
	font-family:verdana,helvetica,arial;
	color: #000;
	background-color:#9C9;
	border: 3px solid #000;
	margin-left:250px;
	position:absolute;
	text-align:left;
	width:490px;
	padding:10px;
}

and then use something like this in your HTML source file:

e.g.
<div id="column-left"></div>

Good luck.

[trudge]

1-Don't use classes for a unique element in the page which is not used more than once like content and/or navigation panel DIVs.
2-Don't use IE6 to test your CSS any more if you do!
3-Use Firefox 2! [to get better results]
4-Change your code like this:

and then use something like this in your HTML source file:

e.g.
<div id="column-left"></div>

Good luck.

Thanks for the reply. I tried your suggestion about using ID instead of classes, but it still refuses to show the bottom border of the DIV.

I am trying to make the site as compatible as possible for both IE and FF, at 800x600 and 1024x768. All is good except for this one glitch.

[MidiMagic]

There is nothing wrong with using classes to address element styles.

Some elitists in the literary world want to force their ideas of "proper use" on the rest of us. They just want to make it harder for the rest of us with their "politically correct" ways. They want us to divide the web page into sections (similar to the sections in Word documents), with one id for each section. That works OK for books and newspapers, but it makes an awful mess of websites intended for demonstration pages, galleries, or advertising, with much needless duplication of styles. I think their purpose is to get rid of advertising.

It has nothing to do with your problem.

Use class for styles if you don't know whether it will be single use or multiple use, if you use overlapping styles, or if you use a common stylesheet.

My rule for simplification is:
- Use classes for styles
- Use ids for JavaScript addressing

Your problem may be that the browser is defaulting to not showing overflow. Try adding the style:

overflow: scroll;

[trudge]

:) I agree with you about some of the intentions of others.

But your suggestion didn't work either. It DID add a scroll bar in the div, and I was able to view the whole page, bottom border and all.

But when I applied it to another page, it broke the content flow.

[MidiMagic]

That's the hazard of the div. If it won't fit nicely in the available space, it shoulders stuff aside.

You have to make sure the div, its contents, and any margin, border, and padding ALL fit in the available space. And remember that browsers on computers with different screen resolutions have different available space.

Compounding the problem, FF puts the the margins, borders, and padding outside the defined size of the div. IE crams them inside it.

[trudge]

Thanks for the reply. Not being a designer I wasn't aware of the details of calculating div widths by IE. Typical though. I'll redo the page with that in mind and let you know how it worked out.