Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Images going below footer

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •