Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    [Beginner] CSS Internet Explorer problems

    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:
    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;
      }
    Code:
    <!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
    Last edited by Bv202; 02-16-2009 at 06:08 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    And I think this should fix your position:fixed;? Not positive, didn't try it out.
    Code:
    <!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">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    <!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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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)
    Last edited by Bv202; 02-16-2009 at 07:47 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    See this method for a full height layout that works in all browsers.
    http://nopeople.com/CSS/full-height-layout/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi again,

    How did you let the position: fixed; work?

    Here is my most recent code, I think it works now:
    Code:
    <!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>
    Code:
    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;
    }
    Last edited by Bv202; 02-17-2009 at 06:06 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Bv202 (02-17-2009)

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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):


    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
    Last edited by Bv202; 02-17-2009 at 07:01 PM.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    #content {
    _height: 93%;

    seems to be the trick.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #15
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •