This is my css *{ font-family:Tahoma, Verdana, Helvetica, sans-serif; font-size:11px; color:#D4D1CD; background-color:inherit; } body { padding:0; margin:0; background-color:#000000; background-image:url(images/background-image.jpg); background-repeat:no-repeat; color:#000000; } div.spacer { clear: both; } img { border:none; } a { color:#ffffff; text-decoration:none; padding:0 1px 0 1px; background-color:inherit; } a:hover { text-decoration:underline; } p { margin:0 0 0 0; padding:0 0 0 0; } ul { list-style-type:none; padding:10px 0 0 0px; margin:0 0 0 0; float:left; width:200px; } li { list-style-type:none; background-image:url(images/bullets.gif); background-repeat:no-repeat; background-position:0 50%; padding:3px 5px 3px 18px; } .left-div-wrapper { width:auto; float:left; margin-top:7px; } .right-div-wrapper { width:50%; float:left; } .logo-image { padding:49px 17px 0 9px; float:left; } .logo { padding:66px 17px 0 9px; float:left; } .menu { padding-left:160px; } .heading { padding:17px 0 17px 0px; } .divider-body { margin:0 15px 0 0px; border-bottom:1px solid #999999; } .game-image { padding-top:25px; padding-right:15px; float:left; } .game-image a { padding-top:5px; padding-right:15px; float:left; color:#ff0000; background-color:inherit; } .game-image a.pic { padding:0; float:none; } .bullets-block { width:200px; float:left; } .ubi-logo { padding-left:50px; } .footer { padding:22px 0 22px 0; background-color:#000; color:#CCCCCC; line-height:18px; } Now to my html code for my web page <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Welcome to OutbackThunda.com</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p class="logo-image"><a href="http://http://www.knfilters.com/" target="_blank"><img src="images/logo-image.gif" alt="Visit our Sponsor K&N Filters" title="Visit our Sponsor K&N Filters" width="172" height="48" /></a></p> <p class="logo"><a href="index.php"><img src="images/logo.gif" alt="Welcome to Outbackthunda.com" title="Welcome to Outbackthunda.com" width="315" height="32" /></a></p> <?php include('menu.php'); ?> </div> <div class="left-div-wrapper"> <p><img src="images/banner.jpg" alt="Banner" title="Banner" width="353" height="538" /></p> <div class="spacer"> </div> </div> <div class="right-div-wrapper"> <p class="heading"><img src="images/about-outback-thunda.gif" alt="New Games Arrivals" width="298" height="31" /></p> <p> Outback thunda originated in the year 2003 following two years of being a <br />Bronco Horse for a Brisbane based Rugby League team the Brisbane Broncos.</p> <br /> <p>At its Birth in the year 2000 this horse shaped body was known as Bronco<br /> Magic and was a very dark brown colour.</p> <p>After travelling to the USA to promote a number of shows on the east coast<br /> Clive Featherby decided it was always in his thinking to take this truck<br /> further afield and hopefully one day even venture to the big world of<br /> America hence a more overall Aussie name was needed and something with<br /> the outback in it,at the time Thunderstruck was playing everywhere so Clive<br /> thought one day Outback Thunda would be a cool name and from there a <br /> Australian monster truck star was born.</p><br /> <p>Next the brown colour had to go it didn't suit night time shows the truck was<br /> lost in the dark, it didn't appeal to the kids so again the outback is red<br /> and bright so again Clive decided it would take away from the Horse theme but<br /> the colours would certainly signify the Outback and would make the truck<br /> show friendly and Kid friendly and it has, Thunda is now the most popular<br /> truck across the southern Hemisphere and is now launching its popularity<br /> across the USA where already fans are taking to the truck in droves.</p><br /> <p>There have been four versions of Thunda this one being the brand new<br /> truck Build by monster truck Maestro Dan Patrick in Mid 2010.</p><br /> <p>The truck was then shipped 12000 miles to Australia for just two<br /> appearances where our brilliant fabricator Lindsay Houston from LDI Kustom<br /> signs fitted the new multi piece body then it was shipped all the way back to<br /> Westville Indiana were it now lives at Paul Shafer Motorsports.</p><br /> <p>Thunda made its USA debut on March 12 and 13 2011 at the Sears Center<br /> Chigago taking out its first ever USA victory winning the Skywheelie and<br /> Doughnut comps in a field that include the Likes of Bigfoot and Lucas Oils<br /> Stabiliser.</p><br /> <p>Thunda is a Patrick Chassis<br /> Thunda is powered by a 541 Big block Chevy<br /> Thunda uses a two speed powerglide transmission<br /> Thunda weighs approximately 10,000 lbs<br /> Thunda drinks almost 50 gallons of methanol (alcohol) at a average show<br /> Thunda is most definately shaped from a horse.</p> <p>Thunda's driver is Clive Featherby (see bio,s)</p><br /> <p>Thunda in his different forms has contested in over 600 shows in Australia in<br /> every state and territory and the new thunda is now permanently based full<br /> time at Paul shafer Motor sports in Westville Indiana (see Contact Us).</p><br /> <p>Thunda has a full merchandise range at most shows and online.</p> <div class="spacer"> </div> <p class="divider-body"> </p> <p class="footer">Copyright @ 2006, Outback Thunda Promotions, all rights reserved.</p> <a href="http://www.templatesold.com/" target="_blank">Website Template</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p> </div> </body> </html> There are white patches showing up in internet explorer, but displays fine in Firefox and chrome. I would also like to centre the page in the browser window and get the background image to display correctly. Any help would be very appreciated.
I think I have fixed the background colour issue by changing the background-color:inherit;to background-color:#000000; I have also fixed the background image not displaying by changing *{ font-family:Tahoma, Verdana, Helvetica, sans-serif; font-size:11px; color:#D4D1CD; background-color:inherit; } body { to *{ font-family:Tahoma, Verdana, Helvetica, sans-serif; font-size:11px; color:#D4D1CD; } body { I would still however like to centre the page in the browser.
Add this to your CSS: #wrapper { width:900px; margin:auto;} Code (markup): Add an ID to the opening div on the page: change the top part of your HTML to this: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Welcome to OutbackThunda.com</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> Code (markup): Now the content of the page is contained in the 'wrapper' div, which is 900px wide and has an automatically-assigned margin. This will centre the div (and content within) to the browser. Hope this helps!
Yes that did help, however it brings the body to the centre, but the background image stays to the left. I am thinking I might leave it all to the left hand side, only thing on a large resolution there will be alot of black nothing on the right side.
Try this: body { padding:0; margin:0; background:url(images/background-image.jpg) no-repeat #000 center; } Code (markup):