Faux Columns not so 'fauxed' -- Help Please --

[Chezshire]

Hello Everyone,

  I'm in the final stretch of the first website which I've ever built for anyone besides myself. I have two final problems, both of which did not manifest until I uploaded the files on to my actual server space.

 

Problem One: My Faux Column is not working (see odd yellow gap at the lower left side menu)

 

Problem Two: Background fire image is not displaying (I'm going to break this out into a separate topic on this forum as I believe that these are separate issues - I hope this is ok)

 

 

Below is the css, links and screenshots to my problem, any help is appreciated greatly!

 

 

Link to troublesome page: http://xpg.us/xSCC/xFinalP/dinnersforsinners/show/show.html

 

Link to how the page should look: http://xpg.us/xSCC/xFinalP/dinnersforsinners/_deleteMe.jpg

 

 

 

 

Faux Columns portion of CSS

/* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */
#columnsFaux {
width: 900px;

background-image:url('../images/bkg/BkG_columnsFaux.gif');
/*background-color: #0f0;*/
background-repeat:repeat-y;
overflow: auto;
}

 

 

 

Full CSS Sheet:

* { 
padding: 0; 
margin: 0; 
}

#outside {
margin:0; 
padding:0;

}

#wrapper { 
width: 900px;
margin: 0 auto;
}

#header {
width: 900px; 
height: 168px;
}

#indicia {	 
 width: 217px; 
 height: 168px;

 float: left;
}

#banner { 
 width: 683px;
 height: 135px;
 float: right;
 display: inline;
}

#nav_container { 	 
 width: 683px;
 height: 33px;

 float: left;
 position: relative;
 z-index: 1;
}

/* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */
#columnsFaux {
width: 900px;

background-image:url('../images/bkg/BkG_columnsFaux.gif');
/*background-color: #0f0;*/
background-repeat:repeat-y;
overflow: auto;
}

#leftcolumn { 
 background: #aa9f4e;

 width: 188px;
 min-height: 602px;

 margin-left: 29px;

 float: left;
}


#rightcolumn { 
 background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left;

 width: 649px; 
 min-height: 602px;

 border-right-style:solid;
 border-width:5px;
 border-color:#aa9f4e;

 float: left;
 display: inline;
}


	/* nested inside right column */
	#sitemap { 
	width: 605px;
	margin-left: 20px;

	float: left;
	}

	/* nested inside right column */
	#recipe { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column */
	#cast { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column */
	#ingredients {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

	/* nested inside right column */
	#callout {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

		/* nested inside right column */		
		/* Only applies to Schedule Page */
		#calendar { 
		width: 640px;
		margin-left: 10px;

		float: left;
		}

	/* nested inside right column of Tricks page */
	#tricks { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column of Tricks page */
	#notes {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

#footer { 
width: 900px;
height: 43px;

background-image:url('../images/bkg/bkg_06.gif');
background-repeat:no-repeat;
background-position:top right;

clear: both;
}

#login {
text-align: center;

width: 188px;
height: 43px;

margin-left: 29px;

float: left;
}

div.login {
min-height: 43px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 683px;
height: 43px;

float: right;
display: inline;
}

#badgesOfHonor
{
text-align: center;

margin-top: 40px;

}

[Chezshire]

Hi everyone,

  Problem Two (Background fire image is not displaying) has been resolved thanks to a kindly assist from cag and faT&G3c (I hope i spelt the name right). Now i'm just working on the faux column issue - any help or guideance is welcomed

 

thank you.

-Chez

[JustLikeIcarus]

Well your left column's min-height is set shorter that the actual height of the right column.  Also something to note is ie6 doesnt use min-height

[Chezshire]

Isn't min-height the 'minimum' hieght of an object - i.e. it will be at least this tall, but stretch if something goes beyond?

 

confused chez stares blankly at the code

Thanks for the help Icarus I look forward to a reply!

[JustLikeIcarus]

Indeed that is what min-height is for however ie doesnt use it.  In ie min-height is specified with height since ie will make the element taller as more content is added.  (Which is wrong) So you have to use some ie hacks. Like

 

One of many different hacks is

 

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

[Chezshire]

Hello all,

  So I've attempted what you suggested Icarus to resolve my odd faux column issue but the results are still mixed at best. I've set the heights for both the left and right columns to a min-height of 602px, and assigned a height to both of 602px in addition to adding the 'height:auto !important' attribute to my div's style sheet. Any ideas as to what it is I'm doing wrong or not understanding. Also I don't understand why it is when i view the files from my desktop they work but when i upload them I get this issue.

 

Thanks in advance as always for any help tendered everyone

-Chez (revised css snippet and full css divs sheet below)

 

 

CSS SNIPPET (dfs_divs.css):

/* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */
#columnsFaux {
width: 900px;

background-image:url('../images/bkg/BkG_columnsFaux.gif');
background-repeat:repeat-y;
overflow: auto;
}

