Where's the footer?

Discussion in 'CSS' started by datropics, Jul 17, 2007.

0
  1. #1
    Hey all,

    I need a little help here. The website address is http://www.JustAsGoodAsNew.com. On the right side of the screen, scroll down and click on New Layout.

    That's the layout I'm working with. This is the CSS:

    /* INTERFACE LAYOUT SETTINGS */
	body
	{
		margin:0;
		padding:0;
		text-align:center;
		min-width:980px;
	}
	div.clear
	{
		clear:both;
		/*height:1px;*/
	}
	#jaganInterfaceContainer
	{
		text-align:left;
		width:980px;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		top:0px;
		left:0px;
		/*width:100%;*/
		/*border:1px solid green;*/
	}

	#jaganInterface
	{
		width:980px;
		margin-top:5px;
		position:relative;
		top:0px;
		left:0px;
		text-align:left;
		/*border:1px solid #410202;*/
	}
	
	#jaganAllContent
	{
		position:relative;
		top:0px;
		left:0px;
		padding-top:200px;
	}

	#jaganLeftMenu, #jaganRightMenu
	{
		float:left;
		background-image:url(../images/justasgoodasnew-column.gif);
		background-repeat:no-repeat;
		width:170px;
		height:30px;
		margin-right:10px;
		text-align:left;				
	}
	
	#jaganLeftMenu input, #jaganLeftMenu select, #jaganRightMenu input, #jaganRightMenu select
	{
		border:1px solid black;
		margin-bottom:5px;
	}

	#jaganLeftMenu
	{
		/*background-color:#C0C0C0;*/
	}
	
	#jaganRightMenu
	{
		/*background-color:#ABABAB;
		background-color:#B8B8B8;*/
	}

	#jaganLeftMenuContent, #jaganRightMenuContent, #jaganContentAreaContent
	{
		margin:0;
		padding:0;
		margin-top:35px;
		margin-right:5px;
		margin-left:3px;
		padding-bottom:5px;
		text-align:left;
	}

	#jaganContentArea
	{
		float:right;
		width:620px;
		min-height:30px;
		background-image:url(../images/justasgoodasnew-content.gif);
		background-repeat:no-repeat;
		line-height:1.5;
	}
	
	#jaganContentAreaContent
	{
		padding:0;
		padding-right:5px;
		padding-left:3px;
		margin-right:0px;
		margin-left:0px;
	}
	
	#jaganContentAreaWelcome
	{
		position:absolute;
		top:208px;
		left:390px;
		width:600px;
		overflow:hidden;
		color:#ffccd6;
		font-size:11px;
		text-transform:capitalize;
	}
	
	#jaganFooter
	{
		clear:both;
		width:980px;
		padding-top:35px;
	}
	
	#jaganFooterImage
	{
		background-image:url(../images/justasgoodasnew-footer.gif);
		width:980px;
		height:10px;
		background-repeat:no-repeat;
	}
	
	#jaganHeader
	{
		background-image:url(../images/justasgoodasnew-logo.gif);
		background-repeat:no-repeat;
		width:980px;
		height:100px;
		position:absolute;
		top:0px;
		left:0px;
	}
	
	#jaganHeaderBanner
	{
		position:absolute;
		left:350px;
		top:9px;
		border:0px solid white;
		width:530px;
		height:80px;
		overflow:hidden;
	}
	
	#jaganPathWay
	{
		position:absolute;
		left:0px;
		top:110px;
		font-size:10px;
		color:#6C6C6C;
		font-style:italic;
		width:900px;
		height:35px;
		padding-top:3px;
		overflow:hidden;
		border:0px solid black;
		text-align:left;
	}
	
	#jaganTopMenu
	{
		background-image:url(../images/justasgoodasnew-menu.gif);
		width:980px;
		height:30px;
		position:absolute;
		top:155px;
		left:0px;
		margin:0;
		text-align:left;
	}
	
	#jaganTopMenuContent
	{
		margin:0;
		margin-left:5px;
		margin-right:5px;
		margin-top:6px;
	}
	
	#jaganTopMenu ul, #jaganTopMenu ul li, #jaganTopMenu li, #jaganTopMenu #mainlevel-nav ul, #jaganTopMenu #mainlevel-nav ul li, #jaganTopMenu #mainlevel-nav ul li.mainlevel-nav, #jaganTopMenu #mainlevel-nav.mainlevel-nav
	{
		display:inline;
		margin:0;
		padding:0;
		margin-right:15px;		
	}
		
