July 20, 200917 yr Hi again, I have resolved most of my CSS issues but one remains! This time, the footer appears separated from the content box and I have no idea why. The issue isn't there in Firefox provided I don't put too much content on the page. In IE it appears automatically. You can check the site out here: http://www.clansman-code.co.uk or if you are too lazy, a screenshot is here: CSS is as follows: #pagewrapper { width:750px; margin:0 auto; } #header { width:750px; height:79px; background:url(../img/header-bg.png) no-repeat #fff; } #maintitle { text-indent:-999px; background:url(../img/clansman-code-logo.gif) no-repeat; height:34px; width:322px; float:left; margin:0 0 0 10px; } #navbar.ul { float:right; height:30px; width:auto; } #navbar li { display:inline; border:1px solid green; height:30px; } .navbar-home { background: height:30px; text-indent:-999px; } .navbar-about-us { background:url(../extra/Clansman%20Code_files/about.gif) height:30px; text-indent:-999px; } .navbar-portfolio { background:url(../extra/Clansman%20Code_files/portfolio.gif) height:30px; text-indent:-999px; } .navbar-the-team { background:url(../extra/Clansman%20Code_files/the-team.gif) height:30px; text-indent:-999px; } .navbar-tutorials { background:url(../extra/Clansman%20Code_files/tutorials.gif) height:30px; text-indent:-999px; } #content { width:742px; background-color:#ccc; min-height:250px; height:Sauto; overflow:visible; background:url(../img/content-bg.gif) top center no-repeat; border-left:4px solid #000; border-right:4px solid #000; } #footer { float:right; height:15px; width:740px; text-align:right; padding:5px; background-color:#000; } #footer img { border:0px; } and my html is as follows: <!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"> <head> <title>Some keywords here - Clansman Code</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-GB" /> <meta name="author" content="Clansman Code" /> <meta name="resource-type" content="document" /> <meta name="robots" content="index, follow, archive" /> <meta name="googlebot" content="archive" /> <meta name="description" content="Clansman Code stuff" /> <meta name="keywords" content="I,like,keywords" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/accessibility.css" /> </head> <body> <div id="pagewrapper"> <div id="header"> <a href="/" title="Some keywords here - Clansman Code"><h1 id="maintitle">Clansman Code</h1></a> <ul id="navbar"> <li class="navbar-home">Home</li> <li class="navbar-about-us">About Us</li> <li class="navbar-portfolio">Portfolio</li> <li class="navbar-the-team">The Team</li> <li class="navbar-tutorials">Tutorials</li> </ul> </div> <div id="content"> </div> <div id="footer"> <a href="http://www.facebook.com/"><img src="img/facebook-icon.gif" alt="Find us on Facebook" /></a></div> </div> </body> </html> Sorry to have to ask this but I still have a lot to learn when it comes to CSS. Thanks! -Cloudy
July 21, 200917 yr If you change the top of the CSS to this: * { margin:0; } #pagewrapper { width:750px; margin:15px auto 0 auto; } that should do it.
July 21, 200917 yr Author Thanks for taking a look at it DesignByNinjas! I'm at work right now but will try patching it up when I get home! I take it was just the margin that was causing errors? -Cloudy
July 22, 200917 yr Problem in your css code. min-height not working in IE. you haev to use this class like below. #content { width:742px; background-color:#ccc; min-height:250px; overflow:visible; background:url(../img/content-bg.gif) top center no-repeat; border-left:4px solid #000; border-right:4px solid #000; } * html #content { height:250px; } when you wire "* html class/id Name" then it will work only in ie and ie always expand tag height if there is more content so you can give fix height for ie.
July 22, 200917 yr There's a big difference between DesignbjNinja's code * { margin: 0; } and Sanjay's code * html class/id name. Sanjay said "* html class/id Name" then it will work only in ie and ie always expand tag height if there is more content so you can give fix height for ie. The * html is operated by IE browsers less than IE6 (IE7 and IE8 ignore it and work like Firefox). The * { margin: 0; } suggested by DesignbyNinjas will apply to all browsers, also * p { color: red; } will apply to all browsers; it's only * html { } or * html p { } which is only for IE6 or lower. There is another selector which is only operated by modern browsers, IE7, IE8, Firefox, etc which is the > selector as in li>p { color: blue; } So you could use * html for IE6 and lower but > to make a rule only CSS compliant browsers like IE7 and Firefox understand. Sanjay's advice to use #content { min-height:250px; } * html #content { height:250px; } covers IE7, IE8, Firefox etc. with the first style and IE6 or lower with the second style. Cloudy didn't say which IE version had the space above the footer, perhaps it was only IE6. I've just looked at his page in IE7 and there is no space above the footer and he has not yet put in * { margin: 0; } or * html { margin: 0; } into the stylesheet. I notice that the current stylesheet has #content { width:742px; background-color:#ccc; min-height:250px; background:url(../img/content-bg.gif) top center no-repeat; border-left:4px solid #000; border-right:4px solid #000; height:auto; } which has two height definitions and that can cause problems. I think it's best to code for Firefox/IE7/IE8 first with just one style, then either use a conditional comment or a separate style with * html #content { } if you want to have a different style for IE6.
Create an account or sign in to comment