CSS in Mozilla vs. IE6

11 Oct 2006, 12:10 PM

#1

New Zenner

Join Date:: Oct 2006
Posts:: 10
Plugin Contributions:: 0

CSS in Mozilla vs. IE6

The cascading style sheet is loading fine in Mozilla Firefox but only loading colors in IE6. The font size and font style are not loading at all in IE6. The table is also not centered in IE6 but displays fine in Mozilla Firefox. Below is the url of the site.

www.lowcountrycandles.com/cart

11 Oct 2006, 12:30 PM

#2

clydejones

Deceased

Join Date:: Nov 2005
Location:: Colorado Springs, CO USA
Posts:: 7,017
Plugin Contributions:: 12

Re: CSS in Mozilla vs. IE6

In checking the source for your page I ran across this error:

You have two (2) body tags listed:

<body bgcolor="D3B495"> /* delete this one */

You're also using three (3)!!! stylesheets!!!!!!!:
stylesheet.css
stylesheet_new.css
stylesheet_original.css

The way CSS works is that any duplicate declarations that appear in the stylesheets Precedence is given to to the declaration that is below the original.
Because of this you need to make sure that duplicate declarations match or delete the duplicate altogether.

In stylesheet.css you have this declaration

#mainWrapper {
	background-color: #000000;
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

In stylesheet_new.css you have this declaration (which takes precedence over the same declaration above)

#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 750px;
	vertical-align: top;
	}

You'll avoid a lot of problems by working with only one stylesheet.

Eliminate stylesheet_new and stylesheet_original.

11 Oct 2006, 6:05 PM

#3

mist57

New Zenner

Join Date:: Oct 2006
Posts:: 10
Plugin Contributions:: 0

Re: CSS in Mozilla vs. IE6

I found the body tag. thanks. The CSS files were loaded by default. I am trying to transfer the changes all to one file. I have narrowed the problem with IE6 down to font size.

In one of the CSS files the "body" class lists the font size in this format:

/font-size: 62.5%;/

What exactly does that do? Thanks again for your help!

11 Oct 2006, 6:18 PM

#4

clydejones

Deceased

Join Date:: Nov 2005
Location:: Colorado Springs, CO USA
Posts:: 7,017
Plugin Contributions:: 12

Re: CSS in Mozilla vs. IE6

This sets the default font size to 10px and allows the use of em(s) to increase/decrease the font size as required.

for example if you wanted to set the text in the center column to 12px you would use:

font-size: 1.2em;

this article has a good explanation http://www.clagnut.com/blog/348/

I would just delete the stylesheet_new and stylesheet_original and use only stylesheet.css (this stylesheet contains everything you need to get started.)

11 Oct 2006, 7:23 PM

#5

mist57

New Zenner

Join Date:: Oct 2006
Posts:: 10
Plugin Contributions:: 0

Re: CSS in Mozilla vs. IE6

Thank you for the link. I am know successfully editing the css file with no problems. Thanks again!

11 Oct 2006, 8:16 PM

#6

clydejones

Deceased

Join Date:: Nov 2005
Location:: Colorado Springs, CO USA
Posts:: 7,017
Plugin Contributions:: 12

Re: CSS in Mozilla vs. IE6

Just let me know if you need additional help.