SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. Sep 15, 2004, 15:39 #1
    The New Guy
    The New Guy is offline
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Moz clearing problem

    I cant seem to fix this one. For my navigation on the left, which is floating left, it just want clear, and as a result content goes off the page. Here code.

    CSS:

    Code:
     html, body{
 	height: 100%;
 	margin: 0px;
 	padding: 0px;
 }
 body{
 	background: #000 url('../images/background.gif') repeat top left;
 	text-align: center;
 }
 #container{
 	width: 754px;
 	\width: 774px; /* IE5 Box Model Hack */
 	w\idth: 754px;
 	padding: 0px 10px 0px 10px;
 	height: 100%;
 	margin: auto;
 	text-align: left;
 	background: #FFF url('../images/midbackground.gif') repeat-y top left;
 }
 #logo{
 	float: left;
 	width: 200px;
 	height: 108px;
 	\height: 113px; /* IE5 Box Model Hack */
 	he\ight: 108px; 
 	border-top: 5px solid #5E0000;
 	background: #8C0000 url('../images/logo.gif') no-repeat center left;
 }
 #topnavigation{
 	float: right;
 	width: 554px;
 	height: 108px;
 	\height: 113px; /* IE5 Box Model Hack */
 	he\ight: 108px; 
 	border-top: 5px solid #5E0000;
 	background-color: #8C0000;
 }
 #searchbar{
 	float: right;
 	width: 240px;
 	\width: 245px; /* IE5 Box Model Hack */
 	w\idth: 240px; 
 	height: 24px;
 	background: #5E0000 url('../images/searchcorner.gif') no-repeat top left;
 	text-align: right;
 	margin: 0px;
 	padding: 0px 5px 0px 0px;
 }
 #searchbar input.search{
 	width: 150px;
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 	font-size: 0.7em;
 	border: 1px solid #666;
 }
 #searchbar input.searchbutton{
 	width: 50px;
 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 	font-size: 0.7em;
 	border: 1px solid #6BA2A9;
 	background-color: #00495C;
 	color: #FFF;
 }
 #adspace{
 	width: 554px;
 	height: 60px;
 	\height: 64px; /* IE5 Box Model Hack */
 	he\ight: 60px; 
 	background: #8C0000 url('../images/fullbanner.gif') no-repeat center center;
 	padding: 2px 0px 2px 0px;
 	clear: right;
 }
 #navbuttons{
 	float: right;
 	width: 554px;
 	height: 20px;
 	background-color: #8C0000;
 	padding: 0px;
 	margin: 0px;
 	list-style-type: none;
 }
 #navbuttons li{
 	float: right;
 	margin: 2px 0px 0px 0px;
 }
 #navbuttons a{
 	width: 90px;
 	text-align: center;
 	display: block;
 	color: #FFF;
 	background: #00495C url('../images/dark.gif') no-repeat top right;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 0.7em;
 	text-decoration: none;
 	padding: 2px 0px 2px 0px;
 	margin-left: 2px;
 }
 #navbuttons a:hover{
 	background: #ADC8CC url('../images/light.gif') no-repeat top right;
 }
 #middlebar{
 	background: #FFF url(../images/barbg.gif) repeat-x top left;
 	width: 754px;
 	height: 22px;
 	clear: both;
 }
 #nav{
 	float: left;
 	width: 190px;
 }
 #content{
 	float: left;
 	width: 554px;
 	background-color: skyblue;
 	margin-left: 10px;
 }
 #bottom{
 	clear: both;
 	width: 754px;
 	background-color: #FFF;
 }
    HTML:

    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" lang="en">
 <head>
 	<link rel="stylesheet" href="styles/style.css" type="text/css" />
 	<title>Testing</title>
 </head>
 <body>
 	<div id="container">
 		<div id="logo"></div>
 		<div id="topnavigation">
 			<form id="searchbar" method="get" action="">
 				<input class="search" type="text" />
 		    	<input class="searchbutton" type="submit" value="Search" />
 			</form>
 			<div id="adspace"></div>
 			<ul id="navbuttons">
 		    	<li><a href="#">Heading 1</a></li>
 		    	<li><a href="#">Heading 1</a></li>
 		    	<li><a href="#">Heading 1</a></li>
 		    	<li><a href="#">Heading 1</a></li>
 			</ul>
 		</div>
 			<div id="middlebar"></div>
 			<div id="nav">
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			<a href="a.html">Gifts Templates</a><br />
 			</div>
 		<div id="content">content</div>
 		<div id="bottom">Copyright &copy;</div>
 	</div>
 </body>
 </html>
    The reason for all those links its to show the problem. Thanks for looking at it
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"
    - Stephen Colbert on Apple Users
  2. Sep 15, 2004, 15:53 #2
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,048
    Mentioned
    129 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You're looking in the wrong place lol. Th error is at the top of the code.

    You have given your container a height of 100% so thats what moz does. You need a min-height for moz and a height:100% for ie.

    Code:
    #container{
width: 754px;
\width: 774px; /* IE5 Box Model Hack */
w\idth: 754px;
padding: 0px 10px 0px 10px;
	min-height: 100%;
margin: auto;
text-align: left;
background: #FFF url('../images/midbackground.gif') repeat-y top left;
}
/* commented backslash mac hiding hack \*/ 
* html #container {height:100%;}
/* end hack */
    Hope that helps.

    Paul
  3. Sep 15, 2004, 15:57 #3
    The New Guy
    The New Guy is offline
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ah jeez. Its to late to do this stuff. Thanks alot. Worked like a charm.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"
    - Stephen Colbert on Apple Users

« Previous Thread | Next Thread »

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
  •  

Forum Rules