External stylesheet issues... (Different browsers)

Hello,

My external stylesheet works well for IE but not for Firefox or Chrome... I have no idea why.

It worked perfectly when I had the files locally, but when we then uploaded them to the server, things stopped working.

Not only does the stylesheet have issues but also there are issues with the PHP and database.

But here's my stylesheet for Firefox:

body
{
background-color:#FFFFFF;
}

.input {
text-align:left;
margin-left:auto;
margin-right:auto;
}

.head {
text-align:left;
color:#FFFFFF;
font-family:Arial;
font-size:40px;
border:1px solid;
border-radius:40px;
background:#19199A;
padding: 10px 30px;
}

#subhead {
opacity:0.6;
}

#subhead a {
color:#FFFFFF;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

#subhead a:hover {
border:1px solid;
border-radius:10px;
padding: 7px 12px;
background:#FFFFFF;
color:#19199A;
}

#subhead2 {
display:inline;

border:1px solid;
border-radius:10px;

padding: 7px 12px;

background:#FFFFFF;
color:#19199A;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

.location{text-align:center;color:#19199B;font-family:Arial;}

hr {color:#19199B;}

div.content {
text-align:center;
margin-left:250px;
margin-right:200px;
margin-top:-150px;
color:#19199B;
font-family:Arial;
font-size:14px;
}

#loginfield {
margin-left:300px;
}

#loginTable {
border:0;
text-align:left;
margin-left:300px;
}

#successText {
margin-left:20px;
margin-right:250px;
text-align:center;
vertical-align:middle;
margin-top:
}


#navbar ul {
margin-top:-8px;
margin-bottom:-8px;
padding: 10px;
list-style-type: none;
text-align: center;
background-color: #19199B;
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #19199B;
}

#navbar ul li a:hover {
color: #000;
background-color: #fff;
}


body {

}
ul.sidemenu {
padding: 1;
margin-top:80px;
list-style: none;
font-family: Arial;
font-size: 0.8em;
border-bottom: 1px solid #000000;
width: 187px;
background-color: #19199B;
}
ul.sidemenu li {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
ul.sidemenu li a {
text-decoration: none;
display: block;
width: 165px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 10px;
}
ul.sidemenu li a:hover {
background-color: #FFFFFF;
color: #19199B;
}

#csrsidemenu {
position:absolute;
margin-top:-3050px;
margin-left:0px;
text-align:left;
}

#csrsidemenu2 {
position:absolute;
margin-top:-2750px;
margin-left:;
text-align:left;
}

#sidemenu2 {
position:absolute;
}

#csrform {

background-color:lightyellow;
margin-left:400px;
margin-top:-440px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;"
text-align:left;
position:absolute;
}

#csrform_table {
background-color:lightyellow;
margin-left:400px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
margin-top:-300px;
}

#form_content {
margin-left:15px;
}

#topform {
text-align:left;
margin-left:250px;
}

#midform {
margin-right:170px;
}

#bottomform {
text-align:left;
margin-left:250px;
}


p.userinfo {
margin-left:12px;
margin-bottom:-60px;
}

#send_csr {
position:absolute;
margin-top:-40px;
margin-left:0px;
text-align:left;
}

#send_csr2 {
margin-top:-2770;
}

#progress {
margin-bottom:1500px;
}

#csr_table{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top:-300px;
border-collapse:collapse;
}

#csr_table, td {
padding:8px;
}

#edit_csrformtable {
text-align:left;
background-color:lightyellow;
margin-left:400px;
margin-top:-420px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
position:absolute;
}

#edit_info {
font-family:"Trebuchet MS";
color:#66A4A4;
size:2;

text-align:left;
vertical-align:middle;

margin-top:100px;
margin-left:420px;
}

#edit_info_top {
margin-top:-30px;
}


#edit_link, a:hover {
color:red;
}

#edit_csr2 {
margin-top:-2920px;
}

#edit_csr22 {
margin-top:80px;
}


#edit_csr_form {
margin-top:-2830px;
}

#view_history {
margin-top:-2875px;
}

#view_history2 {
margin-top:80px;
}

#info_table {
text-align:left;
width:1000px;
margin-top:-300px;
margin-left:400px;
position:absolute;
}

#settnings {
vertical-align:middle;
text-align:left;

margin-left:-300px;
margin-top:0px;
}

#csr_subinfo {
margin-left:50px;
}

#send_csr_admin {
position:absolute;
margin-top:-40px;
margin-left:0px;
text-align:left;
}

#textarea {
background-image:url(infobox2.jpg);
background-position:bottom left;
background-repeat:no-repeat;

padding:5px;

outline:none;
resize:none;

