SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Problem- IE; Clearing Problem-Mozilla

    In IE, the background does not extend all the way to the bottom on the left and right sides.

    In mozilla, the content is going past the footer.

    http://www.swishstudios.net/dss/

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't seem to figure this one out.
    Last edited by swishstudios; Nov 27, 2004 at 21:10.

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have fixed the background problem in IE, but not the Mozilla problem.

    I am using the clearer technique, but the content still goes past the footer.

    HTML:

    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" xml:lang="en" lang="en">
    
    <head>
    <title>DropShipSites</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    
    
    <body>
    
    <div id="container" class="text">
    
    	<div id="banner"></div>
    
    
    <!-- Client Login -->
    
    	<div id="clientlogin">
    		<div id="cl_content">
    		<form method="post" action="">
    			<div class="cl_txt">username</div>
    			<div><input type="text" class="form" name="username" /></div>
    			<div class="cl_txt">password</div>
    			<div><input type="password" class="form" name="password" />&nbsp;<input type="submit" class="login" value="login" /></div>
    		</form>
    		</div>
    	</div>
    
    <!-- Client Login END -->
    
    <!-- Horizontal Menu -->
    	<div>
    		<ul id="horizontalmenu">
    			<li id="hl_home"><a href="#"></a></li>
    			<li id="hl_hostingplans"><a href="#"></a></li>
    			<li id="hl_turnkeystores"><a href="#"></a></li>
    			<li id="hl_freeemptystores"><a href="#"></a></li>
    			<li id="hl_faq"><a href="#"></a></li>
    			<li id="hl_support"><a href="#"></a></li>
    			<li id="hl_contactus"><a href="#"></a></li>
    		</ul>
    	</div>
    <!-- Horizontal Menu END -->
    
    <!-- Left Side -->
    	<div id="leftside">
    
    		<div class="menutitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Main Menu</div>
    		<ul class="sidemenu">
    			<li class="sm_item"><a href="#">Store Demos</a></li>
    			<li class="sm_item"><a href="#">Features</a></li>
    			<li class="sm_item"><a href="#">Contributions</a></li>
    			<li class="sm_item"><a href="#">Knowledge Base</a></li>
    			<li class="sm_item"><a href="#">Templates</a></li>
    		</ul>
    
    		<div class="menutitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Company News</div>
    		<ul class="companynews">
    			<li class="cn_date">Nov. 11, 2004</li>
    			<li class="cn_text">Lorem ipsum dolor sit amet, consectetuer wisi. Aenean vel libero quis justo vehicula facilisis.</li>
    			<li class="cn_date"><a href="#">Read More...</a></li>
    			<li class="cn_div"></li>
    			<li class="cn_date">Nov. 11, 2004</li>
    			<li class="cn_text">Lorem ipsum dolor sit amet, consectetuer wisi. Aenean vel libero quis justo vehicula facilisis.</li>
    			<li class="cn_date"><a href="#">Read More...</a></li>
    			<li class="cn_div"></li>
    			<li class="cn_date">Nov. 11, 2004</li>
    			<li class="cn_text">Lorem ipsum dolor sit amet, consectetuer wisi. Aenean vel libero quis justo vehicula facilisis.</li>
    			<li class="cn_date"><a href="#">Read More...</a></li>
    		</ul>
    
    		<div id="bottomlinks" class="cn_date"><a href="#">TOS</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Privacy</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">AUS</a></div>
    
    
    <br class="clearer" />
    	</div>
    <!-- Left Side END -->
    
    <!-- Content -->
    	<div id="content">
    
    		<div id="crumb_bg"><a href="#">Home</a>&nbsp;/&nbsp;<a href="#">Bread</a>&nbsp;/&nbsp;<a href="#">Crumb</a></div>
    
    		<div id="contentpadding">
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    
    			<h4>Welcome to DropshipSites.com</h4>
    			<p>Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list. Dropship Resources. Wholesale Business Solutions. Wholesale Dropship. Drop Shipper. Wholesale Drop Shipper. Adult Toy, Tool, video game, poster, SMC Gift, Gift Basket.</p>
    		</div>
    
    
    <br class="clearer" />
    	</div>
    <!-- Content END -->
    
    
    <!-- Right Side -->
    	<div id="rightside">
    
    		<div class="rs_title">November 22, 2004</div>
    		<p class="cn_text">Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list.</p>
    
    		<div class="rs_title">November 22, 2004</div>
    		<p class="cn_text">Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list.</p>
    
    		<div class="rs_title">November 22, 2004</div>
    		<p class="cn_text">Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list.</p>
    
    		<div class="rs_title">November 22, 2004</div>
    		<p class="cn_text">Get a FREE Ecommerce Shopping Cart. Turnkey Stores powered by Dropshippers. Huge Drop Ship list.</p>
    
    
    <br class="clearer" />
    	</div>
    <!-- Right Side END -->
    
    <!-- Footer Side -->
    	<div id="footer">
    		<div id="yellowline"></div>
    		<div id="purpleline"><strong>&copy; 2004 DropshipSites.com. All rights reserved.</strong></div>
    
    	</div>
    <!-- Footer Side END -->
    
    </div>
    
    </body>
    </html>
    CSS:

    Code:
    .clearer{
     clear:both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    *html .clear{
    	display:none;
    }
    html {
    	height: 100%;
    }
    body {
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    	height: 100%;
    	position: relative;
    }
    #container {
    	width: 800px;
    	height: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	display: block;
    	position: relative;
    	border-style: solid;
    	border-width: 0px 1px 0px 1px;
    	border-color: #000000;
    	background: #EEEEEE;
    }
    #contentcontainer {
    	width: 800px;
    	height: 100%;
    	min-height: 100%;
    	margin: 0 auto;
    	display: block;
    	position: relative;
    	background: #EEEEEE;
    }
    .text {
    	font-family: Verdana;
    	font-size: 12px;
    	color: #000000;
    	line-height: 19px;
    }
    .text a {
    	font-family: Verdana;
    	font-size: 12px;
    	color: #000000;
    	text-decoration: underline;
    }
    .text a:hover {
    	font-family: Verdana;
    	font-size: 12px;
    	color: #3B3B61;
    	text-decoration: underline;
    }
    h4 {
    	font-family: Arial;
    	font-size: 18px;
    	color: #3B3B61;
    	font-weight: 100;
    	margin: 0px;
    	padding: 0px;
    }
    p {
    	margin: 10px;
    	padding: 0px;
    }
    #banner {
    	width: 541px;
    	height: 102px;
    	background-image: url(images/banner.gif);
    	float: left;
    	display: block;
    	overflow: hidden;
    }
    
    /* ########## CLIENT LOGIN ########## */
    #clientlogin {
    	width: 259px;
    	height: 102px;
    	background-image: url(images/clientlogin_bg.gif);
    	float: left;
    	display: block;
    	overflow: hidden;
    }
    #cl_content {
    	margin: 21px 0px 0px 23px;
    	width: 236px;
    	height: 71px;
    }
    .cl_txt {
    	font-family: Verdana, Arial;
    	font-size: 11px;
    	color: #65656F;
    }
    .form {
    	width: 125px;
    	height: 13px;
    	background: #FFFFFF;
    	border-style: solid;
    	border-width: 1px;
    	border-color: #000000 #FFFFFF #FFFFFF #000000;
    	font-family: Verdana;
    	font-size: 10px;
    	color: #555555;
    }
    .login {
    	width: 50px;
    	height: 17px;
    	background: #FF9933;
    	border-style: solid;
    	border-width: 1px;
    	border-color: #FFFFFF #000000 #000000 #FFFFFF;
    	font-family: Verdana;
    	font-size: 10px;
    	color: #FFFFFF;
    	font-weight: bold;
    }
    
    
    /* ########## HORIZONTAL MENU ########## */
    #horizontalmenu {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	display: inline;
    }
    #horizontalmenu li {
    	margin: 0px;
    	padding: 0px;
    	display: inline;
    }
    #hl_home a {
    	width: 82px;
    	height: 41px;
    	background-image: url(images/hl_home.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_hostingplans a {
    	width: 135px;
    	height: 41px;
    	background-image: url(images/hl_hostingplans.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_turnkeystores a {
    	width: 141px;
    	height: 41px;
    	background-image: url(images/hl_turnkeystores.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_freeemptystores a {
    	width: 156px;
    	height: 41px;
    	background-image: url(images/hl_freeemptystores.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_faq a {
    	width: 64px;
    	height: 41px;
    	background-image: url(images/hl_faq.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_support a {
    	width: 94px;
    	height: 41px;
    	background-image: url(images/hl_support.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    #hl_contactus a {
    	width: 128px;
    	height: 41px;
    	background-image: url(images/hl_contactus.gif);
    	display: block;
    	overflow: hidden;
    	float: left;
    }
    
    /* ########## LEFT SIDE ########## */
    #leftside {
    	width: 140px;
    	height: 100%;
    	min-height: 100%;
    	background: #EEEEEE;
    	float: left;
    	display: block;
    	position: relative;
    }
    .menutitle {
    	width: 140px;
    	height: 20px;
    	background-image: url(images/sm_title_bg.gif);
    	display: block;
    	overflow: hidden;
    	font-family: Arial;
    	font-size: 12px;
    	color: #FFFFFF;
    	font-weight: bold;
    	line-height: 17px;
    }
    
    /* ########## SIDE MENU ########## */
    .sidemenu {
    	margin: 0px;
    	padding: 0px;
    	width: 140px;
    	display: block;
    	overflow: hidden;
    	margin-bottom: 10px;
    }
    .sidemenu li {
    	margin: 0px;
    	padding: 0px;
    	width: 140px;
    	display: block;
    	overflow: hidden;
    }
    .sm_item {
    	padding-left: 28px;
    	width: 140px;
    	height: 26px;
    	background-image: url(images/sm_bg.gif);
    	display: block;
    	overflow: hidden;
    	font-family: Verdana;
    	font-size: 12px;
    	color: #242450;
    	font-weight: bold;
    	line-height: 23px;
    }
    .sm_item a {
    	padding-left: 28px;
    	width: 140px;
    	height: 26px;
    	background-image: url(images/sm_bg.gif);
    	display: block;
    	overflow: hidden;
    	font-family: Verdana;
    	font-size: 12px;
    	color: #242450;
    	font-weight: bold;
    	line-height: 23px;
    	text-decoration: none;
    }
    .sm_item a:hover {
    	padding-left: 28px;
    	width: 140px;
    	height: 26px;
    	background-image: url(images/sm_bg_over.gif);
    	display: block;
    	overflow: hidden;
    	font-family: Verdana;
    	font-size: 12px;
    	color: #242450;
    	font-weight: bold;
    	line-height: 23px;
    	text-decoration: none;
    }
    
    /* ########## COMPANY NEWS ########## */
    .companynews {
    	margin: 5px 5px 10px 5px;
    	padding: 0px;
    	display: block;
    	overflow: hidden;
    	list-style: none;
    }
    .companynews li {
    	margin: 0px;
    	padding: 0px;
    	display: block;
    	overflow: hidden;
    	list-style: none;
    }
    .cn_date {
    	font-family: Arial;
    	font-size: 11px;
    	font-weight: bold;
    	color: #3B3B61;
    }
    .cn_date a {
    	font-family: Arial;
    	font-size: 11px;
    	font-weight: bold;
    	color: #3B3B61;
    	text-decoration: underline;
    }
    .cn_date a:hover {
    	font-family: Arial;
    	font-size: 11px;
    	font-weight: bold;
    	color: #3B3B61;
    	text-decoration: none;
    }
    .cn_text {
    	font-family: Arial;
    	font-size: 11px;
    	color: #474747;
    }
    .cn_text a {
    	font-family: Arial;
    	font-size: 11px;
    	color: #474747;
    	text-decoration: underline;
    }
    .cn_text a:hover {
    	font-family: Arial;
    	font-size: 11px;
    	color: #3B3B61;
    	text-decoration: underline;
    }
    .cn_div {
    	width: 130px;
    	height: 10px;
    	background-image: url(images/cn_div.gif);
    	display: block;
    	overflow: hidden;
    }
    
    
    /* ########## TOS \ PRIVACY \ AUS ########## */
    #bottomlinks {
    	width: 140px;
    	height: 20px;
    	background: #D4D4DB;
    	text-align: center;
    	border-style: solid;
    	border-width: 1px 0px 0px 0px;
    	border-color: #000000;
    	line-height: 19px;
    }
    
    
    /* ########## CONTENT ########## */
    #content {
    	width: 520px;
    	height: 100%;
    	background-image: url(images/content_bg.gif);
    	float: left;
    	display: block;
    	position: relative;
    }
    #contentpadding {
    	margin: 15px;
    }
    #crumb_bg {
    	width: 510px;
    	height: 21px;
    	background-image: url(images/crumb_bg.gif);
    	padding-left: 10px;
    	display: block;
    	overflow: hidden;
    }
    
    /* ########## RIGHT SIDE ########## */
    #rightside {
    	width: 139px;
    	height: 100%;
    	background: #EEEEEE;
    	float: left;
    	display: inline;
    	position: relative;
    }
    .rs_title {
    	width: 139px;
    	height: 21px;
    	background: #D4D4DB;
    	display: block;
    	overflow: hidden;
    	font-family: Arial;
    	font-size: 12px;
    	color: #3B3B61;
    	text-align: center;
    	font-weight: bold;
    	line-height: 21px;
    }
    
    /* ########## FOOTER ########## */
    #footer {
    	width: 800px;
    	height: 28px;
    	display: inline;
    	overflow: hidden;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	position: relative;	
    }
    /* Removes extra whitespace in IE */
    *html #footer {
    	margin-bottom: -19px;
    }
    #yellowline {
    	width: 800px;
    	height: 5px;
    	background: #E79110;
    	display: inline;
    	overflow: hidden;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	position: relative;
    }
    #purpleline {
    	width: 800px;
    	height: 23px;
    	background: #3B3B61;
    	display: inline;
    	overflow: hidden;
    	text-align: center;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	position:relative;
    }

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take this :
    Code:
    height: 100%; min-height: 100%;
    out of #container{}

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    NO need to take it out - just do it properly
    Code:
    #container {
     width: 800px;
     min-height: 100%;
     margin: 0 auto;
     display: block;
     position: relative;
     border-style: solid;
     border-width: 0px 1px 0px 1px;
     border-color: #000000;
    }
    * html #container {height:100%}
    The min-height is for mozilla and height is for ie (which it treats as min-height anyway. Just keep them away frome ach other.


    You also need to add a clear before the closing div of the main container.

    here:

    Code:
      <div id="footer"> 
    	<div id="yellowline"></div>
    	<div id="purpleline"><strong>&copy; 2004 DropshipSites.com. All rights reserved.</strong></div>
      </div>
      <!-- Footer Side END -->
    <div class="clear"></div>
    </div>
    </body>
    </html>
    That should get it all working (in most browsers anyway).

    Paul

  6. #6
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you VERY much for the help.

    That code seems to work perfectly Paul O'B. Thank you.

  7. #7
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swishstudios
    Thank you VERY much for the help.

    That code seems to work perfectly Paul O'B. Thank you.
    Yeah, he's a wizard. That's the reason he's Web Designer of the Year!!


Bookmarks

Posting Permissions

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