Tableless layout: Firefox problem!

Discussion in 'CSS' started by asura88, Jul 18, 2008.

  1. #1
    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
     
    asura88, Jul 18, 2008 IP
  2. marinaroz

    marinaroz Member

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    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.
     
    marinaroz, Jul 18, 2008 IP