Fri, 2010-03-05 10:33
hey im having a bit of trouble, in firefox the background displays fine.But for some reason in ie7 it doesnt!! my wrapper background displays fine its just the page background...iv heard about these hacks you have to use in your code for some browsers and im having trouble getting my head around it ...anyone know a good website that explains all that??? iv been learning webdevelopment in my own time after work and at weekends there is so much to learn!! just when you think your starting to get a hang of it theres something else you dont understand!!
heres the code thanks guys,oh and if anyone sees anything else im doing wrong could you please tell me!! thanks
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> </title> <style type="text/css" media="screen"> /* <![CDATA[ */ @import url(css/main.css); /* ]]>*/ </style> </head> <body> <div id="banner"> <img src="images/headers/banner.gif" height="150" width="600" alt="neville harvey builder"/> </div> <div id="wrapper" class="clearFix"> <div id="main"> <p>Lorem ipsum per nominavi aliquyam deseruisse id, brute labitur nostrum cu sea, vis eu euismod abhorreant. Aliquip copiosae recteque sed ea, ponderum vituperata </p><br/> <p>conclusionemque sed eu, cu accusam takimata deterruisset qui. Quo tritani tibique repudiare ea, eum ei feugait phaedrum platonem, est odio modus suscipiantur no. Solum molestie mea cu, impedit nominati voluptaria </p><br/> <p>pri no, tale accumsan laboramus qui eu. Error simul aliquyam at sed, cu cum consul eligendi imperdiet. there was no way i could do this ahhhhhhhhhhh.</p><br/> <p>Ei vis denique lobortis, debet causae suscipit sed ut, sea id ludus sensibus</p> </div> <div id="sidebar"> <div class="boxout servicesheader"> <h2>boxout title</h2> <p>Ei vis denique lobortis, debet causae suscipit sed ut, sea id ludus sensibus delicatissimi. Malis commodo et ius, amet eu ismod antiopam eum in, id dictas dolorem moderatius vim. Vitae habemus </p> </div> <div class="boxout contactusheader"> <h2>boxout title</h2> <p>Ei vis denique lobortis, debet causae suscipit sed ut, sea id ludus sensibus delicatissimi. Malis commodo et ius, amet eu ismod antiopam eum in, id dictas dolorem moderatius vim. Vitae habemus </p> </div> </div> </div> <div id="footer"> <div id="altnav"> <a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a> </div> Copyright © Enlighten Designs<br/> Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a> </div> </body> </html>
* { margin: 0; padding: 0; } html { font-size: 100%; } body { background: #6666cc url(../images/backgrounds/page-background.gif)repeat-x; font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; } #banner { width:600px; border: 0; margin: 0 auto; } #wrapper { width: 625px; margin: 0 auto; border: 2px solid #ffffff; border-top:0; background: #ffffff url(../images/backgrounds/wrapper-background.gif) 0 100% repeat-x; font-size: 1.2em; line-height: 1.5em; padding: 20px 20px 50px; } } p { margin-bottom: 1.5em; } #navbar { } #main { float:left; width: 380px; margin-right: 20px; } #sidebar { width: 200px; float: left; } .clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .boxout { width: 180px; margin: 0 0 20px 20px; padding: 0 10px 1px; background: #e1e1e1 url(../images/backgrounds/boxout-bottom1.gif) 0 100% no-repeat; } .boxout h2 { background: #d7932a url(boxout-top-orange.gif) no-repeat; margin: 0 -10px 10px; padding: 5px 10px; border-bottom: 1px solid #ffffff; font: bold 1.2em Arial, Helvetica, sans-serif; text-transform: uppercase; color: #ffffff; } .boxout p { font-size: 0.9em; } .servicesheader h2 { background: #d72a49 url(../images/backgrounds/boxout-services.gif) no-repeat; } .contactusheader h2 { background: #2a84d7 url(../images/backgrounds/boxout-contactus.gif) no-repeat; } div#footer{ width: 624px; background:#666666; clear:both; height: 66px; font-family:Tahoma, Arial, Helvetica, Sans-serif; font-size:10px; color: #c9c9c9; border-top: 2px solid #3300ff; padding: 13px 25px; line-height:18px; margin: 0 auto; } #footer a { color: #c9c9c9; text-decoration: none; } #footer a:hover { color: #3300ff; } #footer #altnav { width: 350px: float: right; text-align: right; }
Fri, 2010-03-05 10:53
#1
You could possibly be falling
You could possibly be falling foul of an old bug in IE6 that has translated over?
ground.gif)repeat-x;
No space between the closing parenthesis and the repeat-x can be an issue always ensure a space between values.
Fri, 2010-03-05 11:21
#2
thats fixed it
thankyou mate,that had me scratching my head...and all that time it was something so simple.
Fri, 2010-03-05 12:52
#3
So it has translated over
So it has translated over 
oh those dolts they did such a half arsed job with IE7, I guess then that the other bug exists as well, same idea but with selectors and the opening curly brace specifically pseudo classes.