www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Firefox doesn't read any CSS at all... Weird problem

  1. #1
    Join Date
    Jan 2012
    Posts
    74

    resolved [RESOLVED] Firefox doesn't read any CSS at all... Weird problem

    Hi,

    I am making div's and CSS and the layout works perfectly in Safari and Chrome, but doesn't work at all with Firefox.
    There are no background colors displayed in Firefox and the dummy text gets out of the div...

    I've included two screenshots and my CSS code below.
    Thanks a lot for helping me on that.
    Alex


    body, html {
    margin: 0;
    padding: 0;
    color: black;
    background: white;
    }

    #wrap {
    width:1000px;
    margin:0 auto;
    background:#99c;
    }

    #header {
    background:#ddd;
    }
    #nav {
    background:#c99;

    }
    #main {
    background:#9c9;
    float: right;
    width: 770px;
    height: 800 px

    }
    #sidebar {
    background:#000;
    float: left;
    width: 230 px;
    height: 800 px
    }
    #footer {
    background: #cc9;
    clear: both;
    }
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    I don't see anything wrong with your CSS.

    I would recommend that you check the page you're writing is well formed and validated, and that the CSS rules you are specifying are placed within the <head> tag of it.

    Good luck.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    It's tough to diagnose the issue without seeing the HTML as well. My advice would be to install the Web Developer Toolbar in Firefox and see what it says when you view the page.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Jan 2012
    Posts
    74
    Hi,
    Thanks for your response.
    I will include my html file. It's pretty short and simple so I really don't see what's wrong.. Even if I remove the "include leftmenu.php", it does the same. (Also, I tried on Firefox on another computer and it does exactly the same)

    Regards,

    Code:
    
    <html>
    <head>
    <link rel='stylesheet' type='type/css' href='styleNavigation.css'>
    </head>
    
    <body>
    
    <div id="wrap">
    	<div id="header">
    	<center>this is the header</center>
    	
    	</div>
    	<div id="nav">
    	<p>
    	<center>Navigation Navigation Navigation <center>
    
    	</div>
    	<div id="main">
    	<p>
    	<center><font style="font-size: 12; ">  
    	
    	dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
    
    	</font></center>
    		
    	</div>
    	<div id="sidebar">
    		<?php include ('include/leftmenu.php');?>
    
    	</div>
    	<div id="footer">
    	<center>this is the footer</center>
    	
    	</div>
    </div>
    
    
    </body>
    </html>
    Last edited by alex12345; 01-24-2012 at 04:13 AM.

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Ah, I see your immediate problem with the stylesheet, you have the incorrect type, it should be:

    Code:
    <link rel="stylesheet" type="text/css" href="styleNavigation.css">
    Some styles were also reported faulty because the scale was not seated next to the numbers:

    Code:
    body, html {
    margin: 0;
    padding: 0;
    color: black;
    background: white;
    }
    
    #wrap {
    width:1000px;
    margin:0 auto;
    background:#99c;
    }
    
    #header {
    background:#ddd;
    }
    #nav {
    background:#c99;
    
    }
    #main {
    background:#9c9;
    float: right;
    width: 770px;
    height: 800px
    
    }
    #sidebar {
    background:#000;
    float: left;
    width: 230px;
    height: 800px
    }
    #footer {
    background: #cc9;
    clear: both;
    }
    I would recommend the use of a DOCTYPE in your document.
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Jan 2012
    Posts
    74
    Hi Bionoid,

    Thanks a lot for your response, it worked!

    It's surprising to see that Firefox is so sensitive to syntax, more than Safari or Chrome...

    You said "Some styles were also reported faulty": do you have program to detect style errors, or is it just the program you use to write all your codes? (I use Smultron for Mac)

    For the DOCTYPE, I only very conventional functions and don't get very complex in my programming
    I'm looking at what is not allowed on Stric Doctype and I see stuff such as "background","height" (but i use it for css) and I use those.
    Do you advise HTML 4 strict or transitional? XHTML?

    Thanks a lot,

    Alex
    Last edited by alex12345; 01-24-2012 at 04:30 AM.

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Even IE9 had a problem processing the styles until the type was fixed.

    I use phpDesigner as my editor, styles normally go red when it feels they are incorrect. Firefox also pointed them out in the console.

    I normally use the XHTML 1.0 transitional DOCTYPE:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    bionoid
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Jan 2012
    Posts
    74
    Alright, I will look into the XHTML DOCTYPE's as well.

    Thanks again for your help,

    Regards,

    Alex

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles