Okay, so here's my problem: I've made my very first tableless layout using CSS, but I just can't get it to work with Mozilla Firefox. It looks alright in IE, but the layout image won't load in Firefox. I don't know what's wrong with it. You can see the website here: http://www.mango-milkshake.net/index2.php My CSS: body { background: #000000; margin: 0; } #container { background: url(http://www.mango-milkshake.net/chrona-fondo.gif) repeat-y; width: 700px; margin: 0 auto; } #layout { width: 100%; height: 400px; background: url(http://www.mango-milkshake.net/chrona layout.jpg) no-repeat; } #footer { clear: both; } #content { float: left; width: 380px; margin: -255px 0px 0px 55px; } #sidebar { float: right; width: 203px; margin: 0px 10px 0px 0px; } p { font-family: arial; font-size: 9pt; line-height:19px; color: #ffffff; letter-spacing: 0pt; font-weight: normal; } b{ font-family: Verdana; font-size: 8pt; color: #A7DEFD; } u{ font-family: Arial; font-size: 10pt; color: #ffffff; BORDER-BOTTOM: #7CC2FD 1px dotted; } i{ font-family: Verdana; font-size: 9pt; color: #7CC2FD; } a:link, a:visited, a:active { text-decoration: none; color: #CC9BEC; font-family: Georgia; font-size: 12px; letter-spacing: 0pt; font-weight: bolder; } a:hover { text-decoration: none; color: #cccccc; } h1 { margin: 0 0 2px 0; padding: 0px; padding-bottom: 0px; border-bottom: 0px; BORDER-RIGHT: 0px; BORDER-TOP: #cccccc 2px solid; BACKGROUND: ; BORDER-LEFT: 0px; BORDER-BOTTOM: #cccccc 2px solid; text-align: center; color:#ffffff; font-family:Arial; font-size:16pt; font-weight:normal; } h2 { margin: 0 0 2px 0; padding: 1px 1px 1px 0; BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: ; BORDER-LEFT: 0px; BORDER-BOTTOM: #7CC2FD 1px dashed; text-align: left; color:#ffffff; font-family:Arial; font-size:15pt; font-weight:normal; } h3 { margin: 0 0 2px 0; padding: 1px 1px 1px 0; BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: #000000; BORDER-LEFT: 0px; BORDER-BOTTOM: #ffffff 1px dotted; text-align: right; color:#745189; font-family:georgia; font-size:10pt; font-weight:bolder; } h4 { margin: 0 0 2px 0; padding: 1px 1px 1px 0; BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: #; BORDER-LEFT: 0px; BORDER-BOTTOM: #7CC2FD 1px dotted; text-align: left; color:#cccccc; font-family:Georgia; font-size:12pt; font-weight:normal; } h5 { margin: 0 0 2px 0; padding: 1px 1px 1px 0; BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND: #; BORDER-LEFT: 0px; BORDER-BOTTOM: #745189 1px dotted; text-align: left; color:#cccccc; font-family:Arial; font-size:8pt; font-weight:normal; } Code (markup): {SORRY about posting the whole thing, but I guess there may be something wrong anywhere else!} The HTML: <div id="container"> <div id="layout"> </div> <div id="sidebar"> </div> <div id="content"> </div> <div id="footer"> </div> </div><!--container end--> Code (markup): Thank you so much
See how "chrona layout.jpg" has a space between the words? Apparently firefox disapproves. Remove the space from the filename and the problem will probably be resolved.