font-family:Arial;
font-style:italic;
font-style:bold;

border:1px solid grey;
border-right-color:white;

vertical-align:bottom;
position:fixed;
width:390px;
height:150px;

text-align:left;

margin-top:280px;
margin-left:-182px;
}

.notepad {
float:left;
margin-left:10px;
margin-top:30px;
}


.notepad textarea {
background-image:url(notepad2.jpg);
background-repeat:no-repeat;

border-radius:16px;
padding:5px 10px;
margin-left:-5px;

width:180px;
height:200px;
vertical-align:middle;

resize:none;
outline:none;
}

.notepad img {
width:190px;
height:40px;
vertical-align:top;
}

.notepad input {
vertical-align:bottom;
text-align:left;
float:left;
}



#user_notice {
margin-top:-280px;
background-color:lightyellow;
border-collapse:collapse;
position:absolute;
margin-left:600px;
}

Here's my IE stylesheet:

.head {
text-align:left;
color:#FFFFFF;
font-family:Arial;
font-size:40px;
border:1px solid;
border-radius:40px;
background:#19199A;
padding: 10px 30px;
}

#subhead {
opacity:0.6;
}

#subhead a {
color:#FFFFFF;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

#subhead a:hover {
border:1px solid;
border-radius:10px;
padding: 7px 12px;
background:#FFFFFF;
color:#19199A;
}

#subhead2 {
display:inline;

border:1px solid;
border-radius:10px;

padding: 7px 12px;

background:#FFFFFF;
color:#19199A;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

hr {
display:none;
}

#navbar ul {
margin-top:4px;
margin-bottom:-8px;
margin-left:-12px;
padding: 10px;
list-style-type: none;
text-align:center;
background-color: #19199B;
position:relative;
width:100%;
}

#navbar ul li {
display: inline;
float:left;
margin-left:550px;
margin-right:-540px;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #19199B;
}

#navbar ul li a:hover {
color: #000;
background-color: #fff;
}

ul.sidemenu {
padding: 2px;
margin-top:40px;
margin-left:-5px;
list-style: none;
font-family: Arial;
font-size: 0.8em;
border-bottom: 1px solid #000000;
width: 187px;
background-color: #19199B;
}
ul.sidemenu li {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
ul.sidemenu li a {
text-decoration: none;
display: block;
width: 165px;
color: #FFFFFF;
font-weight: bold;
padding: 1px 10px;
}
ul.sidemenu li a:hover {
background-color: #FFFFFF;
color: #19199B;
width:100%;
}

#loginfield {
margin-top:-100px;
text-align:center;
}

#successText {
margin-left:150px;
margin-right:250px;
text-align:center;
vertical-align:middle;
margin-top:
}

#user_notice {
margin-top:-200px;
background-color:lightyellow;
border-collapse:collapse;
position:absolute;
margin-left:-200px;
}

#hr {
color:#787878;
text-align:left;
margin-left:-11px;
width:100%;
}

#loginTable {
border:0;
text-align:left;
margin-left:150px;
margin-top:-100px;
}

#csrform {

background-color:lightyellow;
margin-left:390px;
margin-top:-440px;
width:850px;

border-top-color:#66A4A4;
border-left-color:#none;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;"
border-collapse:collapse;
text-align:left;
position:absolute;
}

#form_content {
margin-left:50px;
}

#textarea {
background-image:url(infobox2.jpg);
background-position:bottom left;
background-repeat:no-repeat;

padding:5px;

outline:none;
resize:none;

font-family:Arial;
font-style:italic;
font-style:bold;

border:1px solid grey;
border-right-color:white;

vertical-align:bottom;
position:fixed;
width:390px;
height:150px;
}

#csr_table{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top:-500px;
border-collapse:collapse;
}

#csr_table {
margin-top:-300px;
}

#csrform_table {
margin-left:100px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
margin-top:-300px;
}

#info_table {
margin-left:-300px;
}

#edit_link, a:hover {
color:red;
}

#edit_info {
font-family:"Trebuchet MS";
color:#66A4A4;
size:2;

text-align:left;
vertical-align:middle;

margin-top:100px;
margin-left:420px;
}

#edit_csrformtable {
text-align:center;
background-color:lightyellow;
margin-left:800px;
margin-top:-240px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
position:absolute;
}

#edit_csrform {
margin-left:300px;
}

.notepad {

display:none;
display:hidden;

float:left;
margin-left:10px;
margin-top:30px;
}

.notepad textarea {
background-image:url(notepad2.jpg);
background-repeat:no-repeat;

border-radius:16px;
padding:5px 10px;
margin-left:-5px;

width:180px;
height:200px;
vertical-align:middle;

resize:none;
outline:none;
}

