Hi All Can anyone please tell me where am I going wrong in code below it fairly straight forward, Style switcher works fine. The problem is When I'm using Firefox background image doesn't show but there no problem in IE. why???? Thanks Zed <!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=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="styleSheetSwitcher.js"></script> </head> <body><center> <div id="main">Hello <div id="centerbox">world</div> </div></center></body> </html> Code (markup): CSS Code #main { position: relative; background-image:url(images/Driving_bkg3.gif); background-repeat: no-repeat; height: 100%; left: 5%; } #centerbox { margin: -20% 3% 0 40%; padding: 0%; width: 41%; height: auto; background-color:#C9F; } Code (markup):
What look are you exactly trying to create here? Firstly the <center> tag is deprecated, and shouldn't be used, as it's effect can be re-created using CSS. So your HTML should read like 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=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="styleSheetSwitcher.js"></script> </head> <body> <div id="main"> Hello <div id="centerbox">world</div> </div> </body> </html> Code (markup): Now your CSS is really muddled up, and seems a lot complex than it should be. Firstly on your #main theres no need for the position:relaitve, and left:5%. If you want the box to appear 5% from the edge then just use margin-left:5%. Secondly on your #centerbox, at least you have used margins to position the box here, but if you wanted to center the box you could just use: margin:0 auto; Theres no need to use padding:0%, because the padding on the box is 0 anyway, so it's having no effect. The same goes for height:auto;, the height will be automatic by default.