Solved

CSS layout combining fixed and relative elements

Posted on 2013-05-17
4
442 Views
Last Modified: 2013-11-19
Hi experts,

I am trying to build a page with a fixed left menu and then products' columns.

I have success, everything works well except :
In Firefox, the background ends below my header (with navigation bar), include my footer, but the main body is uppon all.

In Chrome, Safari, Opera & even in IE it works well, like I wish.

Do you have an idea wtf is this bug ?

You can view the online version HERE

Here are the page products:
<div id="products">
	<cfif variables.viewType.mode EQ "details">
		
	<cfelseif variables.viewType.mode EQ "thumbs">
		<!--- variable to hold table layout --->
		<cfset variables.columnCounter = 0> <!--- variable to hold columns layout --->
		<cfif session.productsColumns GT 1>
			<cfset variables.columnwidth = 100 / session.productsColumns> <!--- variable to hold columns width --->
			<cfset variables.productswidth = variables.columnwidth * (session.productsColumns - 1)> <!--- variable to hold products part width (without sideBar) --->
		<cfelse>
			<cfset variables.columnwidth = 50>
			<cfset variables.productswidth = variables.columnwidth>
		</cfif>
		
		<!--- display side Bar & productsThumbs --->
		<cfoutput>
			<!--- display the side bar --->
			<div id="productsSideBar" style="width:#variables.columnwidth#%;"> <cfinclude template="/views/sharedComponents/3a_productsSideBar.cfm"> </div>
			
			<!--- display the products --->
			<div id="productThumbs" style="width:#variables.productswidth#%;">
				<table>
					<cfloop array="#variables.products#" index="variables.product">
						<cfset variables.columnCounter ++>
						<cfif variables.columnCounter EQ 1> <tr> </cfif>
							<td class="productThumb" style="width:#variables.columnwidth#%;">
								<!--- the product's picture --->
								<a href="#request.targetCFC.getUrl()#" class="productsLinks" onclick="processing();">
									<img class="productThumbPicture" src="#application.pictures.thumbsPath##variables.product.getReferenceId()#.jpg" />
								</a> <br/>
								<!--- products data --->
								<div class="productThumbData">
									<!--- data always displayed --->
									<div class="productThumbDataAlwaysDisplayed">
										#variables.product.getReferenceId()# #variables.product.getName()# <br/>
										Packsize #variables.product.getPacksize()# #variables.product.getAssortmentType()# <br/>
										#session.currency# #evaluate("variables.product.get" & variables.priceActive & "()")# <br/>
									</div>
									<!--- data displayed on hover --->
									<div class="productThumbDataDisplayedOnHover">
										<input type="button" class="productsButtons"			value="#request.targetCFC.getRangeLabel()#"
																							onclick="processing();document.location.href='#request.targetCFC.getUrl()#';"> <br/>
										<input type="button" class="productsButtons"			value="#request.targetCFC.getMoreDetailsLabel()#..."
																							onclick="processing();document.location.href='#request.targetCFC.getUrl()#';">
										<input type="button" class="productsButtons submit"	value="#request.targetCFC.getAddToBasketLabel()#"
																							onclick="processing();document.location.href='#request.targetCFC.getUrl()#';"> <br/>
									</div>
								</div>
							</td>
						<cfif variables.columnCounter EQ session.productsColumns - 1>
							</tr>
							<cfset variables.columnCounter = 0>
						</cfif>
					</cfloop>
					<cfif variables.columnCounter NEQ 0>
						<cfloop condition="variables.columnCounter NEQ 0">
							<cfset variables.columnCounter ++>
							<td class="productThumb">&nbsp;</td>
							<cfif variables.columnCounter EQ session.productsColumns - 1>
								</tr>
								<cfset variables.columnCounter = 0>
							</cfif>
						</cfloop>
					</cfif>
				</table>
			</div>
		</cfoutput>
	</cfif>
</div>

Open in new window


And here is the css involved:
@charset "UTF-8";
/* Contains the css's rules for the global website's parts */

/*****************************************
*** Products' parts - General elements ***
******************************************/
/* the div containing the products (all, the page body +/-) */
#products {
	
}
/* the links surrounding products' pictures */
.productsLinks {
	
}
/* the products' buttons */
.productsButtons {
	float: none;
}
/*********************************************
*** END Products' parts - General elements ***
**********************************************/

/*******************************
*** Products' parts - Thumbs ***
********************************/
/* the part containing the products' side bar */
#productsSideBar {
	float: left;
	position: fixed;
}
/* the part containing the products thumbs */
#productThumbs {
	float: right;
}
/* the td containing 1 product thumb (data + image) */
.productThumb {
	text-align: center;
	vertical-align: bottom;
	padding-bottom: 3em;
}
/* the product's picture */
.productThumbPicture {
	text-align: center;
}
/* the div containing product's data - all */
.productThumbData {
	display:block;
	text-align: left;
}
/* the div containing product's data - always visible data */
.productThumbDataAlwaysDisplayed {
	
}
/* the div containing product's data - visible on hover data */
.productThumbDataDisplayedOnHover {
	visibility: hidden;
}
/* the div containing product's data - visible on hover data - hover attributes */
#productThumbs td:hover .productThumbDataDisplayedOnHover {
	visibility: visible;
}
/***********************************
*** END Products' parts - Thumbs ***
************************************/

Open in new window


Thanks a lot for your help.
0
Comment
Question by:adam1h
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39176390
The page is junk in all browsers.  There are 93 validation errors; many of them serious.  

The immediate issue is because you have not set a background color on the menu or main content.  Firefox followed the xhtml spec and defaulted the background to transparent.  The other browsers probably don't have a problem because the defective code likely confused them and they rendered wrong and the combination of bad code and weak browser compliance worked in your favor.  

If you leave the page code the way it is, it is going to be unstable and every time you touch it is could just meltdown.

Cd&
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39176557
Yes there is few errors in your style. As you are productsSideBar and productThumbs two column floating why didn't you clear floating before your footer start.

I have tested using inline style:

<div style=" clear:both;"></div>
<div id="footer">

Open in new window

0
 

Author Comment

by:adam1h
ID: 39176813
Hi both,

Thanks To point this to me.

I'll try to repair these errors and to add the clear:both; code.
0
 

Author Comment

by:adam1h
ID: 39185825
Hi Both,

Sorry for late replying.

It works well when adding "clear: both;" to the footer.

With wich tool do you see the error validation ?

I have check with firebug but I see nothing.

Thanks
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now