.notepad img {
width:190px;
height:40px;
vertical-align:top;
}

.notepad input {
vertical-align:bottom;
text-align:left;
float:left;
}

What's the problem?

Also, this is what my PHP looks like:

I'm using something called Code Igniter, which helps me code!

if($this->agent->is_browser()) {

$browser = $this->agent->browser();
(string) $browser;

switch($browser) {
case 'Internet Explorer':
$this->session->set_userdata('link_stylesheet', base_url()."assets/IE_stylesheet.css");
$this->session->set_userdata('browser', $browser);
break;
case 'Chrome':
$this->session->set_userdata('link_stylesheet', base_url()."assets/stylesheet.css");
$this->session->set_userdata('browser', $browser);
break;
case 'Firefox':
$this->session->set_userdata('link_stylesheet', base_url()."assets/firefox_stylesheet.css");
$this->session->set_userdata('browser', $browser);
break;
default:
$this->session->set_userdata('link_stylesheet', base_url()."assets/stylesheet.css");
$this->session->set_userdata('browser', 'Unknown');
}
}

else {
$this->session->set_userdata('link_stylesheet', base_url()."assets/stylesheet.css");
$this->session->set_userdata('browser', 'Unknown');
}

What's the problem?Have you checked all of the obvious problems?


Do the style sheets exist with correct names in the correct directory relative to both the PHP and PHP output code?
Is the PHP code executing? (Check the PHP output code.)
Is your user agent pretending to be another user agent via its user agent string? (Visit http://whatsmyuseragent.com/ in the problematic browsers to see what the UA string being shown to the server is.)
Are there "issues with the PHP and database" that you need to fix first?

Thanks for your reply Arbitrator!

I've checked everything up and it all seems to be alright and correct! That's why I'm so very confused, it seems like there are no wrongs/mistakes/faults.
It should be running without any issues, no? I don't know why it's messing up...

Help? :(

Hello yazan,
There is a couple errors in the CSS itself. You should try validating it. See the links about validation in my signature line below.

Hey Excavator! Thank you for your reply!

I tried to validate my .css but it still doesn't work on Firefox. It works perfectly on all other browsers I use (Explorer, Chrome and even Opera).

I'm extremely confused...

Can we see a link to the site?

You will not be able to access it since it's on an internal server... But I can send you a picture of how it looks if you'd like to see that?

You will not be able to access it since it's on an internal server... But I can send you a picture of how it looks if you'd like to see that?

That might help explain the issue at least. You should also post the updated code now that you've validated it.

Do you mean that I should make the site public and not just local?

I took a snapshot of the site opened up on Firefox: http://img265.imageshack.us/img265/9693/31414177.jpg

The verified and updated CSS:

body
{
background-color:#FFFFFF;
}

.input {
text-align:left;
margin-left:auto;
margin-right:auto;
}

.head {
text-align:left;
color:#FFFFFF;
font-family:Arial;
font-size:40px;
border:1px solid;
border-radius:40px;
background:#19199A;
padding: 10px 30px;
}

#subhead {
opacity:0.6;
}

#subhead a {
color:#FFFFFF;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

#subhead a:hover {
border:1px solid;
border-radius:10px;
padding: 7px 12px;
background:#FFFFFF;
color:#19199A;
}

#subhead2 {
display:inline;

border:1px solid;
border-radius:10px;

padding: 7px 12px;

background:#FFFFFF;
color:#19199A;

font-family:Arial;
font-weight:bold;

text-decoration: none;
}

.location{text-align:center;color:#19199B;font-family:Arial;}

hr {color:#19199B;}

div.content {
text-align:center;
margin-left:250px;
margin-right:200px;
margin-top:-150px;
color:#19199B;
font-family:Arial;
font-size:14px;
}

#loginfield {
margin-left:300px;
}

#loginTable {
border:0;
text-align:left;
margin-left:300px;
}

#successText {
margin-left:20px;
margin-right:250px;
text-align:center;
vertical-align:middle;
}


#navbar ul {
margin-top:-8px;
margin-bottom:-8px;
padding: 10px;
list-style-type: none;
text-align: center;
background-color: #19199B;
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #19199B;
}

#navbar ul li a:hover {
color: #000;
background-color: #fff;
}


body {

}
ul.sidemenu {
padding: 1px;
margin-top:80px;
list-style: none;
font-family: Arial;
font-size: 0.8em;
border-bottom: 1px solid #000000;
width: 187px;
background-color: #19199B;
}
ul.sidemenu li {
border-top: 1px solid #FFFFFF;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
ul.sidemenu li a {
text-decoration: none;
display: block;
width: 165px;
color: #FFFFFF;
font-weight: bold;
padding: 2px 10px;
}
ul.sidemenu li a:hover {
background-color: #FFFFFF;
color: #19199B;
}

#csrsidemenu {
position:absolute;
margin-top:-3050px;
margin-left:0px;
text-align:left;
}

#csrsidemenu2 {
position:absolute;
margin-top:-2750px;
/* There was a "margin-left:;" here */
text-align:left;
}

#sidemenu2 {
position:absolute;
}

#csrform {

background-color:lightyellow;
margin-left:400px;
margin-top:-440px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;"
/*There was a "text-align:left;" here */
/* There was a "position:absolute;" here */
}

#csrform_table {
background-color:lightyellow;
margin-left:400px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
margin-top:-300px;
}

#form_content {
margin-left:15px;
}

#topform {
text-align:left;
margin-left:250px;
}

#midform {
margin-right:170px;
}

#bottomform {
text-align:left;
margin-left:250px;
}


p.userinfo {
margin-left:12px;
margin-bottom:-60px;
}

#send_csr {
position:absolute;
margin-top:-40px;
margin-left:0px;
text-align:left;
}

#send_csr2 {
margin-top:-2770px;
}

#progress {
margin-bottom:1500px;
}

#csr_table{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top:-300px;
border-collapse:collapse;
}

#csr_table, td {
padding:8px;
}

#edit_csrformtable {
text-align:left;
background-color:lightyellow;
margin-left:400px;
margin-top:-420px;
border-top-color:#66A4A4;
border-left-color:white;
border-right-color:#66A4A4;
border-bottom-color:#66A4A4;
position:absolute;
}

#edit_info {
font-family:"Trebuchet MS";
color:#66A4A4;
/* There was a "size:2px;" */

text-align:left;
vertical-align:middle;

margin-top:100px;
margin-left:420px;
}

#edit_info_top {
margin-top:-30px;
}


#edit_link, a:hover {
color:red;
}

#edit_csr2 {
margin-top:-2920px;
}

#edit_csr22 {
margin-top:80px;
}


#edit_csr_form {
margin-top:-2830px;
}

#view_history {
margin-top:-2875px;
}

#view_history2 {
margin-top:80px;
}

#info_table {
text-align:left;
width:1000px;
margin-top:-300px;
margin-left:400px;
position:absolute;
}

#settnings {
vertical-align:middle;
text-align:left;

margin-left:-300px;
margin-top:0px;
}

#csr_subinfo {
margin-left:50px;
}

#send_csr_admin {
position:absolute;
margin-top:-40px;
margin-left:0px;
text-align:left;
}

#textarea {
background-image:url(infobox2.jpg);
background-position:bottom left;
background-repeat:no-repeat;

padding:5px;

outline:none;
resize:none;

font-family:Arial;
font-style:italic;
/* There was a "font-style:bold;" here */

border:1px solid grey;
border-right-color:white;

vertical-align:bottom;
position:fixed;
width:390px;
height:150px;

text-align:left;

margin-top:280px;
margin-left:-182px;
}

.notepad {
float:left;
margin-left:10px;
margin-top:30px;
}


.notepad textarea {
background-image:url(notepad2.jpg);
background-repeat:no-repeat;

border-radius:16px;
padding:5px 10px;
margin-left:-5px;

width:180px;
height:200px;
vertical-align:middle;

resize:none;
outline:none;
}

.notepad img {
width:190px;
height:40px;
vertical-align:top;
}

.notepad input {
vertical-align:bottom;
text-align:left;
float:left;
}



#user_notice {
margin-top:-280px;
background-color:lightyellow;
border-collapse:collapse;
position:absolute;
margin-left:600px;
}

Thanks for the help!

It looks more like a path error? Double check that CSS file is named, spelled and in the directory called out by your php.

Sorry I'm not more help...

Do you mean that I should make the site public and not just local?That would be a good idea. Since your issue is directly related to live code, having a live version looks necessary to solve the problem given that none of the speculation has turned out to be correct.

The only other problem that I can think of is a caching issue. You can do a hard refresh (which reloads everything without using the cache) by pressing Ctrl+F5 in Firefox. I've had occasions where Firefox mysteriously wouldn't load a style sheet, and this fixed the issue, however, it's been years since I've experienced said problem.

Thank you Excavator, you've been to much help anyway and I appreciate that! It doesn't seem to be a path error...

Perhaps I should do as you suggest Arbitrator, and make it public rather than internally.
I'll try that.

I tried Ctrl + F5 and it refreshed, but it didn't bring the stylesheet to life :(

Thanks for all your help though, much appreciated!

Cheers!