First CSS Layout Help

**fmrock** · 08-27-2007, 05:24 PM

hey everyone,

I am working on my first CSS layout. I am building an online chart viewer. Basicly, 2 columns, the left column will have a activeX control to view and manipulate a TIFF image. The right column will need to display a small table, and have a form with a textarea box in it. I need to make this page 100% width and 100% height, so no scroll bars are allowed. Also, in the right column, the text area box should size to fit the space that is left in that column.

Here is a stripped down version of what I am working with.

Any help would be great, the problem is with the text area/form and having it resize.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


<style type="text/css">
    FORM        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    INPUT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    SELECT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TEXTAREA    { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TABLE        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TR        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TD        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }

html {
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    height:100%;
    }

body {
    margin:0px 0px 0px 0px;
    height: 100%;
    font-family:Arial, Helvetica, sans-serif;
    }  

.Chart {
    margin-left: 0px;
    margin-right: 305px;
    height: 99%; 
    border:solid;
    border-width:2px; 
    }

.AddendumForm {
    float: right;
    padding: 0px 0px 0px 0px;
    width: 305px;
    height: 99%;  
    border:solid;
    border-width:2px;
    }
.AddendumForm form{
    height:100%;
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

.AddendumForm textarea{
    height:100%;
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

.container {
    height: 100%;     
    }
</style>

<title>Chart Details</title>
</head>
<body>
<div class="container">
    <div class="AddendumForm">

<form action="#.asp" method="post" name="frmAddendum">

<textarea cols="55" name="Addendum" ></textarea>

</form>
 
    </div>
    <div class="Chart">  
    </div>
</div>
</body>
</html>

**fmrock** · 08-28-2007, 02:09 PM

Any ideas? Kind of stumpped here

**ddadmin** · 08-29-2007, 12:17 AM

I assume you basically want the textarea on the right column to fill up the entire space of the column? There are a few issues with your CSS code right now, specifically, for the textarea:

Code:

.AddendumForm textarea{
width: 100&#37;;
height: 100%;
"
"
}

Setting the width/height to 100% is problematic, because along with the borders you've defined for the columns, it means the textarea's width in fact exceeds 100%. In Firefox, this breaks your right column. Furthermore, in IE, it seems height: 100% isn't picked up by the browser correctly, resulting in a very short textarea in that browser. Try changing the above two lines to this instead:

Code:

width: 98%;
height:98%;
height: expression(document.documentElement.clientHeight*0.98+'px');

**fmrock** · 08-29-2007, 12:14 PM

ddadmin,

Thanks for your help. And this worked for the most part, but I would like to put some text right above the text area (Customer information) Then the textarea box, and right below the textarea, i need two submit buttons. The size of the textarea is 100%, but the other objects in this container needs to be fit also.

Thanks again for your help.

**fmrock** · 08-29-2007, 06:57 PM

I got it to work by doing the following however, it is still causing extra scrolling in Firefox. Any ideas?

Code:

.AddendumForm form{
    height:98&#37;;
	height: expression(document.documentElement.clientHeight*0.98-265+'px');	
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

.AddendumForm textarea{
	width: 98%;
	height:98%;
	height: expression(document.documentElement.clientHeight*0.98-265+'px');
	
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    }

**ddadmin** · 08-29-2007, 10:01 PM

The problem is that you've only substracted "265" in IE, which is possible thanks to the use of dynamic expressions. In Firefox and other browsers, there is no way to do something like:

Code:

height:98&#37;-265px;

for example. One way to compensate is to use a little bit of JavaScript. You'd first give your textarea an ID attribute:

Code:

<textarea cols="55" name="Addendum" id="mytextbox"></textarea>

Then at the bottom of your page, add a script like the below that targets non IE browsers:

Code:

<script type="text/javascript">
var textareaobj=document.getElementById("mytextbox")
if (window.innerHeight){
textareaobj.style.height=window.innerHeight-265+"px"
window.onresize=function(){
textareaobj.style.height=window.innerHeight-265+"px"
}
}

It adjusts the height of the textarea to be 100% of the document's height minus 265px in these browsers.

</script>

**fmrock** · 09-04-2007, 02:43 PM

ddadmin, Thank you very much for all your help. It worked great!

Thread: First CSS Layout Help

Thread Tools

Search Thread

First CSS Layout Help

Bookmarks

Bookmarks

Posting Permissions