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> <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> </DIV> <DIV id=footer> <P>Footer </P> </DIV> </BODY> </HTML>

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

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">  <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> <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></DIV> <DIV id=footer> <P>Footer </P></DIV></BODY></HTML>

Quote:

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.

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

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