/* INTERFACE DISPLAY/FONT SETTINGS SETTINGS */	
	
	
	body
	{
		font-size:13px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#410202;
		background-color:#e3e1e1;
	}
	
	a, a:active
	{
		color:#b30808;
	}

	a:hover, a:visited:hover
	{
		color:#080cb3;
	}
	
	a:visited
	{
		color:#470404;
	}
	
	#jaganTopMenu a {text-decoration:underline;}
	#jaganTopMenu a, #jaganTopMenu a:active 
	{
		color:white;
		color:#ffccd6;
		
	}
	#jaganTopMenu a:hover, #jaganTopMenu a:visited:hover
	{
		color:#D5D5D5;
	}
	#jaganTopMenu a:visited
	{
		color:#E6E6E6;
	}
	
	
	#jaganLeftMenuContent, #jaganRightMenuContent, #jaganContentAreaContent
	{
		text-align:left;
	}
	
	#jaganFooterContent	
	{
		text-align:left;
		font-size:11px;
	}
	
/* RE-WRITE JOOMLA! DEFINITED STYLES */
	table tr td a.mainlevel
	{
		background-image:url(../../../images/M_images/arrow.png);
		background-position:0px 3px;
		background-repeat:no-repeat;
		padding-left:12px;
		display:block;
		margin-bottom:5px;
	}

	td, tr, p, div 
	{
		font-size:13px;
	}
	
	h1 {font-size:18px}
	h2 {font-size:16px}
	h3 {font-size:14px}
	h4 {font-size:12px}
	h5 {font-size:10px}
	h6 {font-size:8px}
	
	form
	{
		padding:0;
		margin:0;
	}


	a.pathway:link, a.pathway:visited {
		color				: #b30808;
	}
	
	a.pathway:hover {
		color				: #575757;
	}
	
	#active_menu
	{
	}
	#blockrandom
	{
	}
	#contact_email_copy
	{
	}
	#contact_text
	{
	}
	#emailForm
	{
	}
	#mod_login_password
	{
	}
	#mod_login_remember
	{
	}
	#mod_login_username
	{
	}
	#poll
	{
	}
	#search_ordering
	{
	}
	#search_searchword
	{
	}
	#searchphraseall
	{
	}
	#searchphraseany
	{
	}
	#searchphraseexact
	{
	}
	.adminform
	{
	}
	.article_seperator
	{
	}
	.back_button
	{
	}
	.blog
	{
	}
	.blog_more
	{
	}
	.blogsection
	{
	}
	.button
	{
	}
	.buttonheading
	{
	}
	.category
	{
	}
	.clr
	{
	}
	.componentheading
	{
	}
	.contact_email
	{
	}
	.content_rating
	{
	}
	.content_vote
	{
	}
	.contentdescription
	{
	}
	.contentheading
	{
	}
	.contentpagetitle
	{
	}
	.contentpane
	{
	}
	.contentpaneopen   
	{
	}
	.contenttoc   
	{
	}
	.createdate   
	{
	}
	.fase4rdf   
	{
	}
	.footer   
	{
	}
	.frontpageheader   
	{
	}
	.inputbox   
	{
	}
	.latestnews   
	{
	}
	.mainlevel   
	{
	}
	.message   
	{
	}
	.modifydate   
	{
	}
	.module   
	{
	}
	.moduletable   
	{
		margin-bottom:15px;
	}
	
	ul.mostread, li.mostread
	{
		padding:0;
		margin:0;
		list-style:none;
		display:inline;
	} 
	ul.mostread li.mostread a
	{
		display:block;
		margin-bottom:5px;
		padding-left:5px;

		background-image:url(../../../images/M_images/arrow.png);
		background-position:0px 3px;
		background-repeat:no-repeat;
		padding-left:12px;
	}
	.mostread   
	{
	}
	.newsfeed   
	{
	}
	.newsfeeddate
	{
	}
	.newsfeedheading
	{
	}
	.pagenav
	{
	}
	.pagenav_next
	{
	}
	.pagenav_prev
	{
	}
	.pagenavbar
	{
	}
	.pagenavcounter
	{
	}
	.pathway
	{
	}
	.polls
	{
	}
	.pollsborder
	{
	}
	.pollstableborder
	{
	}
	.readon
	{
	}
	.search
	{
	}
	.searchintro
	{
	}
	.sectionentry1
	{
	}
	.sectionentry2
	{
	}
	.sectionheader
	{
	}
	.sitetitle
	{
	}
	.small
	{
	}
	.smalldark
	{
	}
	.sublevel
	{
	}
	.syndicate
	{
	}
	.syndicate_text
	{
	}
	.text_area
	{
	}
	.toclink
	{
	}
	.weblinks
	{
	}
	.wrapper
	{
	}
    Code (markup):
    The site display great in FireFox AND Safari. IE 6 is killing me. What am I doing wrong? Two things
    1) Footer
    2) Visitor greeting on the third column

    I've also included the actual HTML Code for the site:

    
	<div id="jaganInterfaceContainer">
		<div id="jaganInterface">
			<div id="jaganAllContent">
				<div id="jaganLeftMenu">
					<div id="jaganLeftMenuContent">
						<?php mosLoadModules ( 'left',-2 ); ?>
						<!--left menu-->
					</div>
				</div>
				<?php if ( mosCountModules( 'right' ) > 0) { ?>
				<div id="jaganRightMenu">
					<div id="jaganRightMenuContent">
						<?php mosLoadModules ( 'right',-2 ); ?>
						<!--right menu-->
					</div>
				</div>
				<?php  } ?>
				<div id="jaganContentArea">
					<div id="jaganContentAreaContent">
						<div id="mainbody"><?php mosMainBody(); ?></div>
						<span id="jaganContentAreaWelcome">
							<?php if ( $my->username ) { echo ("Welcome Back $my->username, glad you're back!");} else { ?>Hello Visitor, nice to have you!<?php } ?>
						</span>
						<!--content area-->
					</div>
				</div>
				<div class="clear">&nbsp;</div>
			</div>			
			<div class="clear">&nbsp;</div>
			<div id="jaganFooter">
				<div id="jaganFooterContent">
					<?php mosLoadModules ( 'footer',-2 ); ?>
					<!--footer-->
				</div>
				<div style="clear:both;">
					<!--<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?> -->
				</div>			
				<div id="jaganFooterImage"></div>
			</div>
			<div id="jaganHeader">
				<?php if ( mosCountModules ('banner')>0) { ?>
					<div id="jaganHeaderBanner">
						<div id="modul_banner"><?php mosLoadModules ( 'banner', -1 ); ?></div>
					</div>
				<?php } ?>
			</div>
			<div id="jaganPathWay">
				<?php echo $mosConfig_sitename; ?><br>
				You are here: <?php mospathway() ?>
			</div>
			<div id="jaganTopMenu">
				<div id="jaganTopMenuContent">
					<?php mosLoadModules ( 'user3', -1 ); ?>
				</div>
			</div>
		</div>
	</div>
    Code (markup):
    Any help would be appreciated

    Thanks!


    daTropics
     
    datropics, Jul 17, 2007 IP
  2. bpb2221

    bpb2221 Peon

    Messages:
    83
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your footer is in the middle of the page in FireFox.
    You need to move your footer div outside of the main body wrapper.

    Like this
    <div id = Main body>
    <div id = Left Col>
    </div>
    <div id = Center Col>
    </div>
    </div>
    <div id = Footer>
    </div>

    I think your main container is called jaganInterfaceContainer, the footer should be outside of this.

    Ben Blanchard
    webfabric.blogspot.com
     
    bpb2221, Jul 17, 2007 IP
  3. arnoldcr

    arnoldcr Peon

    Messages:
    125
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    i recommend you install the firefox extension firebug
     
    arnoldcr, Jul 17, 2007 IP
  4. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Hi Arnold - wow!

    Thanks for a such a quick reply, I'll try it in a few and let you know.

    Have any ideas why the visitor greeting isn't showing up in IE?
     
    datropics, Jul 17, 2007 IP
  5. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #5
    NO JOY :(

    Moved it but not working. Also I can't figure out why the greeting (Hello Vistor...) is not showing up in IE
     
    datropics, Jul 17, 2007 IP
  6. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #6
    New CSS
    
/* INTERFACE LAYOUT SETTINGS */

	body
	{
		margin:0;
		padding:0;
		text-align:center;
		min-width:980px;
	}
	div.clear
	{
		clear:both;
		width:980px;
		height:1px;
	}
	#jaganInterfaceContainer
	{
		text-align:left;
		width:980px;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		top:0px;
		left:0px;
		background-color:#e3e1e1;
	}

	#jaganInterface
	{
		width:980px;
		/*margin-top:1px;*/
		position:relative;
		top:0px;
		left:0px;
		text-align:left;
		/*border:1px solid green;*/
		border:1px solid #e3e1e1;
	}
	
	#jaganAllContent
	{
		position:relative;
		top:0px;
		left:0px;
		padding-top:200px;
	}

	#jaganLeftMenu, #jaganRightMenu
	{
		float:left;
		background-image:url(../images/justasgoodasnew-column.gif);
		background-repeat:no-repeat;
		width:170px;
		height:30px;
		margin-right:10px;
		text-align:left;				
	}
	
	#jaganLeftMenu input, #jaganLeftMenu select, #jaganRightMenu input, #jaganRightMenu select
	{
		border:1px solid black;
		margin-bottom:5px;
	}

	#jaganLeftMenu
	{
		/*background-color:#C0C0C0;*/
	}
	
	#jaganRightMenu
	{
		/*background-color:#ABABAB;
		background-color:#B8B8B8;*/
	}

	#jaganLeftMenuContent, #jaganRightMenuContent, #jaganContentAreaContent
	{
		margin:0;
		padding:0;
		margin-top:35px;
		margin-right:5px;
		margin-left:3px;
		padding-bottom:5px;
		text-align:left;
	}

	#jaganContentArea
	{
		float:right;
		width:620px;
		/*min-height:30px;*/
		background-image:url(../images/justasgoodasnew-content.gif);
		background-repeat:no-repeat;
		line-height:1.5;
	}
	
	#jaganContentAreaContent
	{
		padding:0;
		padding-right:5px;
		padding-left:3px;
		margin-right:0px;
		margin-left:0px;
	}
	
	#jaganContentAreaWelcome
	{
		position:absolute;
		top:208px;
		left:390px;
		width:580px;
		overflow:hidden;
		height:17px;
		/*border:1px solid #ffccd6;*/
		color:#ffccd6;
		font-size:11px;
		text-transform:capitalize;
	}
	
	#jaganFooter
	{
		clear:both;
		width:980px;
		padding-top:35px;
		position:relative;
	}
	
	
	#jaganFooterImage
	{
		background-image:url(../images/justasgoodasnew-footer.gif);
		background-repeat:no-repeat;
		width:980px;
		height:10px;
	}
	
	#jaganHeader
	{
		background-image:url(../images/justasgoodasnew-logo.gif);
		background-repeat:no-repeat;
		width:980px;
		height:100px;
		position:absolute;
		top:0px;
		left:0px;
	}
	
	#jaganHeaderBanner
	{
		position:absolute;
		left:350px;
		top:9px;
		border:0px solid white;
		width:530px;
		height:80px;
		overflow:hidden;
	}
	
	#jaganPathWay
	{
		position:absolute;
		left:0px;
		top:110px;
		font-size:10px;
		color:#6C6C6C;
		font-style:italic;
		width:900px;
		height:35px;
		padding-top:3px;
		overflow:hidden;
		border:0px solid black;
		text-align:left;
	}
	
	#jaganTopMenu
	{
		background-image:url(../images/justasgoodasnew-menu.gif);
		width:980px;
		height:30px;
		position:absolute;
		top:155px;
		left:0px;
		margin:0;
		text-align:left;
	}
	
	#jaganTopMenuContent
	{
		margin:0;
		margin-left:5px;
		margin-right:5px;
		margin-top:6px;
	}
	
	#jaganTopMenu ul, #jaganTopMenu ul li, #jaganTopMenu li, #jaganTopMenu #mainlevel-nav ul, #jaganTopMenu #mainlevel-nav ul li, #jaganTopMenu #mainlevel-nav ul li.mainlevel-nav, #jaganTopMenu #mainlevel-nav.mainlevel-nav
	{
		display:inline;
		margin:0;
		padding:0;
		margin-right:15px;		
	}
		
/* INTERFACE DISPLAY/FONT SETTINGS SETTINGS */	
	
	
	body
	{
		font-size:13px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#410202;
		background-color:#e3e1e1;
		background-color:#410202;
	}
	
	a, a:active
	{
		color:#b30808;
	}

	a:hover, a:visited:hover
	{
		color:#080cb3;
	}
	
	a:visited
	{
		color:#470404;
	}
	
	#jaganTopMenu a {text-decoration:underline;}
	#jaganTopMenu a, #jaganTopMenu a:active 
	{
		color:white;
		color:#ffccd6;
		
	}
	#jaganTopMenu a:hover, #jaganTopMenu a:visited:hover
	{
		color:#D5D5D5;
	}
	#jaganTopMenu a:visited
	{
		color:#E6E6E6;
	}
	
	
	#jaganLeftMenuContent, #jaganRightMenuContent, #jaganContentAreaContent
	{
		text-align:left;
	}
	
	#jaganFooterContent	
	{
		text-align:left;
		font-size:11px;
	}
	
/* RE-WRITE JOOMLA! DEFINITED STYLES */
	table tr td a.mainlevel
	{
		background-image:url(../../../images/M_images/arrow.png);
		background-position:0px 3px;
		background-repeat:no-repeat;
		padding-left:12px;
		display:block;
		margin-bottom:5px;
	}

	td, tr, p, div 
	{
		font-size:13px;
	}
	
	h1 {font-size:18px}
	h2 {font-size:16px}
	h3 {font-size:14px}
	h4 {font-size:12px}
	h5 {font-size:10px}
	h6 {font-size:8px}
	
	form
	{
		padding:0;
		margin:0;
	}


	a.pathway:link, a.pathway:visited {
		color				: #b30808;
	}
	
	a.pathway:hover {
		color				: #575757;
	}
	
	#active_menu
	{
	}
	#blockrandom
	{
	}
	#contact_email_copy
	{
	}
	#contact_text
	{
	}
	#emailForm
	{
	}
	#mod_login_password
	{
	}
	#mod_login_remember
	{
	}
	#mod_login_username
	{
	}
	#poll
	{
	}
	#search_ordering
	{
	}
	#search_searchword
	{
	}
	#searchphraseall
	{
	}
	#searchphraseany
	{
	}
	#searchphraseexact
	{
	}
	.adminform
	{
	}
	.article_seperator
	{
	}
	.back_button
	{
	}
	.blog
	{
	}
	.blog_more
	{
	}
	.blogsection
	{
	}
	.button
	{
	}
	.buttonheading
	{
	}
	.category
	{
	}
	.clr
	{
	}
	.componentheading
	{
	}
	.contact_email
	{
	}
	.content_rating
	{
	}
	.content_vote
	{
	}
	.contentdescription
	{
	}
	.contentheading
	{
	}
	.contentpagetitle
	{
	}
	.contentpane
	{
	}
	.contentpaneopen   
	{
	}
	.contenttoc   
	{
	}
	.createdate   
	{
	}
	.fase4rdf   
	{
	}
	.footer   
	{
	}
	.frontpageheader   
	{
	}
	.inputbox   
	{
	}
	.latestnews   
	{
	}
	.mainlevel   
	{
	}
	.message   
	{
	}
	.modifydate   
	{
	}
	.module   
	{
	}
	.moduletable   
	{
		margin-bottom:15px;
	}
	
	ul.mostread, li.mostread
	{
		padding:0;
		margin:0;
		list-style:none;
		display:inline;
	} 
	ul.mostread li.mostread a
	{
		display:block;
		margin-bottom:5px;
		padding-left:5px;

		background-image:url(../../../images/M_images/arrow.png);
		background-position:0px 3px;
		background-repeat:no-repeat;
		padding-left:12px;
	}
	.mostread   
	{
	}
	.newsfeed   
	{
	}
	.newsfeeddate
	{
	}
	.newsfeedheading
	{
	}
	.pagenav
	{
	}
	.pagenav_next
	{
	}
	.pagenav_prev
	{
	}
	.pagenavbar
	{
	}
	.pagenavcounter
	{
	}
	.pathway
	{
	}
	.polls
	{
	}
	.pollsborder
	{
	}
	.pollstableborder
	{
	}
	.readon
	{
	}
	.search
	{
	}
	.searchintro
	{
	}
	.sectionentry1
	{
	}
	.sectionentry2
	{
	}
	.sectionheader
	{
	}
	.sitetitle
	{
	}
	.small
	{
	}
	.smalldark
	{
	}
	.sublevel
	{
	}
	.syndicate
	{
	}
	.syndicate_text
	{
	}
	.text_area
	{
	}
	.toclink
	{
	}
	.weblinks
	{
	}
	.wrapper
	{
	}
    Code (markup):
    New HTML
    
	<div id="jaganInterfaceContainer">
		<div id="jaganInterface">
			<div id="jaganAllContent">
				<div id="jaganLeftMenu">
					<div id="jaganLeftMenuContent">
						<?php mosLoadModules ( 'left',-2 ); ?>
						<!--left menu-->
					</div>
				</div>
				<?php if ( mosCountModules( 'right' ) > 0) { ?>
				<div id="jaganRightMenu">
					<div id="jaganRightMenuContent">
						<?php mosLoadModules ( 'right',-2 ); ?>
						<!--right menu-->
					</div>
				</div>
				<?php  } ?>
				<div id="jaganContentArea">
					<div id="jaganContentAreaContent">
						<div id="mainbody"><?php mosMainBody(); ?></div>
						<!--content area-->
					</div>
				</div>
			</div>			
			<span id="jaganContentAreaWelcome">
				<?php if ( $my->username ) { echo ("Welcome Back $my->username, glad you're back!");} else { ?>Hello Visitor, nice to have you. Sign-up, it's free!<?php } ?>
			</span>
			<div id="jaganHeader">
				<?php if ( mosCountModules ('banner')>0) { ?>
					<div id="jaganHeaderBanner">
						<div id="modul_banner"><?php mosLoadModules ( 'banner', -1 ); ?></div>
					</div>
				<?php } ?>
			</div>
			<div id="jaganPathWay">
				<?php echo $mosConfig_sitename; ?><br>
				You are here: <?php mospathway() ?>
			</div>
			<div id="jaganTopMenu">
				<div id="jaganTopMenuContent">
					<?php mosLoadModules ( 'user3', -1 ); ?>
				</div>
			</div>
		</div>
		<div id="jaganFooter">
			<div id="jaganFooterContent">
				<?php mosLoadModules ( 'footer',-2 ); ?>
				<!--footer-->
			</div>
			<div style="clear:both;">
				<!--<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?> -->
			</div>			
			<div id="jaganFooterImage"></div>
		</div>
	</div>
    Code (markup):
    Result is the same. IE is displaying OK (hey I got the greeting to show) but FireFox is still messing up. It looks as if there is something screwy with the tables - but the thing is I'm not doing any CSS on the tables -
     
    datropics, Jul 18, 2007 IP
  7. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #7
    Got it working - thanks for all the comments and help

    daTropics
     
    datropics, Jul 22, 2007 IP