Working in IE, but some elements not working in others

Some elements not working in firefox, Safari, opera

[onesnooze]

Hi all,

Thanks for viewing.

I have a CSS file which works in IE but the tables are not showing in Firefox etc.

I dont know what I have wrong. Any thoughts guys?

Cheers

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* name 2 CSS HTML Styles */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body, td, th, p {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}

a:link {
text-decoration: none;
color: #666666;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
background:default color;
}
a:active {
text-decoration: none;
background: #FFFFFF;
color: #666666;
}

hr{
color: #666666;
height: 1px;
width: 90%;
}

h1 {
color: #666666;
margin: 0px;
border-bottom: 1px solid #666666;
font-size: 14px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #666666;
}

/*Form Elements*/
form {
margin: 0px;
}

input, select, textarea {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #666666;
}

input {
background: #FFFFFF;
border: 1px solid #CCCCCC;
}

select, textarea {
background: #FFFFFF;
border: 1px solid #003366;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
}

table {
font-family: Verdana,Arial,Helvetica,sans-serif;

/*~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* name 2 CSS Classes */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*
NOTE: All styles below are specific to name 2.
You may use the CSS above, or remove it and attach
your own CSS file in addition to name.css
*/

.smallprint {
font: 11px;
}

.pagingLinks {
text-decoration: none;
text-align: center;
}

.errorMessage {
color: #993333;
font-weight: bold;
}
/*Form Styles*/
input.formCheckbox {
background: transparent;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

input.formButton {
background: #CDE719;
border-bottom: 1px solid #F5F5F5;
border-left: 1px solid #F5F5F5;
border-right: 1px solid #F5F5F5;
border-top: 1px solid #F5F5F5;
color: #FFFFFF;
font-weight: bold;
margin: 3px 3px 0px 3px;
}

/* Tables used to display tabular Data. */
/* Apply to <table> tags only.
Example: <table class="tabulardata">*/
table.tabularData, table.tabularData td, table.tabularData th {
border: 1px solid #FFFFFF;
border-collapse: collapse;
}
table.tabularData td, table.tabularData th{
padding: 3px;
}
table.tabularData th, table.tabularData th a:link, table.tabularData th a:visited, table.tabularData th a:hover, table.tabularData th a:active {
color: #999999;
background-color: #CDE719;
}
/* altrowEven & altrowOdd are used to style alternating table rows. */
.altrowEven {
background-color: #FAFAFA;
}

.altrowOdd{
background-color: #F5FAF5;
}

[SuzyUK]

Hi onesnooze and welcome to WebmasterWorld!

I think you should make sure that your CSS Validates [jigsaw.w3.org] first..

I can see one missing curly brace after the table rule, if that's not a typo then it which may be causing cascade problems.. there is another one though..

maybe also validate your HTML to make sure it's well formed too

[edited by: SuzyUK at 12:51 pm (utc) on June 9, 2009]

[fishfinger]

I find that Firefox, Safari and other browsers all render sites one way, and IE another. So although the majority of users have IE and you have to cater for that, I get stuff working in Firefox and then search for a fix for IE if there is a problem.

If you're using tables and have empty cells then I know that cells without content (i.e. an empty cell without a non-breaking space) render different in some versions of IE compared to other browsers.

[onesnooze]

SuzyUK

I love you.

After spenfing hours, it was all down to a curly brace.