SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Paul O'B, Why No Vertical ScrollBar ?

    Why is "the last line of the Left content" hidden on the left side at http://220.89.242.19:8500/test/02.cfm in 1024*768 resolution?


    The following is the whole code for the page.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <HTML>
    
    <HEAD>
    <TITLE>SIS</TITLE>
    
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    
    <STYLE type=text/css>
    
    HTML {
    	HEIGHT: 100%
    }
    BODY {
    	HEIGHT: 100%
    }
    BODY {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; 
    	MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px
    }
    #outer {
     	MIN-HEIGHT: 100%;  MARGIN-BOTTOM: -52px; 
    	MARGIN-LEFT: 160px; BORDER-LEFT: #000 1px solid; COLOR: #000000; HEIGHT: 100%
    }
    UNKNOWN {
    	HEIGHT: auto
    }
    #header {
    	BORDER-BOTTOM: #000 1px solid;
    	BACKGROUND: white; MARGIN-LEFT: -160px;  
    	POSITION: relative
    }
     HTML #header {
    	HEIGHT: 70px
    }
    #left {
    	FLOAT: left; MARGIN-LEFT: -159px; WIDTH: 160px; POSITION: relative
    }
    #left P {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 3px
    }
     HTML #left {
    	MARGIN-RIGHT: -3px
    }
    #footer {
    	CLEAR: both; BORDER-TOP: #000 1px solid; WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #000 1px solid; 
    	POSITION: relative; HEIGHT: 50px; 
                 BACKGROUND: white; TEXT-ALIGN: center
    }
     HTML #footer {
    	HEIGHT: 50px
    }
    #clearheader {
    	HEIGHT: 72px
    }
    #clearfooter {
    	CLEAR: both; HEIGHT: 40px
    }
    DIV {
    	MARGIN-TOP: 0px
    }
    P {
    	MARGIN-TOP: 0px
    }
     HTML #centrecontent {
    	MARGIN-BOTTOM: 12px; HEIGHT: 1%
    }
    UNKNOWN {
    	FLOAT: left; MARGIN-BOTTOM: -52px; WIDTH: 0px; HEIGHT: 100%
    }
    </STYLE>
    </HEAD>
    
    <BODY>
    
    <DIV id=minHeight></DIV>
    <DIV id=outer>
    	<DIV id=header>		 
    		<P>Header</P>
    		<P>Navigator</P>		
    	</DIV>
    
    
    	<DIV id=left>
    		<P>
    			Left Content goes here :1 
    			Left Content 2 <br>
    			Left Content 3 <br>
    			Left Content 4 <br>
    			Left Content 5 <br>
    			Left Content 6 <br>
    			Left Content 7 <br>
    			Left Content 8 <br>
    			Left Content 9 <br>
    			Left Content 10<br>
    			Left Content 11<br>
    			Left Content 12<br>
    			Left Content 13<br>
    			Left Content 14<br>
    			Left Content 15<br>
    			Left Content 16<br>
    			Left Content 17<br>
    			Left Content 18<br>
    			Left Content 19<br>
    			Left Content 20<br>
    			Left Content 21<br>
    			Left Content 22<br>
    			Left Content 23<br>
    			Left Content 24<br>
    			Left Content 25<br>
    			Left Content 26<br>
    			Left Content 27<br>
    			 
    			
    		</P>
    		
    		
    		
    	</DIV>
    
    	<DIV id=centrecontent><!--centre content goes here -->
    		<P>
    			Centre Content goes here : Centre content goes here : 
    Centre Content goes 
    			here : Centre content goes here : Centre Content goes here : Centre content goes 
    			here : Centre Content goes here : Centre content goes here : Centre Content goes 
    			here : Centre content goes here : Centre Content goes here : 
    Centre content goes here : 
    		</P>
    		
    		<P>
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    		</P>
    
    		<P>
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    		</P>
    		<P>
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    		</P>
    		
    		<P>
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 		
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    		</P>
    		<P>
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 		
    			Centre Content goes here : Centre content goes here : Centre Content goes here : 
    			Centre content goes here : Centre Content goes here : Centre content goes here : 
    		</P>
    		
    		
    	</DIV>
    
    	<DIV id=clearfooter></DIV><!-- to clear footer -->
    
    </DIV>
    
    <DIV id=footer>
    	<P>Footer </P>
    </DIV>
    </BODY>
    </HTML>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Because your style sheet is corrupted!

    You have styles called unknown and you have missed the universal selector (*) out where required.

    I expect what has happened is that yo are using some useless code editor that doesn't understand css properly and has inserted and changed styles it doesn't understand.

    e.g.
    Code:
    UNKNOWN {
    	HEIGHT: auto
    }
    #header {
    	BORDER-BOTTOM: #000 1px solid;
    	BACKGROUND: white; MARGIN-LEFT: -160px;  
    	POSITION: relative
    }
     HTML #header {
    	HEIGHT: 70px
    }
    Refer back to my example in the other thread for the correct code.

    Paul

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://220.89.242.19:8500/test/03.cfm

    The above URL is just copying of your example at http://www.pmob.co.uk/temp/2colfixed...ibleheader.htm.

    As I just coying your example, I don't think my style sheet is corrupted unless your example was corrupted.


    But it doesn't has vertical scroll bar in 1024*768 mode although the text in left side is very long.(the last part is hidden)

    The following is the whole code for the page.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0061)http://www.pmob.co.uk/temp/2colfixed...ibleheader.htm -->
    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>3 col layout with equalising columns and footer</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <STYLE type=text/css>HTML {
    	HEIGHT: 100%
    }
    BODY {
    	HEIGHT: 100%
    }
    BODY {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: pink; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px
    }
    #outer {
    	BORDER-RIGHT: #000 1px solid; MIN-HEIGHT: 100%; BACKGROUND: #f8e7ec; MARGIN-BOTTOM: -52px; MARGIN-LEFT: 160px; BORDER-LEFT: #000 1px solid; COLOR: #000000; HEIGHT: 100%
    }
    UNKNOWN {
    	HEIGHT: auto
    }
    #header {
    	BORDER-TOP: #000 1px solid; BACKGROUND: #ff0000; MARGIN-LEFT: -160px; COLOR: #000000; BORDER-BOTTOM: #000 1px solid; POSITION: relative
    }
     HTML #header {
    	HEIGHT: 70px
    }
    #left {
    	FLOAT: left; MARGIN-LEFT: -159px; WIDTH: 160px; POSITION: relative
    }
    #left P {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 3px
    }
     HTML #left {
    	MARGIN-RIGHT: -3px
    }
    #footer {
    	CLEAR: both; BORDER-TOP: #000 1px solid; WIDTH: 100%; COLOR: #000000; BORDER-BOTTOM: #000 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff8080; TEXT-ALIGN: center
    }
     HTML #footer {
    	HEIGHT: 50px
    }
    #clearheader {
    	HEIGHT: 72px
    }
    #clearfooter {
    	CLEAR: both; HEIGHT: 40px
    }
    DIV {
    	MARGIN-TOP: 0px
    }
    P {
    	MARGIN-TOP: 0px
    }
     HTML #centrecontent {
    	MARGIN-BOTTOM: 12px; HEIGHT: 1%
    }
    UNKNOWN {
    	FLOAT: left; MARGIN-BOTTOM: -52px; WIDTH: 0px; HEIGHT: 100%
    }
    </STYLE>
    
    <META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD>
    <BODY>
    <DIV id=minHeight></DIV>
    <DIV id=outer>
    <DIV id=header>Header - No column longest - footer at bottom of window. 
    <P>This is the header content : this is the header content : this is the header 
    content : this is the header content : this is the header content : this is the 
    header content : </P>
    <P>This is the header content : this is the header content : this is the header 
    content : this is the header content : this is the header content : this is the 
    header content : </P></DIV>
    <DIV id=left>
    <P>Left Content goes here : Left Content goes here : Left Content goes here : 
    Left Content goes here : Left Content goes here : Left Content goes here : Left 
    Content goes here : Left Content goes here : Left Content goes here : Left 
    Content goes here : 
    Left Content 01<br>
    Left Content 02<br>
    Left Content 03<br>
    Left Content 04<br>
    Left Content 05<br>
    Left Content 06<br>
    Left Content 07<br>
    Left Content 08<br>
    Left Content 09<br>
    Left Content 10<br>
    Left Content 11<br>
    Left Content 12<br>
    Left Content 14<br>
    Left Content 15<br>
    Left Content 15<br>
    Left Content 16<br>
    Left Content 17<br>
    
    
    
    
    </P></DIV>
    <DIV id=centrecontent><!--centre content goes here -->
    <P>Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : </P>
    <P>Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : </P>
    <P>Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : </P>
    <P>Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : </P>
    <P>Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : Centre Content goes here : Centre content goes here : Centre Content goes 
    here : Centre content goes here : Centre Content goes here : Centre content goes 
    here : </P></DIV>
    <DIV id=clearfooter></DIV><!-- to clear footer --></DIV>
    <DIV id=footer>
    <P>Footer </P></DIV></BODY></HTML>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The above URL is just copying of your example at http://www.pmob.co.uk/temp/2colfixe...xibleheader.htm
    No its not!!!!

    Didn't you read my post. A lot of the styles are wrong!!!!

    There is no style in my code called UNKNOWN and its right there in your post above..... Take a look.

    There is no style called HTML #header in my code. My code is * html #header.

    What are you copying the codee into - I hope its not something like frontpage then we're doomed

    Paul
    Edit:


    When you grab the code just use view, source. Then select it all and copy it.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ahhhh... Found something missing anyway (as well as the above.

    Amend this line once you've sorted the above out.
    Code:
    * html #left {margin-right:-3px;padding-bottom:50px;}/* fix ie 3 pixel jog*/
    That padding should be the same size as the footer as ie isn't clearing it in the same way that mozilla does.

    You may have been right after all I just looked at that mess of code and assumed that was the problem.

    Paul

  6. #6
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As I amended the line you mentioned, It works fine.
    Thank you.
    Last edited by dotJoon; Aug 20, 2004 at 16:23.


Bookmarks

Posting Permissions

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