Images going below footer

AR123 · 01-26-2012, 02:54 PM

Hi
I have some images down the left hand side of my page. These are now over lapping the footer. From the #left class I removed the position:absolute; which fixed the issue on the main page however some of my other pages are breakign in that the left nav is jumping to the botton of the page. How can I fix?

Nav Code

Code:

<div id="left">
<UL class=section_navigation>
<LI><A href="/the/content1.nsf/viewAllDocsByID/VJDDN?OpenDocument">HOSPITALITY</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDE2?OpenDocument">RESTAURANT TARIFF</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDED?OpenDocument">CATERING info</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFP?OpenDocument">DRY CLEANING SERVICE</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFY?OpenDocument">NEWS BITES</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/8NPFH2?OpenDocument">CATERING SERVICES FROM 03/01/2012</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGD?OpenDocument">YOUR COMMENTS</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGQ?OpenDocument">PROMOTIONS & OFFERS</A> </LI>
<LI><a href="/the/content1.nsf/viewAllDocsByID/47WEQ6?OpenDocument">Back to Homepage</a></LI>
</UL>

<p><a>
<img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QMCTE/$FILE/comms_ad.jpg" alt="Ingredients promotion poster" border="0" /></a></p>


<p><a>
<img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEVP/$FILE/jan12_button.gif" alt="Ingredients promotion poster" border="0" /></a></p>

<p><a><img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEWM/$FILE/jan12_button2.gif" alt="Ingredients promotion poster" border="0" /></a></p>

<p><a>

CSS

Code:

<style type="text/css">
<!-- styles for ingredients pages -->

body {
	background-color:#FFFFFF;
	font-family: "Century Gothic";
}

#rtDataStore {
	position: relative;
	z-index: 10;
}

.fbtContent,.fbtContent TD, .fbtTgTable {font-family: "Century Gothic";}

.fbtTgTable {font-size:85%;}

.fbtGlobalNavTable, .fbtVivoMitie, .fbtNavTable1Background, .fbtNav2Row, .fbtSearchSectionHead, .fbtNav3Panel, .fbtLogoArea, .fbtSmallTex, .fbtSectionHead, .fbtLeftColumn{
 display: none;
}

.fbtDivider {
 background-color:#FFFFFF;
}



.fbtLeftNav0 {
 border-bottom-color:#000000;
 color:#000000;
 padding-bottom: 15px;
 background-color: #FFFFFF;
}

.fbtLeftNav0Active {
 color: #62AE29;
 padding-bottom: 15px;
 background-position: left top;
 padding-left: 25px;
 background-color: #FFFFFF;
}

.fbtLeftNav0Over {
 color: #000000;
 border-bottom-color:#000000;
 text-decoration: underline;
 padding-bottom: 15px;
}

A.fbtLeftNavLink0 {
 color: #000000;
 padding-bottom: 15px;
}

A.fbtLeftNavLink0Active {
 color: #62AE29;
}

.fbtLeftNavLink0Over {
 color: #62AE29;
 border-bottom-color:#000000;
 text-decoration: underline;
 padding-bottom: 15px;
}


/* navigation level 1 */

.fbtLeftNav1 {
 border-bottom-color:#000000;
 color:#000000;
 padding-bottom: 10px;
 margin-left: 7px;
}

.fbtLeftNav1Active {
 color: #62AE29;
 padding-bottom: 15px;
 padding-left: 7px;
 background-color: #FFFFFF;
}

.fbtLeftNav1Over {
 color: #000000;
 border-bottom-color:#000000;
 text-decoration: underline;
 padding-bottom: 13px;
 background-repeat: no-repeat;
 background-position: 5px 6px;
}

A.fbtLeftNavLink1 {
 color: #000000;
 padding-bottom: 15px;
 margin-left: 7px;
}

A.fbtLeftNavLink1Active {
 color: #62AE29;
 margin-left: 7px;
}

