Jump to content

CSS not working in Firefox

kylecooper

By kylecooper
in CSS Help

 Share

Recommended Posts

kylecooper Newbie

kylecooper

Posted
Posted

Hello,

 

Please help me out, if you can. My CSS doesn't work in Firefox, only IE

 

???I don't know what I've done wrong...

 

Here's part of the code (CSS):

 

 

body {background-color: FFFFFF} /* Background settings */

p {color: 000000} /* Standard text colour is black */

p {text-indent: 0} /* Text indent */

p {font-family: arial} /* Text font type is Arial */

p {font-size: 12} /* Size of default font */

p {margin-top: 0; margin-bottom: 0} /* Distances between lines */

p {text-align: justify;} /* Text alignment is justify */

 

h1 {color: FFFFFF} /* Heading 1 colour is white */

h2 {color: FF0000} /* Heading 2 colour is red */

h3 {color: 0099FF} /* Heading 3 colour is blue */

h4 {color: 000000} /* Heading 4 colour is black */

h5 {color: 000000} /* Heading 5 colour is black */

h6 {color: 000000} /* Heading 6 colour is black */

 

h1 {font-family: arial} /* Heading font type is Arial */

h2 {font-family: arial} /* Heading font type is Arial */

h3 {font-family: arial} /* Heading font type is Arial */

h4 {font-family: arial} /* Heading font type is Arial */

h5 {font-family: arial} /* Heading font type is Arial */

h6 {font-family: arial} /* Heading font type is Arial */

 

h1 {font-size: 35} /* Heading 1 size is 28 in CSS, 21 pt in Frontpage */

h2 {font-size: 23} /* Heading 2 size is 23 in CSS, 18 pt in Frontpage */

h3 {font-size: 18} /* Heading 3 size is 18 in CSS, 14 pt in Frontpage */

h4 {font-size: 16} /* Heading 4 size is 16 in CSS, 12 pt in Frontpage */

h5 {font-size: 16} /* Heading 5 size is 16 in CSS, 12 pt in Frontpage */

h6 {font-size: 16} /* Heading 6 size is 16 in CSS, 12 pt in Frontpage */

 

h1 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h2 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h3 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h4 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h5 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h6 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

 

h1 {text-align: justify;} /* Heading alignment is justify */

h2 {text-align: justify;} /* Heading alignment is justify */

h3 {text-align: justify;} /* Heading alignment is justify */

h4 {text-align: justify;} /* Heading alignment is justify */

h5 {text-align: justify;} /* Heading alignment is justify */

h6 {text-align: justify;} /* Heading alignment is justify */

 

h1 {text-indent: 8} /* Heading indent */

h2 {text-indent: 18} /* Heading indent */

h3 {text-indent: 18} /* Heading indent */

h4 {text-indent: 18} /* Heading indent */

h5 {text-indent: 18} /* Heading indent */

h6 {text-indent: 18} /* Heading indent */

 

a:link {color: 0099FF; text-decoration: underline; } /* Link settings */

a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */

a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */

a:hover {color: FF0000; text-decoration: none; } /* Link hover settings */

 

table.main-table

{

    border:none;

    width: 984px   

    border-collapse: collapse;

    cellspacing: 0px;

    background color: FFFFFF;

    font-family: arial;

font-size: 12px;

color: 000000;

text-indent: 0px;

text-align: justify;

}

   

td.page-title-cell

{

    width: 984px;

    height: 42px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background: 3C97FF;

vertical-align: top;

font-family: arial;

font-size: 35px;

color: FFFFFF;

text-indent: 3px;

text-align: justify;

}

 

td.spacer-cell

{

    width: 984px;

    height: 5px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background: 2A72D9;

vertical-align: top;

font-family: arial;

font-size: 5px;

color: FFFFFF;

text-indent: 7px;

text-align: justify;

}

 

td.left-border

{

    width: 5px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background-image: url('left-grey-vertical-line.gif');

font-family: arial;

font-size: 5px

color: 000000;

}

 

td.right-border

