Page 1 of 1
CSS Help
Posted: Mon Sep 15, 2003 10:46 pm
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
Re: CSS Help
Posted: Mon Sep 15, 2003 10:52 pm
by scorphus
It seems there is no index.html. I get 404 Not Found. I'm Waiting for confirmation, checking CSS file...
Regards,
Scorphus.
Posted: Mon Sep 15, 2003 10:55 pm
by nigma
So sorry, repairing, be done in 5min.
Posted: Mon Sep 15, 2003 10:56 pm
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.
Posted: Mon Sep 15, 2003 11:24 pm
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?
Posted: Mon Sep 15, 2003 11:36 pm
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
Posted: Tue Sep 16, 2003 12:06 am
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) {
mainTable = document.getElementById("mainTable");
mainTable.style.height = top.innerHeight + "px";
}
if (isExplorer4p) {
var tableHeight = document.body.scrollTop + document.body.clientHeight;
alert(tableHeight);
mainTable.style.height = tableHeight + "px";
}
</script>
</body>
</html>
CSS:
Code: Select all
#mainTable {
height: auto;
}
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.
Posted: Tue Sep 16, 2003 6:35 pm
by Unipus
Posted: Wed Sep 17, 2003 9:08 am
by nigma
W00t! Thanks a bunch, I check it out when I get home.
Apreciate the help greatly.
Posted: Wed Sep 17, 2003 8:08 pm
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.