Paul O'B, Why No Vertical ScrollBar ?

**dotJoon** · Aug 20, 2004 06:35

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>

**Paul O'B** · Aug 20, 2004 07:24

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

**dotJoon** · Aug 20, 2004 08:05

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>

**Paul O'B** · Aug 20, 2004 08:12

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.

**Paul O'B** · Aug 20, 2004 08:25

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

**dotJoon** · Aug 20, 2004 15:41

As I amended the line you mentioned, It works fine.
Thank you.

User Tag List

Thread: Paul O'B, Why No Vertical ScrollBar ?

Thread Tools

Display

Paul O'B, Why No Vertical ScrollBar ?

Bookmarks

Bookmarks

Posting Permissions