CSS Help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS Help

Post by nigma »

As most of you can tell I have posted quite a few messages regarding CSS during the past week. I have this layout that I am trying to convert from tables to CSS.

I have gotten pretty close except for one thing... I want the layout to span the entire height of the screen.

Would anyone be willing to take a look at the CSS / HTML and through in your opinions of what could make it span the entire height of the page?

CSS source: http://nigmanet.net/layouts/style.css
HTML page: http://nigmanet.net/layouts/test.html
Last edited by nigma on Mon Sep 15, 2003 10:54 pm, edited 1 time in total.
User avatar
scorphus
Forum Regular
Posts: 589
Joined: Fri May 09, 2003 11:53 pm
Location: Belo Horizonte, Brazil
Contact:

Re: CSS Help

Post by scorphus »

It seems there is no index.html. I get 404 Not Found. I'm Waiting for confirmation, checking CSS file...

Regards,
Scorphus.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

So sorry, repairing, be done in 5min.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Alright, it's ready, I basically want the area that says "This is a test paragraph" to take up the extra space.

Thanks for any help.
User avatar
scorphus
Forum Regular
Posts: 589
Joined: Fri May 09, 2003 11:53 pm
Location: Belo Horizonte, Brazil
Contact:

Post by scorphus »

It seems that you'll have to play with JavaScript to get the vertical length of the browser window and then dynamicaly set the height of the table or the div tags...

The problem is that this kind of thing is very browser dependent. So you'll have to code to each of them separately (IE, Mozilla, Netscape 4, Opera).

But maybe only IE matters, this can be easy.

Are you familiar with JavaScript?
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

I know the syntax and have used it a little. I really only want the site to look similar on Mozilla and IE
User avatar
scorphus
Forum Regular
Posts: 589
Joined: Fri May 09, 2003 11:53 pm
Location: Belo Horizonte, Brazil
Contact:

Post by scorphus »

Take a look:

HTML:

Code: Select all

...
<body>

<table id="mainTable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td valign="top">
...
<script language="JavaScript1.2" type="text/javascript">
	var isExplorer4p = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
	var isNetscape5p = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "5");
	if (isNetscape5p) &#123;
		mainTable = document.getElementById("mainTable");
		mainTable.style.height = top.innerHeight + "px";
	&#125;
	if (isExplorer4p) &#123;
		var tableHeight = document.body.scrollTop + document.body.clientHeight;
		alert(tableHeight);
		mainTable.style.height = tableHeight + "px";
	&#125;
</script>
</body>
</html>
CSS:

Code: Select all

#mainTable &#123;
	height: auto;
&#125;
On Mozilla it's working (it always works, that's why I love it). But on IE, naaa... I'll try here a bit more and see what I get...

Hope it helps.

Regards,
Scorphus.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

W00t! Thanks a bunch, I check it out when I get home.

Apreciate the help greatly.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Jason: Sorry about before, I am a complete clutz, I put the height: 100% attribute in the wrong place. I moved height: 100% to body and it worked. I am getting a book today so I should be able to take CSS on my own from here on out.

Thanks guys.
Post Reply