...

View Full Version : [Beginner] CSS Internet Explorer problems



Bv202
02-16-2009, 06:49 PM
Hi,

I'm a absolute beginner in CSS... I've tried to make an easy "layout" (just for practicing with positioning). It works fine in all browsers, except Internet Explorer.

This is the code:

html, body
{
margin: 0;
height: 100%;
background: #999;
}

.begin
{
margin-top: 0;
}

div#menu
{
position: fixed;
overflow: hidden;
float: left;
width: 10%;
height: 100%;
border-right: 1px solid #F60;
text-align: center;
}

div#content
{
margin: 5px 0 0 0;
padding: 0 10px 10px 11%;
float: right;
min-height: 90%;
_height: 90%;
}

div#footer
{
border-top: 1px solid #F60;
float: right;
height: 25px;
padding-top: 5px;
width: 90%;
text-align: center;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="opmaak.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menu">Test</div>

<div id="content"><p class="begin">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
</div>
<div id="footer">Test2</div>

</body>

</html>


Link: http://bv202.awardspace.com/css

Internet Explorer 7: The border-right isn't displayed (the border-top is!).
Internet Explorer 6: It seems it doesn't accept position: fixed
Not tested in IE8.

Can anyone see what I'm doing wrong? I've tried Freenode, but I didn't receive an answer.

Also, is there an alternative for this?
_height: 90%;

Someone gave me one on Freenode, but I didn't really understand it.

Thank you very much :)

Excavator
02-16-2009, 07:01 PM
Hello Bv202,
and welcome to codingforums.com.
You should have a look at http://w3schools.com/ for some tutorials, they are always a great help.
In the meantime, read every link in my sig.

You don't show your code, only your CSS... so it's kind of hard to tell what some things are supposed to do.
Usually though, margin would be used to make sure #content gives room for your menu instead of your padding: 0 10px 10px 11%;
Your right, IE6 does not do position fixed. You have to do a little hack for that. See http://www.howtocreate.co.uk/fixedPosition.html

Bv202
02-16-2009, 07:12 PM
Hi Excavator - yes, I often use W3schools :)

I've added my .html file and a link to the website :)


Usually though, margin would be used to make sure #content gives room for your menu instead of your padding: 0 10px 10px 11%;
Well, someone on Freenode told me to do it that way. I first had width: 90%; and he recommended my to replace that with the padding. I don't really understand how/why anyway...

I did read the article you provider me. However, I just don't get it. Could you edit my css file to show me how it should work? Normally I always try it myself and mess with it until it works, but as I don't have Internet Explorer 6, I don't have that chance now.

Also, do you have any idea why the border-right; isn't displayed in IE7?

Thanks again :)

Excavator
02-16-2009, 07:43 PM
I think you'd be better off setting a width for your menu and letting the content take the rest. By setting a 10% width your menu gets really narrow at a lower resolution.

Try making your CSS look like this. I added some colors to the different elements just for testing.
html, body {
height: 100%;
background: #999;
}
* { /*universal reset - zeros all default margin/padding*/
margin: 0;
padding: none;
}
#menu {
position: fixed;
float: left;
width: 150px;
height: 100%;
border-right: 1px solid #F60;
text-align: center;
background: #ccc; /*just for testing*/
}
#content {
margin: 5px 0 0 155px;
padding: 0 10px 10px 0;
float: right;
min-height: 90%;
/*_height: 90%; no such thing*/
}
#footer {
border-top: 1px solid #F60;
height: 25px;
padding-top: 5px;
clear: both;
margin: 0 0 0 150px;
background: #00f;
text-align: center;
}
.begin {
margin-top: 0;
}

Excavator
02-16-2009, 07:51 PM
And I think this should fix your position:fixed;? Not positive, didn't try it out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="opmaak.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
#menu {
position: absolute;
}
</style>
<![endif]-->
</head>

<body>

<div id="menu">Test</div>
<div id="content"><p class="begin">

Bv202
02-16-2009, 07:54 PM
Hi Excavator

That didn't solve any of the problems, it only made them worser :(

- Now it seems that IE6 makes it's own margin/padding
- The whole menu is still not displayed in IE7
- I still don't understand how I can solve the position: fixed; problem
- Your background doesn't seem to work - not in IE, not in FF.
- Why did you make a comment of _height? Is there an alternative?
- Why use clear: both; in the footer?

Thanks :)

EDIT:
Your last fix didn't change anything:(

Excavator
02-16-2009, 08:27 PM
That's why I added the colors.
If you look again, not only is IE7 not showing the r border - it's not showing the whole menu div.

clear:both; take it out and watch what happens to your footer.

