Question:

Why isn't my CSS working with Firefox?

by | earlier

I have an external style sheet containing this code:

<style type="text/css">



</style>

I am linking it within the head of the html doc like this:

<link rel="stylesheet" type="text/css" href="TKF.css">

Only bits of it actually work with Firefox (everything works with IE). The background images will only show up if the background css is put dirrectly into the head of the html doc. The links show up in bold, but not in the correct font, and the padding and margins work in some places but not others. I'm using <div class="etc"> to denote the various blocks, divisions, w/e. What part of this is not compatible with Firefox?? Many thanks in advance!!

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

3 ANSWERS

Sort By: Date | Rating

It's not that your CSS is incompatible with Firefox -

it's that is wrong. Firefox recognizes the errors and

does what it's supposed to do, i.e., ignores the bad

declarations.

/* lose the <style> tags and the HTML type comments -

they're invalid in external style-sheets */

body {

background-image: url('TKFbg2.jpg');

background-repeat: no-repeat;

background-attachment: scroll;

background-color: #003300;

/* don't declare units, if length is 0 */

margin-top: 0;

/* declare a measurement or delete it */

margin-left: 0;

}

table {

padding-bottom: 0;

}

/* div.links declares a class of divs, implying

there could be more than one such div - if there's

only one, us id instead as div#links and change

your HTML to <div id="links">

either approach will work, but the id approach is

better, if there's only one such div, since it

better reflects you intent */

div.links {

background-image: url('links.jpg');

background-repeat: no-repeat;

/* enquote font-family names that contain spaces -

there should be a default font (last one in your list

that is guaranteed to be on every user's box, or you'll

get the browser's default, if none of your declared

fonts is available - lose the @ sign */

font-family: "Blackadder ITC", Batang, Fantasy;

font-size: 18pt;

color: #FFFFFF;

width: 140px;

margin-top: 0.5in;

padding-top: 0.1in;

padding-bottom: 0.1in;

text-align: center;

}

div.linksmall {

font-size: 16pt;

}

/* put base attributes on a element - let :hover,

etc. pseudoclasses inherit...fewer declarations */

a {

text-decoration: none;

/* enquote font-family names that contain spaces -

lose the @ sign */

font-family: "Blackadder ITC", Batang, Fantasy;

}

a:link {

color: #FFFFFF;

}

a:hover {

color: #C0C0C0;

font-weight: bold;

}

a:visited {

color: #C0C0C0;

}

/* div.home declares a class of divs, implying

there could be more than one such div - if there's

only one, us id instead as div#home and change

your HTML to <div id="home">

either approach will work, but the id approach is

better, if there's only one such div, since it

better reflects you intent */

div.home {

margin-top: 0.5in;

padding-top: 0.1in;

padding-bottom: 0.1in;

padding-left: 0.5in;

width: 640px;

color: #FFFFFF;

}

/* div.content declares a class of divs, implying

there could be more than one such div - if there's

only one, us id instead as div#content and change

your HTML to <div id="content">

either approach will work, but the id approach is

better, if there's only one such div, since it

better reflects you intent */

div.content {

background-image: url('knotbg.jpg');

background-repeat: no-repeat;

margin-top: 0.5in;

margin-left: 0.4in;

/* when declaring all four padding attributes, collapse

to shorthand form - order is top, right, bottom, left;

since you're repeating, it could further shortened to

padding: 0.1in 0.6in */

padding: 0.1in 0.6in 0.1in 0.6in;

width: 640px;

color: #FFFFFF;

}

h3 {

/* enquote font-family names that contain spaces -

lose the @ sign */

font-family: "Blackadder ITC", Batang, Fantasy;

color: #FFFFFF;

font-size: 30pt;

}
Report (0) (0) | earlier
when referring to a "div" in your html page, in an external/internal style sheet, you never use "div.something".  Instead, you would type "#something".  so to give you an example from your own CSS page:

#content

{

background-image: url('knotbg.jpg');

background-repeat: no-repeat;

margin-top: 0.5in;

margin-left: 0.4in;

padding-top: 0.1in;

padding-bottom: 0.1in;

padding-left: 0.6in;

padding-right: 0.6in;

width: 640px;

color: #FFFFFF;

}

The reason all your code works with internet explorer, but not firefox, is actually one of the reasons why people choose firefox over internet explorer for testing web pages.  If a web page displays correctly in IE, but not in Firefox, that means that there are errors in the code.  The reason that IE displays erroneous code correctly is because it has a built-in tool that auto-corrects some minor errors.  Always use, and never doubt Firefox.

Oh.  And div.something works in IE because IE still accepts HTML 1.0, which is ANCIENT.

Hope this helped.
Report (0) (0) |   earlier
Your problem is your comment tags.    You shouldn't use those in stylesheets ever! but IE lets you get away with it, Firefox doesn't.

The correct way of putting comments in stylesheets is this:

/* This is a comment.  */

I'm also not sure if you need to put the <style> tags in either or the comment tags anyway.  I think that's only necessary if you are putting the style information in your webpage, instead of a stylesheet.  I'll give you the link to stylesheets at W3C schools and you can check anything else you need to.  W3C are THE web standards people so what they say goes.  :-)

http://w3schools.com/css/default.asp

All the best!
Report (0) (0) |   earlier

Get alert when someone else answer this question

Question Stats

Latest activity: earlier.
This question has 3 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.

Recently Answered Questions

Any teenagers that have to wear diapers?
Answers: 76
Which number will come in mumbai matka?
Answers: 52
Where in ireland can i get a loan if im unemployed??
Answers: 99
Babysitting my little cousins...?
Answers: 2
Did You Wear Diapers For Bed Wetting When You Were A Kid?
Answers: 18

View All

Why isn't my CSS working with Firefox?

3 ANSWERS

Question Stats

BECOME A GUIDE

Questions & Answers

Users

Categories