We help IT Professionals succeed at work.

Stylesheet not loading in Firefox

jrsnmedia
jrsnmedia asked
on
hello -

my page is displaying correctly in Chrome, but when I view in firefox, it seems as though no styesheet is attached. I'm not sure what I may have overlooked.

live page example http://bit.ly/v58qJ3
Comment
Watch Question

Fixer of Problems
Most Valuable Expert 2014
Commented:
IE8 and Opera don't like it either.  In Firefox 8, the Error Console (Ctl-Shift-J) shows an internal Firefox error.  Firefox and Opera don't like some of your CSS declarations either.
LZ1
Top Expert 2011
Commented:
Your CSS files have the wrong type.  You need to have text/css specified.

Try this:
<link rel="stylesheet" href="http://www.thekingny.com/css/html5.css" type="text/css" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/rtext.css" type="text/css" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/mainstyle.css" type="text/css" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/ipad.css" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

Open in new window

Commented:

In these code:

<link rel="stylesheet" href="http://www.thekingny.com/css/html5.css" type="text" media="all">
<link rel="stylesheet" href="http://www.thekingny.com/css/rtext.css" type="text" media="all">
<link rel="stylesheet" href="http://www.thekingny.com/css/mainstyle.css" type="text" media="all">
<link rel="stylesheet" href="http://www.thekingny.com/css/ipad.css" type="text" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

You have to change type="text" into type="text/css"

regards

Nrisimha

Author

Commented:
Hello All -

That did the trick, thank you, but they don't look the same. FF is pulling in some different colors for the header and footer, do I need to add "text/css" in another spot?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Your 'typekit.com' link is getting a 403 error in all browsers.  And now in Chrome, there is a black space at the bottom of the pic.

Author

Commented:
hello dave, I think I fixed the type thing, I am using google webfont.
I used the Error Console (Ctl-Shift-J) and see that it drops the html5 styles, I'm using this set up as a suggestion from a friend. Should I try and remove that? I'm new to CSS so I apologize if these type of questions seem stupid
Commented:
The background of div in which image is position is displayed. The div is larger than the image in it.
Image is 1263 px 841 px on my monitor which is 15"
and div id home is 100% width and 100% height
it is descibed in mainstyle.css
285 line


#home {
width: 100%;
height: 100%;
min-width: 841px;
background: #111; //this is the color that is seen under the image
overflow: hidden;
position: absolute;
top: 0;
left: 0;
text-align: center;
}

Author

Commented:
Thank you all, everything seems to be in order based on these suggestions.