.fbtLeftNavLink1Over {
 color: #62AE29;
 border-bottom-color:#000000;
 text-decoration: underline;
 padding-bottom: 13px;
 margin-left: 7px;
}

/* end of navigation 1 */

.fbtTabRow {
 text-align: right;
 padding-right: 5px;
 padding-bottom: 10px;
}

a {
 text-decoration: none; 
}

a:hover {
 text-decoration: underline;
}

.fbtSrchButton {
 width: auto;
 height: 23px;
 background-color:#000000;
 color :#ffffff;
}

.fbtFullSearchText  A:link {
 color : #000000;
}

.fbtFullSearchText  A:visited {
 color : #000000;
}

.fbtMainContent {
 padding-top: 0px;
}

.search_position {
 position: absolute;
 left: 900px;
 top: 60px;
 width: 345px;
}
input {
 background-color: #69615b;
 color: #FFFFFF;
}

input.nocolor {
 background-color: #f5edb4;
 color: #69615b;
}
.left_v {
 padding-left: 70px;
 padding-right: 70px;
}

.right_v {
 padding-left: 70px;
 padding-right: 70px;
}

.vleft_header1_verd {
	text-align: right;
	background-position: left bottom;
	height: 150px;
	background-color: #212121;
	padding-right: 10px;
	padding-bottom: 10px;
}

.times {
 font-family: "Times New Roman", Times, serif;
 color: #333333;
}

.fbtContent H1 {
	color: #009A4A;
}

.fbtContent H2 {
	color: #000000;
}

.fbtContent H3 {
	color: #000000;
	margin-bottom: -20px;
}

.fbtContent H4 {
	color: #009A4A;
}
.red {color: #FF0000}

#left {
	width: 20%;
	float: left;
	margin-top: 5px;
	left: 5px;
	top: 205px;
	min-height:100px;
	position: absolute;
}

#right {
	float: right;
	width: 78%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	padding-left: 3px;
	margin-top: 5px;
	z-index: 3;
	position: relative;
	background-color: #FFFFFF;
}

.clear {
	clear: left;
}
.topnav{
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	border-width: 1px 0;
	background-color: #69bE28;
	font-size: 100%;
	font-family: "Century Gothic";
	position: relative;
	z-index: 2;
}

.topnav li{
display: inline;
}

.topnav li a{
	float: left;
	color: white;
	text-decoration: none;
	border-right: 1px solid white;
	padding-top: 9px;
	padding-right: 11px;
	padding-bottom: 9px;
	padding-left: 11px;
}
.topnav li.end a{
	float: left;
	color: white;
	padding: 9px 11px;


	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #69bE28;
}

.topnav li.end a:hover, .topnav li.end .current{
	color: #FFFFFF;

	background-color: #009b48;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #69bE28;
}

.topnav li a:hover, .topnav li .current{
	color: #FFFFFF;
	background-color: #009b48;
	text-decoration: none;
}
.section_navigation ul{
	list-style: none;
	padding: 0px;
	border: none;
	margin: 0px;
	position: relative;
	z-index: 1;
}

.section_navigation li {
	border-bottom: 1px solid #CCCCCC;
	list-style-type: none;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: -45px;
	text-transform: uppercase;
}

