First, I'm a database guy getting my feet wet with HTML, CSS, PHP, and whatever other letters I can find lying around. I've done a bunch of looking to try to solve this problem, but it's quite likely that I just don't know where to look. Sorry for the newbishness, but here goes...
I'm attempting to build a simple website for myself, finally getting away from CuteSiteBuilder! I'm doing this just using a text editor, grabbing bits of HTML and CSS and a couple of PHP includes to get a few things done.
The site will be quite straightforward, though I'd like to use standard chunks of text for header, footer, and (if I can figure out some suitable breadcrumb method) a left navigation bar.
To do the header, I used a PHP include, so that I would be able to keep the text in one file and have just one place to change it as things evolve. Works great.
Then I tried the same thing with the footer. Works great, in Firefox, but falls apart in IE. Basically, IE splits my DIVs apart, putting space between the meat of the page and the footer. Firefox renders them as contiguous, which is what I'd like.
I'd love any help in figuring out what I can do to make them contiguous in IE.
Here's the stuff I'm working with:
snippet from index.php:
snippet from css file:
snippet from header.php
snippet from footer.php
Again, just to be clear, my big problem is that the footer is disconnected from the rest of the content, and I'd like it all to be connected.
As bonus, IE doesn't render the left border of the Content DIV, though FF does.
Thanks much for any help in this.
Jeremy
---
Jeremy Wallace
ABCDataworks
You can find us on the web, and my e-mail is fairly easy to guess.
I'm attempting to build a simple website for myself, finally getting away from CuteSiteBuilder! I'm doing this just using a text editor, grabbing bits of HTML and CSS and a couple of PHP includes to get a few things done.
The site will be quite straightforward, though I'd like to use standard chunks of text for header, footer, and (if I can figure out some suitable breadcrumb method) a left navigation bar.
To do the header, I used a PHP include, so that I would be able to keep the text in one file and have just one place to change it as things evolve. Works great.
Then I tried the same thing with the footer. Works great, in Firefox, but falls apart in IE. Basically, IE splits my DIVs apart, putting space between the meat of the page and the footer. Firefox renders them as contiguous, which is what I'd like.
I'd love any help in figuring out what I can do to make them contiguous in IE.
Here's the stuff I'm working with:
snippet from index.php:
Code:
<BODY>
<div id="container">
<?php
include ("header.php");
?>
<div id="leftnav">
<p><a href="index.php"><em>Home</b></em></p>
<p><a href="Mission.php">Mission Statement</a></p>
<p><a href="Services.php">Services</a></p>
<p><a href="ClientList.php">Client List</a></p>
<p><a href="WhoWeAre.php">Who We Are</a></p>
<p><a href="ContactUs.php">Contact Us</a></p>
<p><a href="DevelopersSection.php">Developers' Section</a></p>
</div
<div id="content">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<?php
include ("footer.php");
?>
</div>
</BODY>snippet from css file:
Code:
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#LogoSpace
{
min-height: 150px;
background-color: #ddd;
border-bottom: 1px solid gray;
padding: .5em;
float: left;
width: 170px;
margin: 0;
}
#PageHeader
{
min-height: 150px;
background-color: #ddd;
border-bottom: 1px solid gray;
padding: .5em;
margin-left: 0px;
font-family: sans-serif
}
#PageHeader p
{
text-size: 200%;
text-align: left -20;
}
#leftnav
{
float: left;
width: 170px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
}
#footer
{
clear: both;
margin: 0;
padding: .1em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#footer p
{
text-align: center;
font-size: 60%;
font-family: sans-serif;
}
#leftnav p
{
margin: 0 0 1em 0;
}
#content h2
{
margin: 0 0 .5em 0;
}
#CompanyName
{
margin: 0;
font-size-adjust: 0.80;
line-height: 200%;
position:relative;
left:30px
}
#TagLine
{
font-size: 120%;
line-height: 200%;
position:relative;
left:30px
}
img
{
margin: 0 auto;
padding: 0 10;
display: block;
float: left;
}snippet from header.php
Code:
<BODY>
<div id="PageHeader">
<img src="ABCblocks.gif">
<h1 id="CompanyName">Company Name</h1>
<h2 id="TagLine">Company Slogan</h2>
</div>
</body>snippet from footer.php
Code:
<BODY>
<div id="footer">
<p>Company Name ‡ Address ‡ Phone Number</p>
</div>
</body>Again, just to be clear, my big problem is that the footer is disconnected from the rest of the content, and I'd like it all to be connected.
As bonus, IE doesn't render the left border of the Content DIV, though FF does.
Thanks much for any help in this.
Jeremy
---
Jeremy Wallace
ABCDataworks
You can find us on the web, and my e-mail is fairly easy to guess.