Extra Space at bottom of web page (after footer) in ALL browsers

    Question by:
    On

    Topics:

    Hi,

    I have a problem with my code and Im pretty sure I know where it is I just dont know how to fix it.

    Originally, there was white space after my footer and I couldn't figure out where is was coming from. I looked in the CSS and noticed I had the background of my HTML set to white. I took that code out and the white became my body background image (still after footer) so I figured it was something in my Header section. It turns out it is an extra '};' in my "MULTIBOX EFFECT" script. When i take out the '};' (two lines before the </script>) the extra space vanishes and the page looks how I want it to look. The only problem is, then the script does not work.

    How do I fix this issue? The script was downloaded off of the creators site and the script code that I have in the Header section is copied and pasted from his to mine just as the creator directed. I have even found other examples of this code working on other sites without extra space at the bottom of their pages.

    (just in case, below is my HTML and CSS)

    <!-- BEGIN HTML, this line not in original HTML, only here so viewer can see where code begins -->
     
    
    <!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" xml:lang="en" lang="en">
    
    <head>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    	<link rel="stylesheet" href="css/newstyle.css" type="text/css" />
    
        
    
        <!--MULTIBOX-->
    
    	<link rel="stylesheet" href="css/multiBox.css" />
    
        <script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
    
        <script type="text/javascript" src="js/mootools-1.2-more-yc.js"></script>
    
        <script type="text/javascript" src="js/multiBox.js"></script>
    
        <script type="text/javascript" src="js/overlay.js"></script>
     
    
                 <!-- MULTIBOX EFFECT -->
    
      <script type="text/javascript">
    
    //call multiBox
    
    window.addEvent('domready', function(){
    
    	if($$('.mb').length > 0)//only triggered if 'mb' class found on page
    
    	{
    
    		var initMultiBox = new multiBox('mb', {
    
    			descClassName: 'multiBoxDesc',//the class name of the description divs
    
    			path: './Files/',//path to mp3 and flv players
    
    			useOverlay: true,//use a semi-transparent background. default: false;
    
    			maxWidth: false,//max width (set to false to disable)
    
    			maxHeight: false,//max height (set to false to disable)
    
    			addDownload: false,//do you want the files to be downloadable?
    
    			pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify download script
    
    			addRollover: false,//add rollover fade to each multibox link
    
    			addOverlayIcon: false,//adds overlay icons to images within multibox links
    
    			addChain: true,//cycle through all images fading them out then in
    
    			recalcTop: true//subtract the height of controls panel from top position
    
    		});
    
    	};
    
    });
    
    </script>    
    
       
     
    
    	
    
        <!-- SLIDE EFFECT -->
    
        <script type="text/javascript">
    
    			window.addEvent("domready", function(){
     
    
    				$$(".slideContainer").each(function(container){
    
    					var mySlide = new Fx.Slide(container.getElement(".slide"), {duration: 800}).hide();
    
    					container.getElement("div.less").addEvent("mouseout", function(e){
    
    						new Event(e).stop();
    
    						mySlide.slideOut();
    
    						duration:Fx.Transitions.Bounce.easeOut;
    
    					});
    
    					container.getElement("a.more").addEvent("click", function(e){
    
    						new Event(e).stop();
    
    						mySlide.slideIn();
    
    						duration:Fx.Transitions.Bounce.easeOut;
    
    					});
    
    				});
    
    				
    
    			
    
    			});
    
    			
    
    		</script>
    
     
    
            <style type="text/css">
    
    			
    
    			.slideContainer {
    
    				margin: 10px;
    
    			}
    
    			.slide {
    
    				margin-top: 15px;
    
    				background-image:url(images/transback-full.png);
    
    				padding: 5px; 
    
    			}
    
    			
    
    		</style>
     
    
    	
    
        
    
        
    
        
    
        
    
       <title>NewWeb</title> 
    
    </head>
     
     
    
    <body>
    
    <div id="head_bar">&nbsp;</div>
     
    
    <!-- 'Title' Section -->
     
     
     
    
    <div id="header_section">
    
    	
    
    	<div id="header_section_center">
    
        	
    
            <div id="logo">
    
            	<img src="images/paint1.png" alt="logo" />
    
        	</div>
    
    		<div id="header_section_RTside">
    
        		<img src="images/toptitle1.png" style="padding-left:15px" alt="" />
    
       	  </div>
    
    		
    
           
    
        </div>
    
        
    
    </div>
     
     
    
        
    
        
    
        
    
    <div id="mainbody"> 
    
        <div id="content">
    
        <div id="global_nav">
    
            <ul>
    
            	<li><a href="index.html">About Me</a></li>
    
                <li><a href="index.html">Blog</a></li>
    
                <li><a href="index.html">Projects</a></li>
    
                <li><a href="index.html">Home</a></li>        
    
            </ul>
    
            </div>
     
     
    
        <!--</div>--><!-- ENDS contentDIV-->
    
        <div class="clear"></div>
    
            <div class="see">
    
    	
    
        <h2>Welcome to my online watercolor portfolio!</h2>
    
        <br />
    
        	<span>This is where you could introduce yourself and talk about the site. Explain how you got into paininting. What inspires you. Anything could go in this greeting section. Could explain how to navigate the site. See below.<br /><br />
    
            Please take a look at <a href="paintings.html">all my paintings</a>. To view larger images, click on the thumbnail. To view more information about the painting, click on the "Click Here" located next to the thumbnail. All paintings shown here are available for purchase.<br /><br />
    
            Also, dont forget to check on the nav bar on the right, it shows my recent blog posts as well as my current projects and some other quick links.<br /><br />
    
            Thanks for coming!</span>
    
    	</div>
    
    <div class="clear"></div>
    
    <div class="see">
    
    	<a href="images/northcountry-big.png" id="mb1" class="mb" title="Image Title 1 (jpg)"><img src="images/northcountry.png" alt="" /></a>
    
    <div class="multiBoxDesc mb1 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>North Country</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />
    
        <div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
    </div>
    
    <div class="clear"></div>
     
    
    <div class="see">
    
    	<a href="images/produce-big.png" id="mb2" class="mb" title="Image Title 1 (jpg)"><img src="images/produce.png" alt="" /></a>
    
    <div class="multiBoxDesc mb2 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>Produce</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />
    
        <div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
    </div>
    
    <div class="clear"></div>
    
        <div class="see">
    
    <a href="images/memories-big.png" id="mb3" class="mb" title="Image Title 1 (jpg)"><img src="images/memories.png" alt="" /></a>
    
    <div class="multiBoxDesc mb3 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>Memories of Lenape</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />
    
    	<div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
        </div><!-- ENDS 'see' -->
    
    <div class="clear"></div>
    
    <div class="see">
    
    	<a href="images/bungalow-big.png" id="mb4" class="mb" title="Image Title 1 (jpg)"><img src="images/bungalow.png" alt="" /></a>
    
    <div class="multiBoxDesc mb4 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>The Bungalow</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br /><br /><br />
    
        <div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
    </div>
    
    <div class="clear"></div>
    
    <div class="see">
    
    	<a href="images/dinning-big.png" id="mb5" class="mb" title="Image Title 1 (jpg)"><img src="images/dinning.png" alt="" /></a>
    
    <div class="multiBoxDesc mb5 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>Dinning Out</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br />
    
        <div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
    </div>
    
    <div class="clear"></div>
    
    <div class="see">
    
    	<a href="images/community-big.png" id="mb6" class="mb" title="Image Title 1 (jpg)"><img src="images/community.png" alt="" /></a>
    
    <div class="multiBoxDesc mb6 mbHidden">This is my descrition text 1. It can support html.</div>
    
        <h2>Community Table</h2>
    
        <small class="date">Painted on (insert date here)</small><br /><br /><br /><br /><br /><br /><br /><br />
    
        <div class="slideContainer">
    
    			<a href="#" class="more" style="text-decoration:none">Click here</a> to view information about the painting.
    
    			<div class="slide">
    
    				<div class="less" style="text-decoration:none">THis is where the info would go for the painting. Location, time, seaon, etc. LInk to maybe the actual picture or something similar to that. Then a link below to continue reading the story or view more pictures related to this painting, or a purchase page.</div>
    
    			</div>
    
                </div>
    
    </div>
    
    <div class="clear"></div>
    
    	<div class="clear"></div>
    
        </div><!-- ENDS content -->
    
        
     
    
        
    
        
    
        <div id="sidebar">
    
    	<div class="lv_Caption" id="sidebar_content">
    
        	<h3>About Me</h3><br />
    
            <p class="about_me">This is where you could introduce yourself and greet people. After, this sidebar could contain anything else. See example below.</p>
    
            <br />
    
            <div class="clear"></div>
    
            <h3>Recent Blog Entries</h3><br />
    
            <p>Could list recent blog entries here</p>
    
            <div class="clear"></div><br />
    
            <h3>Current Projects</h3><br />
    
            <p>Could list current projects here</p>
    
            <div class="clear"></div><br />
    
            <h3>Favorite Links</h3><br />
    
            <ul>
    
            	<li><a href="none.html">Best Scenic Shots</a></li>
    
                <li><a href="none.html">Tips and Tricks</a></li>
    
                <li><a href="none.html">Something Else</a></li>
    
            </ul>
    
        </div>
    
    </div>
    
    <div class="clear"></div>
    
        <div id="spacerContent_bottom"></div>
    
        </div>
    
        <div class="clear"></div>
    
        
    
        
    
        <!-- Sart Footer -->
    
    <div id="foot_bar">&nbsp;</div>
    
    <!-- End Footer -->
     
     
    
    	
     
    
        
    
        
     
    
    </body>
    
    </html>
     
     
     
     
    
    /* CSS BEGINS HERE, this line not in original CSS, only here so viewer can see where code begins */
     
    
    @charset "utf-8";
    
    /* CSS Document */
     
    
    body 
    
    {
    
    font: 16px/150% Arial, Helvetica, sans-serif;
    
    	color:	#5c8a92;
    
    	font-weight: bold;
    
    	background-color:#23404d;
    
    	background:url(../images/woodback.png);
    
    	margin-top: 0px;
    
    	margin-right: 0px;
    
    	margin-bottom: 0px;
    
    	margin-left: 0px;
    
    	height: auto;
    
    }
     
    
    /* TO SEE WHITE SPACE APPLY THIS, OTHERWISE, JUST EXTRA SPACE VISIBLE
    
    html{background-color:	#ffffff;} 
    
    */
     
    
    a, a:visited{
    
    	text-decoration:		none;
    
    	font-weight:			bold;
    
    	color:				#558d97;
    
    }
     
    
    #head_bar{
     
    
    	display:			block;
    
    	height:				auto;
    
    	width:				100%;
    
    	background:			#0e1720 repeat-x center;
    
    	border-bottom:			#23404d 1px solid;
    
    }
     
    
    #header_section{ 											/* Paper-like section */
     
    
    	display:			block;
    
    	width:				100%;
    
    	height:				396px;
    
    	background-image:url(../images/pix.png);
    
    }
     
    
    #header_section_center {										/* Centerize section */
     
    
    	display:			block;
    
    	padding:			0 0 0 0;
    
    	width:				950px;
    
    	height:				396px;
    
    	margin-left:auto;
    
    	margin-right:auto;
    
    /*
    
    	background: url(../images/headerback2.png);
    
    */
    
    }
     
    
    #header_section_RTside{
     
    
    	display:			block;
    
    	float:				right;
    
    	width:				291px;
    
    	padding:			105px 36px 40px 0;	
    
    	margin:				0 115px 0 0;
    
    	height:94px;
    
    	background:url(../images/transback-47.png);
    
    }
     
    
    #logo {															/* Section for top logo */
    
    	display:			block;
    
    	float:				left;
    
    	height:				200px;
    
    	width:				466px;
    
    	padding:			0 0 26px 0;
    
    	margin:				-15px 0 0 -90px;
    
    	position:			relative;
    
    }
     
     
    
    #mainbody{
    
    	display:			block;
    
    	margin:				0 auto;
    
    	height:				auto;
    
    	width:				1007px;
    
    	background-image:url(../images/pix.png);
    
    }
     
     
     
    
    .see{
    
    	display: block;
    
    	margin:				25px 0 0 65px;
    
    	width:				625px;
    
    	background-image:url(../images/transback-47.png);
    
    	min-height:			220px;
    
    	height:auto;
    
    	font-weight:		normal;
    
    	padding:			20px;
    
    	position:			relative;
    
    }
     
    
    #content{
    
    	display:			block;
    
    	float:				left;
    
    	width:				700px;
    
    	height:				auto;
    
    	margin:				0 0 0 65px;
    
    }
     
    
    #global_nav {
    
    	
    
    	position:			relative;
    
    	float: 				right;
    
    	height: 			45px; 
    
    	width: 				450px;
    
    	margin: 			-50px 0 0 130px;
     
    
    }
     
    
    /* BELOW IS CLASSES UNDER THE global_nav TO BE USED WITH PAGE NAVIGATION - BOTH HIGH AND LOW */
     
    
    #global_nav ul {
    
    	padding: 			0;
    
    	margin: 			15px 0 0 0;
    
    }
     
     
     
    
    #global_nav ul li {
    
    	float: 				right;
    
    	list-style: 			none;
    
    }
     
     
     
    
    #global_nav ul li a, #global_nav ul li a:visited{
     
    
    	z-index: 			10;
    
    	display: 			block;
    
    	float: 				left;
    
    	height: 			36px;
    
    	overflow: 			hidden;
    
    	color:				#d7eaee;
    
    	font-size:			22px;
    
    	position: 			relative;
    
    	padding:			0 15px 6px 15px;
     
    
    }
     
     
     
    
    #global_nav ul li a:hover{
     
    
    color:				#fefefe;
     
    
    }
     
    
    /* END OF global_nav ITEMS */
     
     
    
    .clear { 														/* Clears all other floats */
    
    	clear:				both;
    
    }
     
     
    
    #spacerContent_top {
    
    	display:			block;
    
    	margin:				0 auto 0 38px;
    
    	height: 55px;
    
    	width:				1000px;
    
    	background-image:url(../images/pix.png);
    
    	background-repeat:no-repeat;
     
    
    }
     
    
    #spacerContent_bottom {
    
    	display:			block;
    
    	min-height: 250px;
    
    	width:				1000px;
    
    	margin: 0 0 0 37px;
    
    	background-image:url(../images/pix.png);
    
    	background-repeat: no-repeat;
    
    }
     
     
    
    /*HORIZONTAL VERTICAL MootTools Stuff */
     
     
    
    h3.section {
    
    	margin-top: 1em;
    
    }
     
    
    #vertical_slide, #horizontal_slide {
    
    	background: #D0C8C8;
    
    	color: #8A7575;
    
    	padding: 10px;
    
    	border: 5px solid #F3F1F1;
    
    	font-weight: bold;
    
    }
     
    
    div.marginbottom {
    
    	/* Since the Fx.Slide element resets margins, we set a margin on the above element */
    
    	margin-bottom: 10px;
    
    }
     
    
    /* MOUSEENTER mooTools Stuff */
     
    
    div.floated {
    
    	width: 400px;
    
    	float: left;
    
    	margin-left: 1em;
    
    }
     
    
    div#myElement {
    
    	width: 100px;
    
    	height: 100px;
    
    	border: 1px solid black;
    
    	background-color: #f9f9f9;
    
    	float: left;
    
    }
     
    
    div#myOtherElement {
    
    	width: 200px;
    
    	height: 20px;
    
    	overflow: hidden;
    
    	border: 1px solid black;
    
    	background-color: #f9f9f9;
    
    }
     
    
    div#myOtherElement span, div#myOtherElement a {
    
    	display: block;
    
    	padding: 0 3px;
    
    }
     
     
    
    div#myOtherElement a:hover {
    
    	background: #f5f5f5;
    
    }
     
     
    
    /* SIDEBAR STUFF */
     
    
    #sidebar{
    
    	float:				right;
    
    	display:			block;
    
    	width:				225px;
    
    	height:				auto;
    
    	display:			inline;
    
    	margin: -35px -30px 0 0;
    
    	background-image:url(../images/transback-67.png);
    
    }
     
     
    
    #sidebar_content{
    
    	display:			block;
    
    	width:				181px;
    
    	height:				auto;
    
    	padding: 25px 25px 35px 20px;
     
    
    }
     
     
    
    #sidebar_content ul{
    
    	margin:				0 0 20px 15px;
     
    
    }
     
    
    #sidebar_content h3{
    
    	margin:				16px 0 0 0;
    
    	font-size:18px;
    
    }
     
    
    #sidebar_content a, #sidebar_content a:visited{
    
    	border-bottom:			1px dotted #24758a;
    
    	text-decoration:		none;
    
    	font-weight:			bold;
    
    	color:				#c1e2e8;
    
    	font-size:16px;
    
    }
     
    
    #sidebar_content a:hover{
    
    	color:				#daf1f5;
    
    	border-bottom:			1px dotted #509cb0;
    
    }
     
    
    #sidebar_content p.about_me{
    
    	text-align:			left;
    
    }
     
    
    #sidebar_content p.about_me a{
    
    	float:				right;
    
    	display:			block;
    
    	font-weight:			normal;
    
    }
     
    
    #sidebar_content p {
    
    	color: #6298a1;
    
    	font-size:16px;
     
    
    }
     
     
    
    /* MISC STUFF */
    
    .cool {
    
    	PADDING-RIGHT: 12px;
    
    	PADDING-LEFT: 12px;
    
    	FONT-SIZE: 12px;
    
    	BACKGROUND: #f8f8f8;
    
    	PADDING-BOTTOM: 12px;
    
    	MARGIN: auto;
    
    	VERTICAL-ALIGN: middle;
    
    	COLOR: #666;
    
    	LINE-HEIGHT: 48px;
    
    	PADDING-TOP: 12px;
    
    	TEXT-DECORATION: none
    
    }
    
    .cool:hover {
    
    	BACKGROUND: none transparent scroll repeat 0% 0%;
    
    	COLOR: #000
    
    }
     
     
    
    small {
    
    	font-style:			italic;
    
    	font-size:			12px;
    
    	line-height: 			1.5em;
    
    	font-weight:			bold;
    
    	color:				#83b2ba;
    
    }
     
     
     
     
     
     
    
    /* BELOW IS PASTE FROM OLDER STYLESHEET - some not used */
     
     
    
    /*
    
    background-color:#23404d; --- color
    
    */
     
    
    /*original font color: 83b2ba,   688e94*/
     
    
    /* General */
    
    a.read-more, a.read-more:visited{
     
    
    	color:				#486571; /*#9fd689, 405b66, 1f9bcd, 32474f, 385059*/
    
    	display:			block;
    
    	font-size:			18px;
    
    	letter-spacing:			-0.04em;
    
    	width:				131px;
    
    	text-align:			center;
    
    	height:				63px;
    
    	padding:			15px 12px 11px 0;
    
    	margin:				10px 0 20px 0;
    
    	float:				right;
    
    	clear:				both;
    
    	background-image:url(../images/readmoreback-newblue4.png);
    
    	background-repeat: no-repeat;
    
    }
     
     
     
     
    
    /* DIV IDs */
     
     
     
    
    #foot_bar{
     
    
    	display:			block;
    
    	height:				auto;
    
    	width:				100%;
    
    	background:			#0e1720 repeat-x center; 
     
    
    }
     
    
    #top_header_center{
     
    
    	display:			block;
    
    	width:				950px;
    
    	height:				65px;
    
    	margin:				0 auto;
    
    	background:			#0e1720;
    
    }
     
    
    #global_nav2 {										/* Used for top of page navigation */
     
    
    	position:			relative;
    
    	float:				right; 
    
    	height: 			36px; 
    
    	width: 				600px; 
    
    	padding: 			14px 0 0 0; 
    
    	margin: 			0; 
    
    } 
     
     
     
     
    
    	
    
    /*
    
    position:			relative;
     
    
    float:				right; 
     
    
    height: 			45px; 
     
    
    width: 				450px;
     
    
    margin: 			140px -275px 0 0;
     
    
    background-image:url(../../images/transback-47.png);
     
     
    
    } */
     
     
    
    #header_section_border {
    
    	display:			block;
    
    	margin:				0 auto;
    
    	width:				1000px;
    
    	background-image:url(../images/pix.png)
     
    
    }
     
     
    
    /* DIV CLASSES - USED (CALLED) MORE THAN ONCE VS ids ONLY CALLED ONCE */
     
    
    .entry img{
    
    	padding:			6px;
    
    	border:				#d9e7eb 1px solid;
    
    	background:			#fff;
    
    	max-width:			550px;
     
    
    }
     
     
     
    
    .info_old1 {															/* Section for paintings / descriptions */
    
    	float:				left;
    
    	width:				518px;
    
    	display:			block;
    
    	min-height:			220px;
    
    	margin:				20px 22px 0 35px;
    
    	font-weight:		normal;
    
    	padding:			20px;
    
    	position:			relative;
     
    
    }
     
    
    .info_top {															/* Section for paintings / descriptions */
    
    	float:				left;
    
    	width:				518px;
    
    	display:			block;
    
    	min-height:			220px;
    
    	margin:				-120px 22px 0 35px;
    
    	font-weight:		normal;
    
    	padding:			20px;
    
    	position:			relative;
     
    
    }
     
    
    .info small.date_added, .info_top small.date_added{
    
    	display:			block;
    
    	background: 		url('images/b07V12_small_bk.jpg') no-repeat top center;
    
    	padding:			8px;
    
    	margin:				8px 0 8px 230px;
    
    }
     
    
    .info p.tags{
    
    	display:			block;
    
    	width:				541px;
    
    	padding:			8px;
    
    	margin:				8px 0 8px 0;
     
    
    }
     
    
    .info h2, .info_top h2 {											/* Font used for title of Paintings */
    
    	font-size: 			1.8em;
    
    	color:				#1f2d3d;		
    
    	margin: 			0 0 2px 0;
    
    	padding: 			6px 0 3px 0;
    
    	line-height:			28px;
     
    
    }
     
    
    .info small.date, .info_top small.date{									/* Font used for date of Paintings */
    
    	display:			block;
    
    	padding:			8px;
    
    	margin:				8px 0 8px 230px;
    
    }
     
     
    
    .leftThumb {
    
    	border: 7px solid #405b66;
    
    	float:				left;
    
    	margin:				5px 15px 5px 0;
    
    }
     
    
    .alignleft{
    
    	float:				left;
    
    	margin:				5px 15px 5px 0;
     
    
    }
     
     
     
     
     
    
    /* CORRECTIONS */
     
    
    .info{
    
    	float:				left;
    
    	width:				600px;
    
    	display:			block;
    
    	min-height:			220px;
    
    	margin:				20px 22px 0 15px;
    
    	font-weight:		normal;
    
    	padding:			20px;
    
    	position:			relative;
    
    }
     
     
     
    
    /* TEST 2 */
     
    
    #listholder{
    
    	display:			block;
    
    	float:				left;
    
    	width:				746px;
    
    	height:				auto;
    
    	margin:				0 0 0 50px;
    
    	background-image:url(../images/shadowedpaper-745.png);
    
    }
     
    
    #beef{
    
    	display:			block;
    
    	margin:				0 auto;
    
    	height:				auto;
    
    	width:				1000px;
    
    }
     
    
    .paintlist{
    
    	float:				left;
    
    	width:				600px;
    
    	display:			block;
    
    	min-height:			220px;
    
    	margin:				20px 22px 0 30px;
    
    	font-weight:		normal;
    
    	padding:			20px;
    
    	position:			relative;
    
    }
     
     
    
    #container_sbar{
    
    	float:				right;
    
    	display:			block;
    
    	width:				200px;
    
    	height:				auto;
    
    	display:			inline;
    
    	margin: 0 3px 0 0;
    
    	background-image:url(../images/transback-47.png);
    
    }
     
    
    #sbarMeat{
    
    	display:			block;
    
    	width:				150px;
    
    	height:				auto;
    
    	background-image:url(../images/transback-47.png);
    
    }
     
     
    
    #NEWcontent{
    
    	display:			block;
    
    	float:				left;
    
    	width:				746px;
    
    	height:				auto;
    
    	margin:				0 0 0 65px;
    
    	background-image:url(../images/pix.png);
     
    
    }
    

    Open in new window

    Good Question?
    0

    Featured Post

    Course: Foundations of Front-End Development

    Jump-start a lucrative career in front-end web development, with zero previous coding experience required. This course covers the basic programming concepts and languages required for creating engaging websites from scratch.

    Top Expert Contributor

    Essential articles and videos from the Experts

    Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
    This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.

    More valuable questions with Expert answers

    Question: Hi there, I have developed a website for a customer and they have mentioned that when they view the contact form, the select options are blank. Are you able to take a look and advise me what i have done wrong. This seems to happen in IE and...

    Answer: The problem I'm seeing with those <select> elements is in Firefox and IE9. The height is being calculated at just 1px and the text is being clipped, so it's completely illegible. The solution is to give "-moz-box-sizing: border-box; box-sizing:...

    Question: I have a page that displays a table. When using ie it prints the header of the table just fine. Firefox only prints the first page Chrome prints both pages but page 2 doesn't display the table header How can I fix this issues ? I am using...

    Answer: This may have more to do with your HTML than your CSS. Can you post a link to the page? The first thing that comes to mind without being able to look at your HTML is whether you have a tbody element. Although most browsers allow you to have a...

    htmls

    Answer by Dave Baldwin

    Question: I would appreciate it if I could receive a paragraph or two about the implications of the "s" in htmls

    Answer: One site says it is... HyperText Markup Language document with server - side includebut that has usually been 'shtml' on my servers. https://en.wikipedia.org/wiki/Server_Side_Includes It is also a 'module' on npmjs: ...

    Question: (CODE) Shows this header at runtime: How do I manipulate the border style for the header .. to make the border red and yellow instead of black lines and grey lines?

    Answer: You will need to add CSS to your table header <th> so use your existing external css file and create new class. You can set individual column color using id="yourexistingid" or class="red" apply the color based on that. Some references ...

    201601-LO-Qu-076

    Extend your technology team with the Experts Exchange community.

    — trusted by —

    Who answers my questions?Our community has technology experts around the world.

    CEHJ

    16,922

    Solutions

    Expert in:

    • Java
    • Java EE
    • Editors IDEs
    • JSP
    • Programming Languages-Other

    mccarl

    1,480

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Programming-Other
    • Algorithms

    dpearson

    918

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Programming-Other
    • Game Programming

    zzynx

    3,066

    Solutions

    Expert in:

    • Java
    • Apache Flex
    • Adobe Flash
    • Editors IDEs
    • Miscellaneous

    Moussa Mokhtari

    93

    Solutions

    Expert in:

    • JavaScript
    • jQuery

    Amitkumar Panchal

    516

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP
    • Oracle Database

    Jim Cakalic

    1,248

    Solutions

    Expert in:

    • Java
    • Java EE
    • JSP

    AndyAinscow

    11

    Articles

    3,248

    Solutions

    Expert in:

    • .NET Programming
    • C#
    • System Programming
    • Visual C++.NET
    • ASP.NET

    dravidnsr

    719

    Solutions

    Expert in:

    • Java EE
    • JSP
    • Java

    RELATED TOPICS view all topics

    1. Java EE
      (16,945)
    2. Editors IDEs
      (24,919)
    3. JSP
      (15,278)
    4. Programming-Other
      (51,584)
    5. Programming Languages-Other
      (19,530)
    6. Java App Servers
      (6,800)
    7. Web Servers
      (31,947)
    8. Web Languages/Standards-Other
      (39,384)
    9. JavaScript
      (118,145)
    10. Oracle Database
      (77,516)