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

**alex12345** · 01-23-2012 09:20 PM

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;
}

**bionoid** · 01-24-2012 12:25 AM

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.

**rtrethewey** · 01-24-2012 12:25 AM

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.

**alex12345** · 01-24-2012 03:58 AM

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>

**bionoid** · 01-24-2012 04:10 AM

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.

**alex12345** · 01-24-2012 04:27 AM

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

**bionoid** · 01-24-2012 04:33 AM

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

**alex12345** · 01-24-2012 04:41 AM

Alright, I will look into the XHTML DOCTYPE's as well.

Thanks again for your help,

Regards,

Alex

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions