CSS noob - Help with border color browser issue please!!!

[Micky-D]

Im having a little trouble getting this to work, its my first attempt at using one set of css instructions to control multiple tables rather than use dreamweaver to assign properties to 1 table at a time.

Code: Select all

table.ess {
    border-width: 0px 0px 0px 0px;
    border-spacing: 0px;
    border-style: solid solid solid solid;
    border-color: #000066 #000066 #000066 #000066;
    border-collapse: collapse;
    background-color: ;
}
table.ess th {
    border-width: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    border-style:  solid solid solid;
    border-color: #000066 #000066 #000066 #00006;
    background-color: #000066;
    -moz-border-radius: 0px 0px 0px 0px;
}
table.ess td {
    border-width: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    border-style: solid solid solid;
    border-color: #000066 #000066 #000066 #00006;
    background-color: #c1e7ff;
    -moz-border-radius: 0px 0px 0px 0px;
}

My problem is that in Firefox all my table borders (TH and TD) appear as grey but in IE they appear as the colour intended. I know browsers vary but is there a way to get my desired color in FF?

I read in here that becasue browsers display things differently I might need to make one css file for FF and one for IE and use this

Code: Select all

<!--[if lte IE 6]>    <link rel="StyleSheet" type="text/css" href="ieonly.css" /> <![endif]-->

to call the css file depending upon the browser viewing the page. Is this the case?

Thanks peeps!!!!!!!





EDIT//// SOLVED IT...

I removed all entries of more than one instance.. for example,

Code: Select all

border-width: 2px 2px 2px 2px;

changed to

Code: Select all

border-width: 2px;

I did that for all repeated instructions and its fine now....

[moojoo]

Are you applying the class name to the tables? <table class="ess">? Hard to pin point really without seeing your html

[Micky-D]

Thanks moojoo...

you must have been replying as I was editing my 1st post lol... it was multiple instances of the same command casuing the issue ie border: 2px 2px 2px 2px;

removed 3 of them and its great... just got padding probs now lol

changed from working from padding in px to padding in cm seems easier.

Firefox seems add more padding than ie though... :S :S :S

[Ryan Fait]

What?! That shouldn't be the problem. Border-width: 2px 2px 2px 2px; is the exact same thing as border: 2px;! Leave it to IE. I hate the padding issue. I don't know if where you're using padding, but if you use a <div> inside another <div>, you can simulate padding. It doesn't look so great in your source, but it looks nice on the surface!

Ooooh, this is my 666th post. Creepy. Should've saved it for Halloween.

[Ryan Fait]

Ah crap, I just realized Friday the 13th was yesterday. I was a day too late.