Forum Moderators: not2easy
Here is the page source:
<html>
<head>
<title>Gardening Wildlife Gardening Resources</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="headerimage"><img src="images/top.gif" width="950" height="50" hspace="0" vspace="0"><br /><a href="index.html"><img src="images/logo_subpage.gif" alt="Creating Wildlife Friendly Spaces" hspace="0" vspace="0" border="0" align="left"></a>
<div id="nav_subbackground"><div class="nav_subplacement" id="navigation"><a href="index.html">Home</a><a href="services.html">Services</a> <a href="portfolio.html">Portfolio</a> <a href="contactus.html">Contact</a> <a href="resources.html">Resources</a> <a href="gardeningtips.html">Gardening Tips</a></div>
</div></div>
<div id="contentbody">
<div id="contentsub">
<div id="copy">
<p class="taglinesub">habitat gardening resources </p>
<p></div>
<div id="pageimages"><img src="images/hummingbird.jpg" alt="Attract Birds to Your Yard and Landscape with Habitat Gardens" width="262" height="177"><br />
<img src="images/chipmumk.jpg" alt="Attract Wildlife to Your Yard with Habitat Gardens" width="262" height="177"> </div>
</div>
</div>
</div>
</body>
</html>
Here is the css:
body {
background-color: #F5F8EA;
margin: 0px;
text-align: center;
padding: 0px;
font-family: Helvetica, Verdana, Arial;
font-size: 14px;
color: #FFFFFF;
line-height: 1.5em;
}
#wrapper {
width: 950px;
padding: 0px;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#headerimage {
margin: 0px;
padding: 0px;
}
#contentbody {
margin: 0px;
padding: 0px;
width: 950px;
position: relative;
display: block;
}
#pagebottom {
display: block;
color: #747D54;
font-size: 10px;
text-align: center;
line-height: 1.5em;
}
#homeimage {
float: left;
padding: 0px;
}
#content {
background-color: #747d54;
background-image: url(../images/lower_main.gif);
background-repeat: no-repeat;
background-position: right bottom;
height: 500px;
width: 620px;
margin: 0px;
padding: 0px;
float: right;
}
#contentsub {
background-color: #DBDFC8;
background-image: url(../images/page2_footer.gif);
background-repeat: no-repeat;
background-position: right bottom;
height: 500px;
width: 950px;
margin: 0px;
padding: 0px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
#navigation {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 40px;
}
#navigation a {
color: #2f360c;
text-decoration: none;
padding-right: 24px;
font-size: 13px;
font-weight: bold;
}
#navigation a:hover {
color: #CDECF6;
text-decoration: none;
}
#navigation a:active {
color: #CDECF6;
text-decoration: none;
}
#copy {
margin-top: 15px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 40px;
width: auto;
}
.tagline {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #d6dea3;
letter-spacing: .2em;
}
.footer {
padding-top: 8px;
}
.footer a {
color: #747D54;
text-decoration: none;
}
.comingsoon {
font-size: 24px;
color: #333300;
text-align: center;
}
#nav_subbackground {
background-image: url(../images/nav_back.gif);
height: 98px;
margin: 0px;
background-repeat: no-repeat;
background-position: right;
}
.nav_subplacement {
position: relative;
bottom: 0px;
top: 70%;
text-align: right;
}
.taglinesub {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #747C55;
letter-spacing: .2em;
}
#pageimages {
width: 290px;
float: right;
}
#pageimages img{
margin-bottom: 10px;
}
[edited by: jatar_k at 2:10 am (utc) on Aug. 6, 2007]
[edit reason] tried to reduce code [/edit]
Secondly... it looks like your missing a doctype. A doctype is very important in webpages because it tells the browser what rules it should follow when rendering the page. Without them (or if it's partial or invalid), you get inconsistant, chaotic rendering (quirks mode)
[w3.org...]
HTML4.01 transitional is the most reasonable choice, with strict being very similar, another good choice.
Setting font-size:10px is really ridiculous for many reasons. Not only is it DREADFULLY small for people running at high resolutions, but it's overriding the browser's default font size which is not good. It's best to specify RELATIVE fonts when making a page (em or percentage values)
I'm not sure if you're aware of CSS short-hands... but before you publish your page, it will save lots of space if you use shorthand notation for the CSS declarations you're using, such as with the margins, background, and fonts.
"habitat gardening resources" should be a H1 tag, not a P tag.
Setting a Height for #content and #contentsub makes for a problem When a person's text size is large enough (which is not large at all, at least for my resolution). Unless you allow for TONS of extra space, never set a fixed height for anything which has text in it. You can use EMs and you'll be a bit safer, since that counts lines... but it doesn't take into account the width of hte container, so it can still cause problems. It's best to leave it auto height (the default). As it stands now, your content text overflows over your footer text, as well as jumps outside your background image.
The simple fix is to remove the heights on both the ids, and remove the float. If removing the float causes a problem, just add clear:both on the footer, and keep the thing floated.
Finally, for your problem, if you want something in the top of a container, you should be putting that object first thing in the container! it's as simple as that to fix your problem.
[edited by: Xapti at 6:47 pm (utc) on Aug. 4, 2007]
Last of all, your suggestion did fix my problem.
Thanks so much!
I made your recommended change to the Resource page and it fixed the image placement. I did find another problem I was hoping you could help troubleshoot.
In Firefox, there is a white gap under the menu area and the gray/green content page. This is not supposed to be there and is not seen in IE. Any ideas on this one? Again, I cannot figure it out.
I wanted to cut in the link to make it easier to see but I guess that is not allowed.
