Im quite new to web design and im currently making a site and testing using WAMP locally so sorry if im missing something obvious. When I view the site in Google Chrome it displays correctly, but in firefox and internet explorer the styles dont seem to work. Chrome; http://i.imgur.com/ldBE6.png Code (markup): Firefox; http://i.imgur.com/9xaxB.png Code (markup): Heres my stylesheet; @charset "utf-8"; /* CSS Document */ body,td,th { font-family: Calibri; font-size: 11px; color: #000; } body { background-color: #CCC; } a:link { color: #03F; text-decoration: none; } a:visited { text-decoration: none; color: #03F; } a:hover { text-decoration: underline; color: #000; } a:active { text-decoration: none; } #header { text-align:center; margin-left:auto; margin-right:auto; background-color:#666; color:#000000; width:1000px; height:110px; } #content { text-align:left; text-indent:10px; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; background-color:#FFF; width: 1000px; border-bottom:none; } #footer { font-size:9px; margin-left:auto; margin-right:auto; text-align:center; background-color:#666; width:1000px; height:50px; } .hometable td { vertical-align:top; background-color:#CCCCCC; } .hometable caption { caption-side: bottom; font-style: italic; text-align: right; } .itemtable { vertical-align:central; font-size:11px; } .itemtable td { background-color:#FFF; } .itemtable caption { caption-side:bottom; text-align:right; font-size:8px; } .browsetable td { vertical-align:top; } .browseinnertable td { vertical-align:top; background-color:#CCCCCC; text-align:center; } Code (markup): And here is the basic website code (saved as .php); <!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>Project Store</title> <link rel="stylesheet" href="/style/style.css" type="text/css" media="screen/> </head> <body> <!-- Main Div --> <div align="center" id="main"> <!-- Header Contents --> <br> <div align="center" id="header"> <table width="100%"> <tr> <td width="25%" height="74"><a href="index.php"><img src="style/header.png" width="400" height="80" alt="header" /></a></td> <td width="75%"> </td> </tr> <tr> <td colspan="2"><div align="center">| <a href="browse.php">browse</a> | <a href="search.php">search</a> | <a href="about.php">about</a> | <a href="contact.php">contact</a> |</div></td> </tr> </table> </div> <!-- Body Contents --> <div align="center" id="content"> <br> <p>Test</p> <br></div></div> <!-- Footer Contents --> <div align="center" id="footer"> <br> <p></p> </div> </body> </html> Code (markup): Can anyone see what im doing wrong? Thanks in advance.
well, chrome largely supports css3, even firefox does but they both have different syntax , not different ..but u have to add these tags sometimes for example for chrome the tag is "-webkit-" for firefox the tag is "-moz-" so its like #div{ -webkit-border: -moz-border: } it is something like that..im not really sure..correct me if im wrong!
Tried this and it still shows incorrectly in firefox; #header { text-align:center; margin-left:auto; margin-right:auto; background-color:#666; color:#000000; width:1000px; height:110px; -moz-text-align:center; -moz-margin-left:auto; -moz-margin-right:auto; -moz-background-color:#666; -moz-color:#000000; -moz-width:1000px; -moz-height:110px; } Code (markup): Do I need to have multiple stylesheets, like one for each browser? EDIT: Also seems to validate fine under W3C for CSS 2.1 and 3
Hi, you know what, look at line 6 of your html code. You have there something like this at the end of line: media="screen/> but it should be media="screen"/>