Problem with Menu being cut off within IE 7 if content is too short.: CSS, HTML, PHP

by: frankkyPosted on 2009-10-26 at 13:26:04ID: 25666411

remove position absolute from the

#footer

in your css file

by: PhillipsPlasticsPosted on 2009-10-26 at 13:32:46ID: 25666505

Without the position of the footer being absolute it will sit right below the lowest content which is not what I want it to do.

by: julianHPosted on 2009-10-27 at 02:09:11ID: 25670340

I know IE 6 has a problem with position absolute being set for top and bottom - not sure about IE7

So what you could try - for the menu is

.menu {
position: absolute;
top: 0;
bottom: 0;
}

If that does not work
<script type="text/javascript"
<script type="text/javascript">
$(document).ready(function(){
$('.menu').height($(window).height());
});

Attached code works in IE6, IE7 and FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
#bgbox 
{
	position: relative;
	width: 100%;
}
#nav
{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 25px;
	width: 200px;
	background: #eeeeff;
}
#nav ul
{
	list-style: none;
}
#content
{
	float: right;
	margin-left: 220px;
	border: 1px solid #eee;
}
#footer
{
	width: 100%;
	position: absolute;
	bottom: 10px;
	height: 20px;
	padding: 5px 0 0 0;
	text-align: center;
	font-size: 10px;
	background: #666;
}
#footer, #footer a
{
	color: #fff;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
$(document).ready(function(){
	$('#nav').height($(window).height());
});
</script>
<![endif]-->	
 
</head>
<body>
		<div id="nav">
			<ul>
				<li><a href="#">Menu Item 1</a></li>
				<li><a href="#">Menu Item 2</a></li>
				<li><a href="#">Menu Item 3</a></li>
				<li><a href="#">Menu Item 4</a></li>
			</ul>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget lobortis libero. Morbi nibh dolor, pharetra ac tristique quis, 
			blandit id nibh. Ut iaculis interdum dui, auctor fermentum eros dapibus eu. Etiam mattis, quam in mollis scelerisque, arcu neque 
			malesuada nisi, nec placerat lacus sem in nunc. Mauris sollicitudin nisl a neque posuere consectetur eget non tellus. Maecenas vel 
			ligula eget eros luctus suscipit non eu eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
			Duis condimentum lobortis nibh ut sodales. Suspendisse consectetur sodales varius. Integer euismod accumsan purus, eget luctus orci 
			dapibus vel. Mauris lacus diam, mattis at dictum vel, blandit in dolor. Nulla congue risus massa, ut pellentesque est. Praesent blandit, 
			libero ut ullamcorper iaculis, nulla urna mattis odio, vitae sagittis massa urna imperdiet ante. Praesent laoreet lacus sed eros consectetur 
			eu faucibus ligula lobortis. Vestibulum id diam mauris, a bibendum augue. Integer et ante erat. </p>
		</div>
		<div style="clear: left;"></div>
	<div id="footer">
		Copyright 2009 <a href="#">Privacy</a>
	</div>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:

Select all Open in new window

by: PhillipsPlasticsPosted on 2009-10-27 at 07:14:27ID: 25672628

I guess I'm not real sure where I would try to put the menu class attributes into my current css. I figured the best way to make the site look good and act the way I would like it to across all browsers would be to alter the css the the container? class so all the columns draw to the bottom of each page, wherever the content itself ends. So for example on the frontpage the user would see the left and right column gray boxes being drawn to the footer no matter the size of the content in the middle column (the defining factor). Would there be a good way of doing this?

by: julianHPosted on 2009-10-27 at 07:22:06ID: 25672719

The sample I posted earlier does exactly that across all browsers. For everything except IE6 it uses the position: absolute with top: 0 and bottom: 0 to ensure the column stretches to the footer. This will not work in IE6 hence the conditional code using JQuery to set the height of the column to the height of the container. The sample uses only 1 column but the principle can easily be extended to two columns

by: PhillipsPlasticsPosted on 2009-10-27 at 07:54:33ID: 25673064

Okay well if I change the .colmask class from the previous to the new one it does kinda work in that the menu will expand fully from within IE7 however my header disappears then, but trying to put those 3 lines anywhere else either does nothing or completely screws up the whole layout. What am I doing wrong here?

[******Original Code*******]
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
 
[******Changed Code*******]
	.colmask {
		position:absolute;	/* This fixes the IE7 overflow hidden bug */
                top:0;
                bottom:0
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

Select all Open in new window

by: KravimirPosted on 2009-10-27 at 11:37:57ID: 25675854

It's being cut off in IE7, but not in other browsers, because IE7 doesn't understand the overflow:inherit declaration on ".threecol", so it's using the overflow:hidden from the ".colmask" rule. I suggest you change "overflow:inherit" to "overflow:visible".

Here's a good example that does what you seem to want: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

> I know IE 6 has a problem with position absolute being set for top and bottom - not sure about IE7

That is fixed in IE7.

by: PhillipsPlasticsPosted on 2009-10-27 at 11:57:22ID: 25676060

I knew it would be an easy fix I had just been staring at the code for far too long. The overflow:visible fixed my issue within IE7 so I believe now that the menu no longer gets cut off in any browser.

Kravimir: While I have you responding is there a good way to "fill" the side columns all the way down to the footer, just like your link in the previous post?

by: KravimirPosted on 2009-10-27 at 12:44:33ID: 25676575

The easiest way to do that at this point may be to use Faux Columns:

http://www.addedbytes.com/css/faux-columns-for-liquid-layouts/
http://www.communitymx.com/content/article.cfm?cid=AFC58

by: PhillipsPlasticsPosted on 2009-10-27 at 12:53:49ID: 25676668

Hmmm.. I figured as much that an image would be the easiest solution. How can you implement a liquid background with 3 whole columns however?

by: KravimirPosted on 2009-10-27 at 13:02:33ID: 25676781

The second article seems to explain that.

by: julianHPosted on 2009-10-27 at 13:51:31ID: 25677310

faux columns work in a static layout - but your layout is fluid which is going to present some problems. I believe the solution I posted will solve the problem without the need for faux columns.

by: KravimirPosted on 2009-10-27 at 13:55:43ID: 25677359

@Julian Yes, the original faux column technique only works with fixed width layouts. However, as those two articles show, there's a way to use it with liquid width layouts too.

by: julianHPosted on 2009-10-27 at 14:13:13ID: 25677572

That is true but it is a chore having to do it that way - this is much easier

http://www.marcorpsa.com/test/test.html

(url is temporary so I have attached as .txt as well).

This is a quick and dirty I knocked together using the principle I suggested above - works across all browsers - no need for background images or faux columns just css and in the case of IE a little bit of JQuery

test.txt
- 3 KB
The html source

Question

Problem with Menu being cut off within IE 7 if content is too short.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

CSS

HTML

PHP

Cascading Style Sheets (CSS)

Hypertext Markup Language (HTML)

Dynamic HTML (DHTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press