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

Micky-D · #1 Oct 12th, 2006, 19:21

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 · #2 Oct 12th, 2006, 19:29

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

Micky-D · #3 Oct 12th, 2006, 19:40

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 · #4 Oct 14th, 2006, 19:57

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 · #5 Oct 14th, 2006, 19:58

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
color: inherit; issue with IE 7	Voodoochilli	Web Page Design	3	Oct 15th, 2007 13:00
HELP!!! Cross browser issue...	hak	Web Page Design	7	Dec 4th, 2006 11:40
Help! Cross Browser Issue	centenial	Web Page Design	1	Aug 8th, 2006 18:56
td and border issue	ltl_dragon	Web Page Design	3	May 13th, 2006 14:50
css validating - color issue	ivyholly	Web Page Design	13	Dec 6th, 2005 16:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS noob - Help with border color browser issue please!!!