Have a look at this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
background: #999;
}
* { /*universal reset - zeros all default margin/padding*/
margin: 0;
padding: none;
}
#menu {
position: fixed;
width: 150px;
height: 100%;
top: 0;
left: 0;
border-right: 1px solid #F60;
text-align: center;
background: #ccc; /*just for testing*/
}
#content {
margin: 5px 0 0 155px;
padding: 0 10px 10px 0;
min-height: 90%;
}
#footer {
border-top: 1px solid #F60;
height: 25px;
padding-top: 5px;
clear: both;
margin: 0 0 0 150px;
background: #00f;
text-align: center;
}
.begin {
margin-top: 0;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
#menu {
position: absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">Test</div>
<div id="content">
<p class="begin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet
felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien
enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum
cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum
felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque,
fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien.
Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu.
Maecenas sagittis. In sit amet eros.
</p>
<!--end content--></div>
<div id="footer">Test2</div>
</body>
</html>




- Why did you make a comment of _height? Is there an alternative?
What is it you want that line to do for you?

Bv202
02-16-2009, 08:44 PM
The _height: 100%; was done so the minimum height for the #content would be 100% in IE... with your edited one, this doesn't work; if I visit the page in IE6 without content, the footer is at the top.

Another issue is that in firefox there is an unwanted scrollbar if there is no content on the page. Also, there is some space under the footer (ok, this doesn't really matter, but the scrollbar is annoying).

Any idea how to fix these last 2 issues?

EDIT:
The firefox issue:
http://bv202.awardspace.com/css/

(visit with FF ofcourse)

Excavator
02-16-2009, 08:56 PM
See this method for a full height layout that works in all browsers.
http://nopeople.com/CSS/full-height-layout/index.html

Bv202
02-17-2009, 05:11 PM
Hi again,

How did you let the position: fixed; work?

Here is my most recent code, I think it works now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<link href="opmaak.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
#menu {
position: absolute;
}

#content {
_height: 93%;
}
</style>
<![endif]-->

</head>
<body>
<div id="menu">Test</div>
<div id="content">

<p class="begin">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit, mauris at auctor volutpat, neque nisl aliquet felis, eu elementum sem nibh vel augue. Vestibulum est velit, tristique at, adipiscing vel, cursus et, leo. Donec sapien enim, faucibus non, tincidunt at, malesuada in, sapien. Cras eget tellus ut libero auctor elementum. Nunc condimentum cursus pede. Aliquam vitae leo. Maecenas ante elit, dapibus a, placerat quis, consequat id, purus. Aliquam elementum felis. Fusce condimentum pulvinar velit. Quisque commodo elit quis tortor. Sed accumsan nisl in elit. Nullam purus neque, fermentum a, varius tempor, tincidunt et, risus. Morbi aliquet adipiscing pede. Phasellus tincidunt luctus sapien. Vestibulum ultricies mi at erat. Morbi eu eros. Donec eleifend interdum metus. Proin ultrices metus sit amet arcu. Maecenas sagittis. In sit amet eros. </p>


</div>
<div id="footer">Test2</div>
</body>
</html>


html, body {
height: 100%;
background: #999;
}

* {
margin: 0;
padding: 0;
}

#menu {
position: fixed;
width: 150px;
height: 100%;
top: 0;
left: 0;
border-right: 1px solid #F60;
text-align: center;
background: #ccc;
}

#content {
margin: 0 0 0 155px;
padding: 0 10px 10px 0;
min-height: 93%;
}

#footer {
border-top: 1px solid #F60;
height: 25px;
padding-top: 5px;
clear: both;
margin: 0 0 0 150px;
background: #00f;
text-align: center;
}

.begin {
margin-top: 0;
}

p {
margin: 1.12em;
}

Excavator
02-17-2009, 07:51 PM
That looks good but it won't work in IE6. If it was as easy as just putting a min-height on there, everyone would have been doing it.
What browser are you testing in?

Fixed my demo pages.- http://nopeople.com/CSS/full-height-layout/index.html I had not looked at them in a while and newer browsers had broken the old method.


See if this code works better for you - http://nopeople.com/test/bv202.html


I explained how to do the position:fixed; already, look up a few posts.

Bv202
02-17-2009, 07:58 PM
Hey,

I've tested it in IE7, IE6, FireFox and Google Chrome.

It works fine here in IE6 (the scrollbar is there because it's on a VM windows - works fine in fullscreen):
http://img6.imageshack.us/img6/4144/testcv4.png (http://imageshack.us)

Btw: Could you please let the pages online on your website until tomorrow? I'll try some things with it tomorrow. Thanks for the help so far :)

Excavator
02-17-2009, 08:07 PM
#content {
_height: 93%;

seems to be the trick.

Bv202
02-17-2009, 08:09 PM
Yes, I've added that line. It's not really CSS, but I don't understand how to use the alternatives. Could you explain it please?

Thank you very much :)

cyrus709
02-17-2009, 11:42 PM
I dont like IE6 (or any of them for that matter), I always use JavaScript to tell what browser they are using, then direct them if there using IE6, however this may be impractical if you do not know JavaScript, and not everyone has JS enabled (depending on your clientele). it also may be slower becouse you have to rewrite the page for internet explorer.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum