[RESOLVED] Browser compatibility issues

[JvJefke]

Hello,
I'm currently building a website for my thesis. It's a (fictional) website for monitoring transport between 2 companies. The problem is that i have some problems in terms of browser compatibility. The site only loads properly in Google Chrome. Since i only tested my website regulary in Google Chrome and only sometimes in other browsers, i don't know what te problem is (I know, in the future i'll test it in all webrowsers regulary). My website uses html, css, javascript, jQuery, PHP an mysql. So the problem (or problems) can be in any of these languages.
My question is: is there a effective method for finding this problem?
The website under developement is currently online at http://rd.gip2012.be so you can see what the problem is.

[manjuhugar24]

i think the problem lies in your css..have you used white-space:nowrap ??? if not then make a try..

[JvJefke]

No, i haven't used white-space:nowrap but i'll look further into the .css file.
Thanks for the reply.

[JvJefke]

I checked the .css file. I commented everything unnecessary out but it still doesn't fix the layout. My guess is its not in the .css file after all. but to be sure, i'll post the code here. Maybe i overlooked something.
I would appreciate it if you could take the time to read it.
thanks.

body{ 
    margin: 0; 
    padding: 0; 
    text-align: center;
    background-image: url(img/Background-1.jpg);
    min-width: 820px;
    
}
#header{
    margin:10px;
    border:solid 2px #717D7D;
    position: absolute;    
    
}
.container{
    width: 822px;
    height: 100%;
    left: 50%;
    position: relative;
    margin-left: -411px;
    padding: 0;
    text-align: left;
       
}
.menu{
    width: 250px;  
    height: 250px;  
    margin: 10px;  
    float:left;  
    background:#161613;  
    border: solid 2px #717D7D;
    overflow: hidden;  
    position: relative;  
}
.menu img{  
    position: absolute;
    top: 0;  
    left: 0;  
    border: 0;  
}
.boxcaption{  
    float: left;  
    position: absolute;  
    background: #000;  
    height: 200px;  
    width: 100%;  
    opacity: .8;  
    /* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
}  
.peek .boxcaption {  
    top: 180px;  
    left: 0;  
}
.caption .boxcaption {  
    top: 180px;  
    left: 0;    
}
h3{
    color:white;
}
#content{
    width: 800px;
    margin: 0px;
    vertical-align: top;
}
.modal{
    width: 100%;
    margin: 10px;
}
.content{
    left:10px;
    float: left;
    width: 800px;
    height: 400px;
    background: rgba(51, 51, 51, 0.3);
    position: relative;
}
#script{
    visibility: hidden;
    top:0;
    height: 0;
    position:absolute;
}
#loginmelding{
    position: relative;
    color: crimson;    
}
table#list{
    border-width: 2px;
    border-spacing: 2px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
	
}
table#list tr {
    border-width: 1px;
    padding: 5px;
    border-style: inset;
    border-color: black;
    cursor: pointer;
}
table#list td {
    border-width: 0px;
    padding: 5px;
    border-style: inset;
    border-color: black;
	
}
table#list tr:hover {
    background-color:#999;
    cursor: pointer;
}
table#list tr#title:hover{
    background-color:transparent;
    cursor:default;
}
#bewerk{    
    left:10px;
    margin-bottom: 5px;
    float: left;
    width: 800px;
    height: 235px;
    background: #3A75C3;
    border-radius:10px;    
    position: relative;    
}
.beheertab{  
    text-decoration:none; 
    padding:10px;  
    margin-right:0px;  
    background:#f9f9f9;  
    color:#333; 
    outline:none;  
    font-family:Arial; 
    font-size:12px; 
    text-transform:uppercase;
    cursor: pointer;
} 
.beheertab:hover{  
    background:#999;
    color:#f0f0f0;  
}  
#gebruikerstab{  
    background:#999;  
    color:#f0f0f0;  
}

[JvJefke]

I solved the problem. I checked the website with the "web developer" plugin for Firefox. There, it seemed that the css file simply didn't came trough. I checked the reference in the index file and found out that the type property was wrong. I used

type="css/text"

instead of

type="text/css"

So if someone has similar issues, it might be good to check that out.