1 reply [Last post]
Truce77
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 7
Points: 0

Hi,

Whenever I resize my page to the left and it runs out of room in IE6 it decides that my content of my page should jump to the bottom of my nav bar. This is really getting annoying because I just checked it out in FireFox and it doesn't do this there.

My CSS code is here:

/* -------------NAV------------- */
#layoutNavBar{
	margin: 0px;
	float: left;
	width: 210px;
	padding: 0px;
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/* -------------CONTENT------------- */
#layoutContent {
	margin-left: 210px;
	padding: 0 3% 0 0;
}

If you need anything else just let me know.

I've been trying to search all over this forum and I can't find anyone else who's asked this question and got an answer...

I'm sure this is fixable.

Thanks again in advance for you help.

Dave[/code]

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 18 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

IE Pushing content to bottom of page

This is a very thorny problem, caused by the IE 3px bug.
I bet you have a width defined element in #layoutcontent,
right? Well, the presence of the float induces an invisible
3px "bumper" on the width defined element and when
that bumper reaches the screen limit, something weird
happens. Apparently IE calculates the widths of the
elements, and then adds the 3px bumper.

By "width defined" I mean an image or table that can't
shrink below a set size.

Since that 3px was not part of the original calculation,
the elements can't fit, even with the assigned scrollbar!
Thus #layoutcontent is forced to drop to where it can
display, killing the scrollbar as a side effect.

The only way to prevent this is to make #layoutcontent
a width slightly wider than the problem element, but that
causes other issues in IE. This 'whipsaw' effect is common
when dealing with the 3px stupidity. It's not a bug, it's
done on purpose, altho no one knows what that purpose is.

See these pages for help on the issues:

http://www.positioniseverything.net/explorer/threepxtest.html

http://www.positioniseverything.net/floatmodel.html

I wish I could be more help, but your problem is one
of the most intractible aspects of the IE 3px disaster.

http//www.positioniseverything.net/