SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow problems (I think)

    My first, so far failed attempt at a complete layout in CSS - I'm having a weird issue...

    http://www.xixel.net/clients/PAHud/template.html

    In IE, its behaving properly right now, in FF however its not (resizing your browser height to get a vertical scrollbar you will see the overflowing content)

    Now, if I dont float the main container it doesnt overflow.. I know this has to be something silly and simple.

    thanks in advance for your time

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. IE is wrong; FF is right. Read the quote:
    Quote Originally Posted by Kravvitz
    IE5-6/Win doesn't support min-height. When overflow is set to visible, which is the default on most elements, IE5-6/Win wrongly treats height as min-height. However, when you change the value of the overflow property of an element IE5-6/Win does properly handle the height property.
    Try changing
    Code:
    html > body #outer {
    	height: auto;
    }
    to
    Code:
    html > body,html > body #outer {
    	height: auto;
    	min-height: 100%;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems to have made it worse, it now stops at the bottom of the header..

  4. #4
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think its something related with the floats, cant seem to get it all to work still

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no hair left! I've pulled it all out trying to figure this out

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    height min-height for outer

    #outer {
    width: 876px;
    margin: 0 auto;
    text-align: left;
    background: url('images/bg-borders-nav.gif') 0% 0% repeat-y;
    position: relative;
    }
    * html #outer {height: 100%;}
    head+body #outer {min-height: 100%;}

    and clear the floats for FF

    * html .fcl{clear:both;height:0px;overflow:hidden;margin-top:0px;}
    head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    	<title>PokerAce Software</title>
    		<style type="text/css">
    	/*	Body Styles and Hacks	*/
    	body {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	background: url('images/bg-tile.gif') 0% 40% repeat;
    	height: 100%;
    	}
    
    	html > body #outer {
    	height: auto;
    	min-height: 100%;
    	}
    
    	* html #outer { height: 100%; } /*for IE as IE treats height as min-height anyway*/
    
    	/*	commented backslash hack v2	\*/ 
    	html, body {
    	height: 100%;
    	}
    	/*	end hack	*/ 
    
    /*	General Styles	*/
    body, div, span, p, li, a {
    	font-family: Verdana, Tahoma, Sans-Serif;
    	font-size: 11px;
    }
    
    h1, h2, h3, h4, h5, input, textarea, select {
    	font-family: Verdana, Tahoma, Sans-Serif;
    }
    	#outer {
    	width: 876px;
    	margin: 0 auto;
    	text-align: left;
    	background: url('images/bg-borders-nav.gif') 0% 0% repeat-y;
    	position: relative;
    	}
    	* html #outer {height: 100%;}
    	head+body #outer {min-height: 100%;}
    
    	* html .fcl{clear:both;height:0px;overflow:hidden;margin-top:0px;}
    	head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
    
    
    /*	Body Styles	*/
    #body {
    	margin: 0px 39px 0px 39px;
    	padding: 0px;
    }
    /*	Header Styles	*/
    #header {
    	width: 798px;
    	height: 123px;
    	background:  url('images/logo-withnav.gif') 0% 0% no-repeat;
    }
    #adcontainer {
    	width: 468px;
    	height: 60px;
    	border: 1px solid #ececec;
    	position: relative;
    	top: 10px;
    	left: 318px;
    }
    /* Side Navigation Styles */
    #side {
    	width: 200px;
    	float: left;
    	margin-right: 20px;
    }
    #sidenav {
    	width: 200px;
    	margin: 0;
    	padding: 0;
    }
    #sidenav ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    #sidenav li {
    	margin: 0px 0px 3px 0px;
    	width: 100%;
    	height: 20px;
    }
    #sidenav a {
    	display: block;
    	font-family: Tahoma, Verdana, Arial;
    	font-weight: bold;
    	font-size: 11px;
    	text-decoration: none;
    	color: #999999;
    	width: 100%;
    	height: 20px;
    	line-height: 20px;
    	text-indent: 15px;
    }
    #sidenav  a:hover, #sidenav2  a:active {
    	cursor: pointer;
    	font-family: Tahoma, Verdana, Arial;
    	font-weight: bold;
    	font-size: 11px;
    	text-decoration: none;
    	color: #000000;
    	background: url('images/nav-over.gif') repeat-x top left;
    	width: 100%;
    	height: 20px;
    	line-height: 20px;
    	text-indent: 15px;
    }
    
    /*	Main Container Styles	*/
    #content {
    	width: 578px;
    	float: right;
    }
    .maincontainer {
    	width: 578px;
    	position: relative;
    	top: -40px;
    	margin-bottom: 10px;
    }
    .maincontainer h2 {
    	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    	font-size: 11pt;
    	color: #333333;
    	background: url('images/big-header.gif') repeat-x;
    	margin: 0;
    	padding: 0 0 0 8px;
    	height: 27px;
    	line-height: 28px;
    	border-left: 1px solid #e8e8e8;
    	border-top: 1px solid #e8e8e8;
    	border-bottom: 1px solid #e8e8e8;
    }
    .maincontainer h3 {
    	font-family: Tahoma, Verdana, Arial; 
    	font-size: 10px;
    	color: #FFFFFF;
    	background: url('images/small-header.gif') repeat-x;
    	margin: 0px 0px 0px 20px;
    	padding: 0 0 0 5px;
    	height: 21px;
    	line-height: 20px;
    }
    .maincontainer span {
    	color: #b9e8ff;
    	position: relative;
    	top: 1px;
    }
    
    .maincontainer div {
    	margin: 0;
    	padding: 3px 3px 3px 30px;
    }
    /*	Footer Styles	*/
    #footer {
    	clear: both;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	margin: 0 39px;
    	padding: 4px 0;
    	background: url('images/footer.gif') repeat-x;
    	width: 798px
    }
    
    #footer span {
    	display: block;
    	text-align: center;
    	font-size: 9px;
    	letter-spacing: 1px;
    	color: #999999;
    }
    	
    	
    	
    	</style>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta name="Title" content="PokerAce Software" />
    	<meta name="Description" content=" Welcome to PokerAce Software, home of PokerAce Heads Up Display. PokerAce Hud is a companion application for the PokerTracker online poker hand history tracking application. PA Hud reads the statistics from PokerTracker and places them directly on the poker client window as you play." />
    	<meta name="Keywords" content="pokerace, poker ace, pokerace heads up display, PAHUD, PA HUD, poker tracker display" /> 
    </head>
    
    <body>
    	<div id="outer">
    		<div id="body">
    			<div id="header">
    				<div id="adcontainer"></div>
    			</div>
    			
    			<div id="side">
    				<div id="sidenav">
    					<ul class="sidenav">
    						<li><a href="#">Home</a></li>
    						<li><a href="#">PokerAce HUD</a></li>
    						<li><a href="#">Forums</a></li>
    						<li><a href="#">About Us</a></li>
    						<li><a href="#">Contact</a></li>
    					</ul>
    				</div>
    			</div>
    			
    			<div id="content">
    				<div class="maincontainer">
    					<h2>Welcome to PokerAce Software!</h2>
    					<br />
    					<h3><span>&rsaquo;</span> Key Features</h3>
    					<div>
    						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque non orci. Nulla facilisi. Ut ornare est ac orci. Maecenas metus lacus, porta sed, commodo eget, consequat nec, massa. Donec ornare. Aenean vulputate nibh et nulla. Nulla facilisi. Donec wisi sapien, aliquam eget, placerat eu, lacinia a, enim. Donec tincidunt sapien at neque sollicitudin interdum. Vestibulum dui erat, luctus ut, lobortis ut, mattis non, pede.</p>
    						<p>Vivamus enim. Aliquam odio. Maecenas sagittis ullamcorper pede. Nulla facilisi. Fusce sagittis. Nullam sodales massa vitae ligula. Aenean tempor accumsan libero. Ut diam magna, pulvinar eu, viverra eget, pretium sit amet, diam. Vestibulum egestas rutrum est. Cras vel sapien. Nam tincidunt adipiscing lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam nibh nibh, adipiscing fringilla, feugiat ut, vestibulum nec, enim. Ut ultricies scelerisque erat.</p>
    					</div>
    					<h3><span>&rsaquo;</span> Latest News</h3>
    					<div>
    						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque non orci. Nulla facilisi. Ut ornare est ac orci. Maecenas metus lacus, porta sed, commodo eget, consequat nec, massa. Donec ornare. Aenean vulputate nibh et nulla. Nulla facilisi. Donec wisi sapien, aliquam eget, placerat eu, lacinia a, enim. Donec tincidunt sapien at neque sollicitudin interdum. Vestibulum dui erat, luctus ut, lobortis ut, mattis non, pede.</p>
    						<p>Vivamus enim. Aliquam odio. Maecenas sagittis ullamcorper pede. Nulla facilisi. Fusce sagittis. Nullam sodales massa vitae ligula. Aenean tempor accumsan libero. Ut diam magna, pulvinar eu, viverra eget, pretium sit amet, diam. Vestibulum egestas rutrum est. Cras vel sapien. Nam tincidunt adipiscing lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam nibh nibh, adipiscing fringilla, feugiat ut, vestibulum nec, enim. Ut ultricies scelerisque erat.</p>
    					</div>
    				</div>
    			</div>
    			<div class="fcl"></div>
    		</div>
    		<div id="footer"><span>&copy; 2005-2006 Josh Harler</span></div>
    	</div>
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actualy have a smile on my face! thank you so much! greatly appreciated


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
  •