.section_navigation li a{
	display: block;
	padding: 8px 5px 8px 8px;
	background-color: #ffffff;
	color: #000000;
	text-decoration: none;
	width: 100%;
	border-left: 10px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

html>body .section_navigation li a{ /*Non IE6 width*/
width: auto;
}

.section_navigation li a:hover{
	background-color: #E4E4E4;
	color: #212121;
	border-left-color: #69bE28;
	text-decoration: none;
}

.section_navigation a.current {
	background-color: #E4E4E4;
	color: #212121;
	border-left: 10px solid #009b48;
	padding: 8px 5px 8px 8px;
}
.section_navigation a.current:hover {
	background-color: #E4E4E4;
}

.mite_text_green {
	color: #009b48;
}
.mite_text 
{
	font-family: "Century Gothic";
	font-size: 100%;
}

<!-- end of styles for ingredients pages -->

</style>



<div style="width:1030px;">

<DIV class=vleft_header1_verd><br><br>
  <img src="/the/imagelib.nsf/viewImagesByIDLookup/7VJFHY/$FILE/ingredients_logo.gif" alt="Ingredients logo"><br>
</DIV>
 
 
<UL class=topnav>
<LI><A href="/the/Content1.nsf/viewAllDocsByID/7MLENC?OpenDocument"><STRONG>A</STRONG></A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJD9U?OpenDocument">B </A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDAL?OpenDocument">C</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBC?OpenDocument">D</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBT?OpenDocument">E</A> 
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDC9?OpenDocument">F</A> 
<LI class="end"><A href="/the/content1.nsf/viewAllDocsByID/7VJDCN?OpenDocument">G</A> </LI></UL>

Excavator · 01-26-2012, 07:40 PM

Hello AR123,
There are quite a few errors there that might be giving you problems.
I think one of the biggest ones is having trying to style <ul class="section_navigation"> with .section_navigation ul
That works a little differerntly when you make that CSS look like ul.section_navigation

Look what a little cleanup can do for you -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color:#fc6;
	font-family: "Century Gothic";
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
#left {
	width: 20%;
	margin: 5px 0 0;
	float: left;
}
#right {
	width: 78%;
	height: 400px; /*demo only*/
	margin: 5px 0 0;
	padding: 0 0 0 3px;
	float: right;
	border-left: 1px solid #ccc;
	background: #fff;
}
ul.section_navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.section_navigation li {
	border-bottom: 1px solid #ccc;
	list-style-type: none;
	text-transform: uppercase;
}
.section_navigation li a {
	display: block;
	padding: 8px 5px 8px 8px;
	background: #fff;
	color: #000;
	text-decoration: none;
	width: 100%;
	border-left: 10px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
}
html>body .section_navigation li a { /*Non IE6 width*/ width: auto; }
.section_navigation li a:hover {
	background-color: #e4e4e4;
	color: #212121;
	border-left-color: #69be28;
	text-decoration: none;
}
.section_navigation a.current {
	background-color: #e4e4e4;
	color: #212121;
	border-left: 10px solid #009b48;
	padding: 8px 5px 8px 8px;
}
.section_navigation a.current:hover { background-color: #f00; }
</style>
</head>
<body>
    <div id="container">
        <div id="left">
                <ul class="section_navigation">
                    <li><a href="/the/content1.nsf/viewAllDocsByID/VJDDN?OpenDocument" class="current">HOSPITALITY</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDE2?OpenDocument">RESTAURANT TARIFF</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDED?OpenDocument">CATERING info</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDFP?OpenDocument">DRY CLEANING SERVICE</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDFY?OpenDocument">NEWS BITES</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/8NPFH2?OpenDocument">CATERING SERVICES FROM 03/01/2012</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDGD?OpenDocument">YOUR COMMENTS</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/7VJDGQ?OpenDocument">PROMOTIONS &amp; OFFERS</a></li>
                    <li><a href="/the/content1.nsf/viewAllDocsByID/47WEQ6?OpenDocument">Back to Homepage</a></li>
                </ul>
            <p><a> <img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QMCTE/$FILE/comms_ad.jpg" alt="Ingredients promotion poster" /></a></p>
            <p><a> <img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEVP/$FILE/jan12_button.gif" alt="Ingredients promotion poster" /></a></p>
            <p><a><img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEWM/$FILE/jan12_button2.gif" alt="Ingredients promotion poster" /></a></p>
        <!--end left--></div>
        	<div id="right">
            <!--end right--></div>
    <!--end container--></div>
</body>
</html>

I have no idea if your images work with that since the urls don't link to any images and your code didn't give any clue as what size they might be. I'm not sure why you've wrapped them in paragraph tags either.