SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Moz clearing problem
-
Sep 15, 2004, 16:39 #1
- 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; }
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 ©</div> </div> </body> </html>
"A nerd who gets contacts
and a trendy hair cut is still a nerd"
- Stephen Colbert on Apple Users
-
Sep 15, 2004, 16:53 #2
- 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 */
Paul
-
Sep 15, 2004, 16:57 #3
- 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