Forum Moderators: open
some of the pages have another file, Layer2, that bumps over the content to make room for a table on the left.
for each page with unique content, i'm making an .asp file that tells which include files to read. see below for sample .asp file.
***i am pasting the whole code because i do not know where the error is. please excuse my ignorance.***
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#E0E3E8">
<!--#include file="topnavbar.inc"-->
<!--#include file="aboutus.inc"-->
<!--#include file="bottomnavbar.inc"-->
</body>
</html>
Below is the css file, style.css that is referenced in each .asp file.
body {
padding-left: 1em;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
color: 333333;
background-color: #E0E3E8 }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 1em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: E0E3E8;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: 333333 }
a:visited {
color: 666666 }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
#header {
position:relative;
left:-1;
top:-1;
}
#content {
position:absolute;
left:8;
top:143;
}
#Layer2 {
position:absolute;
left:211;
top:143;
}
#footer {
position:relative;
left:-1;
top:-1;
clear:all;
}
in the content include files, there is only one <div> tag and one </div> tag. there is no positioning used in these tags [anymore] because i have it in my css now.
<div id="content" style="width:800px; height:140px; z-index:0; overflow: visible;">
above is how i have the opening <div> tag for most pages.
does anyone have any idea what i'm doing incorrectly? i feel like it must be a simple solution, but i'm not seeing it. the footer is in the appropriate position on just a few pages, and i don't see any difference in the .asp or the .inc pages of those that work and those that don't work.
i apologize for this message being so long. i really need help, and i will appreciate any help you can give.
i have looked at several threads concerning <div> tags and css, and i have gone through many tutorials online for css, but i have been unable to find my mistake.
thank you in advance.
It sounds like on the the pages where the footer "misbehaves" there is a probem with the html - divs improperly nested, or tags left open, or what have you. You could only see this properly when all the include files are written in. So I suggest you use the validators first:
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
...and then when you are sre the code is valid, if the page is still not displaying as you wish, look the the full source code exactly as it comes to the user agent (use View Source) to pinpoint the problem.
any ideas how i could get the footer to actually be a footer, at the bottom of the page?
thanks!
<html>
<head>
<title>About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#E0E3E8">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td height="50">
<!--#include file="topnavbar.inc"-->
</td><td height="100%">
<!--#include file="aboutus.inc"-->
</td><td height="50">
<!--#include file="bottomnavbar.inc"-->
</td>
</tr>
</table>
</body>
</html>
You'll have to play around with the different heights, but that's the basic idea.
any idea what is wrong? i'll paste the code for the asp file for the homepage below.
<html>
<head>
<title>company name</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#E0E3E8" background="images/home-boxes.jpg">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td height="140px">
<!--#include file="topnavbar.inc"-->
</td><td height="100%">
<!--#include file="home.inc"-->
</td><td height="23px">
<!--#include file="bottomnavbar.inc"-->
</td>
</tr>
</table>
</body>
</html>
when i view source, the footer appears at the bottom of the code, as it should appear in browsers, but it doesn't. everything in the source code looks correct . . . it's just this silly footer.
<html>
<head>
<title>company name</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#E0E3E8" background="images/home-boxes.jpg">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td height="140px">
<!--#include file="topnavbar.inc"-->
</td>
</tr><tr>
<td height="100%">
<!--#include file="home.inc"-->
</td>
</tr><tr>
<td height="23px">
<!--#include file="bottomnavbar.inc"-->
</td>
</tr>
</table>
</body>
</html>
Sorry about that.
i can see that it works because it moves the footer with the resizing of the browser window, but do you know how i could get control over the positioning of this table? it's bumped everything down and to the right. AND it jumps the "content" down below the rollover menus when you roll over them. Have you encountered this before? [this is in mac ie 5.2; in other mac browsers and in pc ie 6.0.29, the footer is under the header, on top of the content]
i have been pulling my hair out trying everything i can think of! please help!
Go from there.
Sorry, can't be of any more help to you.
I think the problem is related to the fact that you are using two different methods for positioning elements on the page which are not necessarily compatible. Trace has suggested using a simple table-based grid with which to organize the different sections of your page, whereas you are already using absolute positioning in your CSS. The problem with absolute positioning is that it takes the positioned element out of the normal document flow, so non-positioned elements can sometimes appear too high and behind the positioned ones.
I would start with Trace's basic grid, and then comment out your positioning CSS: surround it with /* and */ . From what you get, you can selectively uncomment parts of your CSS to see what happens.
It is important to note, too, that there remain several syntax errors in your CSS, including the missing units. In Trace's example grid you should remove the
px<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Then you can use the HTML and CSS validators as listed in tedster's post above.
Let us know how you get on!
the strange thing was that the pages validated correctly (both html and css) but looked so wrong. it should have worked the way i had it, but i just had to change the location of the divs.
the pages still validate both html and css.
i appreciate the help from you both!
