www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Browser compatibility issues

  1. #1
    Join Date
    Apr 2012
    Posts
    4

    resolved [RESOLVED] Browser compatibility issues

    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.

  2. #2
    Join Date
    Mar 2012
    Location
    bangalore,india
    Posts
    27
    i think the problem lies in your css..have you used white-space:nowrap ??? if not then make a try..

  3. #3
    Join Date
    Apr 2012
    Posts
    4
    No, i haven't used white-space:nowrap but i'll look further into the .css file.
    Thanks for the reply.

  4. #4
    Join Date
    Apr 2012
    Posts
    4
    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.

    Code:
    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;  
    }

  5. #5
    Join Date
    Apr 2012
    Posts
    4
    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
    HTML Code:
    type="css/text"
    instead of
    HTML Code:
    type="text/css"
    So if someone has similar issues, it might be good to check that out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles