SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 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. #3
    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


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
  •