locked
my webpage different between internet explorer and firefox ?? RRS feed

  • Question

  • User-2053568834 posted

    hi

    I used html and css for design my web page but after open the site the page different between internet explorer and firefox ??

    internet explorer

    firefox

    Monday, March 19, 2018 7:44 AM

Answers

  • User283571144 posted

    Hi emm,

    According to your description, I suspect there is something wrong with your css file and ie explorer mode.

    I suggest you could use F12 develop tool to troubleshoot by yourself.

    I suggest you could firstly check the develop tool's network tab to see the css file condition.

    E.g:

    Then I suggest you could check the element's css style is right or not by using develop tool's Dom Explorer.

    At last, I suggest you could check the develop tool's ie emulation mode to makre sure you have used ie11.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 25, 2018 6:52 AM

All replies

  • User-1838255255 posted

    Hi emm,

    According to your description, as far as i know, this issue maybe caused by the different browser render. The background color different is the default browser's behavior. 

    You could check the style code in browser dev tool then modify the related code to make them same. 

    Also i hope you could post the related code for us to test and help you to find solution. 

    Best Regards,

    Eric Du  

    Tuesday, March 20, 2018 3:04 AM
  • User-2053568834 posted
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="mainpage.aspx.vb" Inherits="mainpage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>	
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="styles/style.css" rel='stylesheet' type='text/css' media="all"  />
        <style type="text/css">
            .styletable {
                height: 100px;
                width:200px;
            }
            .auto-style4 {
                width: 25%;
                vertical-align:middle ;
                text-align:center;
                padding-left:4em;
            }
    
            .auto-style5 {
                height: 38px;
            }
    
            </style>
        </head>
    <body>
    				 <div class="loginform">
                         <table style="width:100%; height:100%">
                             <tr>
                                 <td class="auto-style4">
                                   <div class="container" >
                                       <a href="http://www.tvtc.gov.sa" target="_blank" >
                                     <img class="image" src="images/desktop.png"/>
                                       </a>
                                     <asp:Label ID="Label1" runat="server" Text="موقع المؤسسة" Font-Size="Large"></asp:Label>
                                   </div>
                                     
                                 </td>
                                
                                 <td class="auto-style4">
                                   <div class="container" >
                                       <a href="http://www.tvtc.gov.sa/Arabic/TrainingUnits/CollegesOfTechnology/zct/Pages/default.aspx" target="_blank" >
                                     <img class="image" src="images/browser.png"/>
                                           </a>
                                     <asp:Label ID="Label2" runat="server" Text="موقع الكلية" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                                 <td class="auto-style4">
                                     <div class="container" >
                                         <a href="https://serv.tvtc.gov.sa/" target="_blank" >
                                     <img class="image" src="images/team.png"/>
                                             </a>
                                     <asp:Label ID="Label3" runat="server" Text="بوابة الموظفين" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                                 <td class="auto-style4">
                                     <div class="container" >
                                        <a href="https://mail.tvtc.gov.sa/owa/" target="_blank" >
                                     <img class="image" src="images/email.png"/>
                                            </a>
                                     <asp:Label ID="Label4" runat="server" Text="بريد المؤسسة" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                             </tr>
                                   <tr>
                                 <td class="auto-style4">
                                       <div class="container" >
                                            <a href="http://web-server1/zn/default.aspx" target="_blank" >
                                     <img class="image" src="images/tools.png"/>
                                                </a>
                                         <asp:Label ID="Label5" runat="server" Text="الصيانة العامة" Font-Size="Large"></asp:Label>
                                     </div>
                                     
                                 </td>
                                
                                 <td class="auto-style4">
                                   <div class="container" >
                                       <a href="http://web-server1/zm/default.aspx" target="_blank" >
                                     <img class="image" src="images/monitor.png"/>
                                           </a>
                                     <asp:Label ID="Label6" runat="server" Text="صيانة الحاسب" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                                 <td class="auto-style4">
                                     <div class="container" >
                                        <a href="http://www.tvtc.gov.sa/Arabic/Departments/FacultyCouncils/Rayat/Pages/Index.html" target="_blank" >
                                     <img class="image" src="images/man.png"/>
                                            </a>
                                     <asp:Label ID="Label7" runat="server" Text="رايات" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                                 <td class="auto-style4">
                                     <div class="container" >
                                        <a href="http://web-server/zctsite/phones.aspx" target="_blank" >
                                     <img class="image" src="images/mobile-phone.png"/>
                                            </a>
                                     <asp:Label ID="Label8" runat="server" Text="دليل الهاتف" Font-Size="Large"></asp:Label>
                                   </div>
                                 </td>
                             </tr>
                         </table>
    		        </div>
                         <div class="footer" >
                              
                         </div>
    </body>
    </html>

    and css code

    /*--
    Author: W3layouts
    Author URL: http://w3layouts.com
    License: Creative Commons Attribution 3.0 Unported
    License URL: http://creativecommons.org/licenses/by/3.0/
    --*/
    /* reset */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border-style: none;
    	border-color: inherit;
    	border-width: 0;
    	margin: 0 0 50px 0;
    	padding: 0;
    	font-size:100%;vertical-align:baseline;
    	font-weight: 700;
        width: 673px;
    }
    article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
    ol,ul{list-style:none;margin:0px;padding:0px;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
    table{border-collapse:collapse;border-spacing:0;
        height: 201px;
    }
    /* start editing from here */
    a{text-decoration:none;}
    .txt-rt{text-align:right;}/* text align right */
    .txt-lt{text-align:left;}/* text align left */
    .txt-center{text-align:center;}/* text align center */
    .float-rt{float:right;}/* float right */
    .float-lt{float:left;}/* float left */
    .clear{clear:both;}/* clear float */
    .pos-relative{;}/* Position Relative */
    .pos-absolute{;}/* Position Absolute */
    .vertical-base{	vertical-align:baseline;}/* vertical align baseline */
    .vertical-top{	vertical-align:top;}/* vertical align top */
    nav.vertical ul li{	display:block;}/* vertical menu */
    nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
    img{max-width:100%;
        height: 120px;
    }
    /*end reset*/
    /****-----start-body----****/
    body{
    	background:url(../images/images.png)  no-repeat center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
     	background-size: cover;
     	font-family: 'Arimo', sans-serif;
    
    }
    .loginform{
    	background: url(../images/bg.png) no-repeat;
    	margin: 13em auto 0;
    	width: 1000px;
    	height:400px;
    	border-radius: 0.6em;
    	-webkit-border-radius: 0.6em;
    	-moz-border-radius: 0.6em;
    	-o-border-radius: 0.6em;
    	box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25);
    	 ;
        top: -160px;
        left: 200px;
        margin-top:200px;
    }
    .container {
        ;
        width:150px;
        height:130px;
        text-align:center;
    }
    
    .image {
      opacity: 1;
      display: block;
      height: 125px;
      width:140px;
      transition: .5s ease;
      backface-visibility: hidden;
      margin-bottom:6px;
    }
    
    .container:hover .image {
      opacity: 0.4;
    }
    .footer {
    	margin: 13em auto 0;
    	width: 1000px;
    	height:50px;
    	 ;
        top: 300px;
        left: 200px;
        text-align:center;
        margin-bottom:6px;
        
    
    }
    
    

    when open my page from visual studio the style is ok but when publish to server the style on internet explorer not work

    Tuesday, March 20, 2018 5:38 AM
  • User-2053568834 posted

    hi

    I try web page , when write http:\\webserver\zctsite\mainpage.aspx the style not working but when write http:\\192.168.10.118\zctsite\mainpage.aspx the style work ???

    I do not know what is the problem ??

    Tuesday, March 20, 2018 7:47 AM
  • User-1838255255 posted

    Hi emm,

    According to your description and code, i tested your code in my side(IE) from VS, here is the tested result: 

    It is as same as you from your side, could you tell us which is you need? 

    If this is caused by the brower cache, please try press F5 + Ctrl to clear cache. 

    Best Regards,

    Eric Du  

    Tuesday, March 20, 2018 9:33 AM
  • User-2053568834 posted

    I tested my code in my IE from VS it is ok but when publish my website to server it is not ok the style different

    Tuesday, March 20, 2018 9:44 AM
  • User283571144 posted

    Hi emm,

    According to your description, I suspect there is something wrong with your css file and ie explorer mode.

    I suggest you could use F12 develop tool to troubleshoot by yourself.

    I suggest you could firstly check the develop tool's network tab to see the css file condition.

    E.g:

    Then I suggest you could check the element's css style is right or not by using develop tool's Dom Explorer.

    At last, I suggest you could check the develop tool's ie emulation mode to makre sure you have used ie11.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 25, 2018 6:52 AM
  • User-2053568834 posted

    hi

    when press F12 this is result :

    document mode : 7 ?? if I choose 10 the style work

    how I can fixed this problem ?? and can I open my website on all internet version ?

     

    thank you

    Sunday, March 25, 2018 7:50 AM
  • User283571144 posted

    Hi emm,

    According to your description, I suggest you could add meta tag in the page.

    Like this:

    <meta http-equiv="X-UA-Compatible" content="IE=10" />

    It will force the ie explorer using the ie10 mode.

    Best Regards,

    Brando

    Sunday, March 25, 2018 9:02 AM
  • User-2053568834 posted

    now the style works

    thank you

    Sunday, March 25, 2018 10:56 AM