#leftcolumn { 
 background: #aa9f4e;

 width: 188px;
 min-height: 602px;

 height:auto !important;
 height: 602px;

 margin-left: 29px;

 float: left;
}


#rightcolumn { 
 background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left;

 width: 649px; 
 min-height: 602px;

 height:auto !important;
 height: 602px;

 border-right-style:solid;
 border-width:5px;
 border-color:#aa9f4e;

 float: left;
 display: inline;
}

 

 

 

FULL CSS SHEET (dfs_divs.css):

* { 
padding: 0; 
margin: 0; 
}

#wrapper { 
/* added to position elements and allow background image */
position:relative;

width: 900px;
margin: 0 auto;

/* added to position elements and allow background image */ 
z-index:1;
}

#header {
width: 900px; 
height: 168px;
}

#indicia {	 
 width: 217px; 
 height: 168px;

 float: left;
}

#banner { 
 width: 683px;
 height: 135px;
 float: right;
 display: inline;
}

#nav_container { 	 
 width: 683px;
 height: 33px;

 float: left;
 position: relative;
 z-index: 2;
}

/* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */
#columnsFaux {
width: 900px;

background-image:url('../images/bkg/BkG_columnsFaux.gif');
/*background-color: #0f0;*/
background-repeat:repeat-y;
overflow: auto;
}

#leftcolumn { 
 background: #aa9f4e;

 width: 188px;
 min-height: 602px;

 height:auto !important;
 height: 602px;

 margin-left: 29px;

 float: left;
}


#rightcolumn { 
 background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left;

 width: 649px; 
 min-height: 602px;

 height:auto !important;
 height: 602px;

 border-right-style:solid;
 border-width:5px;
 border-color:#aa9f4e;

 float: left;
 display: inline;
}


	/* nested inside right column */
	#sitemap { 
	width: 605px;
	margin-left: 20px;

	float: left;
	}

	/* nested inside right column */
	#recipe { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column */
	#cast { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column */
	#ingredients {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

	/* nested inside right column */
	#callout {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

		/* nested inside right column */		
		/* Only applies to Schedule Page */
		#calendar { 
		width: 640px;
		margin-left: 10px;

		float: left;
		}

	/* nested inside right column of Tricks page */
	#tricks { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column of Tricks page */
	#notes {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

#footer { 
width: 900px;
height: 43px;

background-image:url('../images/bkg/bkg_06.gif');
background-repeat:no-repeat;
background-position:top right;

clear: both;
}

#login {
text-align: center;

width: 188px;
height: 43px;

margin-left: 29px;

float: left;
}

div.login {
min-height: 43px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 683px;
height: 43px;

float: right;
display: inline;
}

#badgesOfHonor
{
text-align: center;

margin-top: 40px;

}

 

[haku]

Try fixing the errors in your code first. That may fix your problem.

[Chezshire]

It validated earlier today, but I've been tweaking it through out the day so who knows right? Will do, thanks for the pointer Haku!

[JustLikeIcarus]

I think the mail thing you need to fix the issues your having is to set the columns parent container bg color to the left sidebar's, remove the left sides left margin and the right side;s right margin and change the width of their container to what you want.

 

However to get the best possible version of this, in my opinion would be to go here http://960.gs/ grab the css and use its classes to format the layout. 

[Chezshire]

Thank you JustLikeIcarus,

  I will explore this. I've managed to go through and revalidate almost all my code (keeping two hacks to keep my wacky iframe from which is 'hidden' in the menu bar working mind you). I will check out your suggestion and with fingers crossed this will take care of my issues

 

Thank you Icarus!

-Chez

[JustLikeIcarus]

CSS Frameworks are really nice since they take care of most of the common issues you run into, especially in regards to columns.

 

If you dont mind me asking, why are you using an iframe for the contact popup? The same functionality can be achieved with a little ajax if your just trying to prevent the whole page from submitting.

[Chezshire]

Thanks for the notes JustLikeIcarus,

  I'm using an iFrame hack because I don't know how to do an ajax implementation such as your suggesting Icarus. In time I hope to be able to do such things but at this time I don't know how to do such a thing or even how to really go about doing such a thing. Ajax would certainly be the cool way to go, but I've no idea how to do it really or even if by saying 'ajax implementation' is the correct way to refer to what it is that you are speaking of. I've heard of ajax and done a little reading, but i'm just a newb and thats kind of beyond me I think not that I'm not willing to try - but first I want to get the whole site done so that I can turn it in for my grade this quarter (this Thursday).

 

-Chez

 

P.S. I have a call back job interview for a web design position and am very excited about this!

[JustLikeIcarus]

Sounds like your going the correct route. Hope you get the job man.

[Chezshire]

Thanks for the help - it's all spiffy and working now! The problem was in my desire to implement a consistent naming convention AND my accidental replacement of one current stylesheet with an older stylesheet (the older style sheet listed the background faux column gif as 'BkG...' instead of 'bkg...'

Very embarrassed. But now i know why it simply stopped working.

 

Thanks so much for the help!

-Chez