{

    width: 5px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background-image: url('right-grey-vertical-line.gif');

font-size: 5px

color: 000000;

Link to comment
Share on other sites
GameYin Member

GameYin

Posted
Posted

Wow, you have a lot of work to be redone. First of all, you can change this

 

body {background-color: FFFFFF} /* Background settings */
p {color: 000000} /* Standard text colour is black */
p {text-indent: 0} /* Text indent */
p {font-family: arial} /* Text font type is Arial */
p {font-size: 12} /* Size of default font */
p {margin-top: 0; margin-bottom: 0} /* Distances between lines */
p {text-align: justify;} /* Text alignment is justify */

h1 {color: FFFFFF} /* Heading 1 colour is white */
h2 {color: FF0000} /* Heading 2 colour is red */
h3 {color: 0099FF} /* Heading 3 colour is blue */
h4 {color: 000000} /* Heading 4 colour is black */
h5 {color: 000000} /* Heading 5 colour is black */
h6 {color: 000000} /* Heading 6 colour is black */

h1 {font-family: arial} /* Heading font type is Arial */
h2 {font-family: arial} /* Heading font type is Arial */
h3 {font-family: arial} /* Heading font type is Arial */
h4 {font-family: arial} /* Heading font type is Arial */
h5 {font-family: arial} /* Heading font type is Arial */
h6 {font-family: arial} /* Heading font type is Arial */

h1 {font-size: 35} /* Heading 1 size is 28 in CSS, 21 pt in Frontpage */
h2 {font-size: 23} /* Heading 2 size is 23 in CSS, 18 pt in Frontpage */
h3 {font-size: 18} /* Heading 3 size is 18 in CSS, 14 pt in Frontpage */
h4 {font-size: 16} /* Heading 4 size is 16 in CSS, 12 pt in Frontpage */
h5 {font-size: 16} /* Heading 5 size is 16 in CSS, 12 pt in Frontpage */
h6 {font-size: 16} /* Heading 6 size is 16 in CSS, 12 pt in Frontpage */

h1 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */
h2 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */
h3 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */
h4 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */
h5 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */
h6 {margin-top: 0; margin-bottom: 0} /* Distances between headings and other lines */

h1 {text-align: justify;} /* Heading alignment is justify */
h2 {text-align: justify;} /* Heading alignment is justify */
h3 {text-align: justify;} /* Heading alignment is justify */
h4 {text-align: justify;} /* Heading alignment is justify */
h5 {text-align: justify;} /* Heading alignment is justify */
h6 {text-align: justify;} /* Heading alignment is justify */

h1 {text-indent: 8} /* Heading indent */
h2 {text-indent: 18} /* Heading indent */
h3 {text-indent: 18} /* Heading indent */
h4 {text-indent: 18} /* Heading indent */
h5 {text-indent: 18} /* Heading indent */
h6 {text-indent: 18} /* Heading indent */

 

To this.

 

<style type="text/css">
body {
background-color: #FFFFFF;
}
p {
color: #000000;
text-indent: 0px;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
margin-top: 0px;
margin-bottom: 0px;
text-align: justify;
}
h1 {
text-indent: 8;
text-align: justify;
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
font-family: arial, "lucida console", sans-serif;
color: #FFFFFF;
} 
h2 {
text-indent: 18;
text-align: justify;
font-size: 23px;
font-family: arial, "lucida console", sans-serif;
color: #FF0000;
}
h3{
text-indent: 18;
text-align: justify;
font-size: 18;
font-family: arial, "lucida console", sans-serif;
color: #0099FF;
}
h4, h5, h6 {
text-indent: 18;
text-align: justify;
font-size: 16px;
font-family: arial, "lucida console", sans-serif;
color: #000000;
}

a:link {color: 0099FF; text-decoration: underline; } /* Link settings */
a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */
a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */
a:hover {
color: FF0000;
text-decoration: none;
}
table.main-table { 
border:none; 
width: 984px;
border-collapse: collapse;
cellspacing: 0px;
background color: #FFFFFF;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
color: #000000;
text-indent: 0px;
text-align: justify;
}  
td.page-title-cell {
width: 984px;
height: 42px;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
background: #3C97FF;
vertical-align: top;
font-family: arial, "lucida console", sans-serif;
font-size: 35px;
color: FFFFFF;
text-indent: 3px;
text-align: justify;
}
td.spacer-cell {
width: 984px;
height: 5px;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
background: #2A72D9;
vertical-align: top;
font-family: arial, "lucida console", sans-serif;
font-size: 5px;
color: #FFFFFF;
text-indent: 7px;
text-align: justify;
}
td.left-border {
width: 5px;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
background-image: url('left-grey-vertical-line.gif');
font-family: arial, "lucida console", sans-serif;
font-size: 5px;
color: #000000;
}
td.right-border {
width: 5px;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
background-image: url('right-grey-vertical-line.gif');
font-size: 5px;
color: #000000;
}
</style>

Honestly, that was the worst case of CSS I've ever seen. No offense. Took me 15 minutes just to fix your code. Try this. Also, you must end all statements with ;.

For colors, you forgot #. I highly would suggest in the future to Validate your code. That probably could have saved you so much time.

 

http://validator.w3.org/

 

Link to comment
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

Also, this is in the wrong order (which is REQUIRED) :

 

a:link {color: 0099FF; text-decoration: underline; } /* Link settings */
a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */
a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */
a:hover {
color: FF0000;
text-decoration: none;
}

 

a:hover must ALWAYS follows a, a:link and a:visited. :active always follows a:hover.

 

The order is Link, Visited< hover, Active (L.V.H.A., aka "LoVeHatE"). Change your order to:

 

a:link {color: 0099FF; text-decoration: underline; } /* Link settings */
a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */
a:hover {color: FF0000;text-decoration: none;}
a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */

 

Now, that said ... please ... spring for a book or two on css and avoid a lot of headaches. I recommend starting with, Eric Meyer on CSS.

 

You need to learn the simplest basics first - your css showed absolutely no knowledge of the basic css elements and commands.

 

Start building up a good group of links related to css, starting with, but not limited to:

 

http://css.maxdesign.com.au/ (for beginners)

http://www.positioniseverything.net/ (for those who foolishly use IE)

http://www.htmldog.com/ (for beginners)

http://www.alistapart.com/topics/code/css/ (all levels)

 

CSS is powerful and takes time to master, but you have to start from the beginning.

 

 

 

 

 

Link to comment
Share on other sites
ToonMariner Advanced Member

ToonMariner

Posted
Posted

kyle...

 

download this nice little app to help you write yur css...

 

http://www.newsgator.com/download/products/ts3lite.exe

 

not putting it as a url just in case exe links are frowned upon - been here for years and still never really read the guidelines ;)

 

If you don't link following links to exe then simply google 'topstyle lite' the first link I think is the page for downloading the full version - don't download the trial version, scroll down a little more and you'll see a link for the lite version

Link to comment
Share on other sites
kylecooper Newbie

kylecooper

Posted
  • Author
Posted

 

  Hello there...

 

  Thanks a lot for helping me out.

  I will try the adjustments...  ;D

 

  The code you saw was my version of CSS. I tried to make it very simple, but I also made so many mistakes.

  I am not very experienced in CSS and am grateful to have friendly people help me out, like you guys  ;D

 

  Please check out my other post about the CSS sitewide box...

  So far nobody could tell me any advice on that one  :-\

  (I think you can see it in the list, it's one of the first topics...)

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.