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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issue with DIV using 100% of remaining Space..

    The following works fine in Firefox and Chrome, but not IE9.
    In Firefox and Chrome the 'test' div is at the correct position and fills the remaining height of the screen.

    In IE9 it appears small in height and width.

    How do I get this to work on all 3 browsers ?
    Thanks

    Code:
    <html><head>
    <style type="text/css">
    			.test {
    	        background: #FFF;
                font-size: 10px;
                color: #000;
                border: 2px solid black;
                position:absolute;
      			top:190px;
      			right:10;
      			bottom:10;
      			left:10;
      			overflow:auto;
            	}
    </style>
    
    </head><body>
    <div style="position:absolute; top:8px; right:8px" >
    BLAH BLAH BLAH BLAH BLAH 
    </div><div id="hidden" style="position:absolute; top:100px; right:15px" ></div>
    
    <div>
    <button>Button1</button>
    <button>Button2</button>
    </div>
    
    <div id="test" class="test">
    <h3>DIV WINDOWS</h3>
    BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
    BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
    BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 
    </div>
    
    </body>
    </html>
    Last edited by Mad_T; 06-09-2012 at 12:20 PM.

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Quote Originally Posted by Mad_T View Post
    How do I get this to work on all 3 browsers ?
    First of all you have to add a doctype on the very top of your document. This will prevent browsers to run in quirks mode and should solve most of compatibility problems.

    Also some units are missing in your css:

    Code:
    .test {
      			right:10px;
      			bottom:10px;
      			left:10px;
            	}
    Last edited by Candygirl; 06-09-2012 at 11:53 AM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You
    Sorted !


  •  

    Posting Permissions

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