Internet explorer view

hello   
i have problem when i'am acces my forum on IE   
so, here's the problem...





please help me  

It may be due to some of your CSS. Some CSS does not work on IE and some is only unique to Webkit browsers and so on.

Sir. Mayo wrote:It may be due to some of your CSS. Some CSS does not work on IE and some is only unique to Webkit browsers and so on.

can you help me to fix it?  

I can try i dont the what works on what browser though. I think the staff do theyed be best. but ill look at the code can you add it please.

Sir. Mayo wrote:I can try i dont the what works on what browser though. I think the staff do theyed be best. but ill look at the code can you add it please.

CSS

Code:

.pun .post .user {
    display: block;
    position: relative;
    margin: 0;
    width: initial!important;
    float: none;
    background: white;  vertical-align: middle;  border-bottom: 1px solid #DDD;  padding: 15px;
    height: 75px;
  overflow:initial;
}
.pun .postmain {
    margin: 0;
    border: 0;
}
.pun .post-entry {
    background: rgb(250, 250, 250);  vertical-align: middle;  border-bottom: 1px solid #DDD;
    padding: 5px 10px;
}
#page-body .postfoot {
    margin: 0;
    background: white;  vertical-align: middle;  border: 0;
    border-bottom: none;  padding: 15px;
}
.pun .posthead {
    font-family: 'Lato', sans-serif;  background: #F0F0F0 url(http://i.imgur.com/r3Rwykr.png) repeat-x top;  font-size: 11px;  color: #666;  padding: 9px; 
    border-bottom: 1px solid #ddd; 
    border-top: none;
    min-height: 20px;  line-height: 20px;
}
.pun .post {
    margin: 10px 0;
    border: 1px solid #ddd;
}
.pun .topic {
    border: 0;
    background: none;
}
.pun .user .user-info {
    float: right;
font-size:11px}
.pun .user .user-ident {
    float: left;
}
.pun .topic .post:first-child {
    margin-top: 0px;
}
.pun .user-ident .user-basic-info {
font-weight: normal;
font-size: 11px;
}
.pun .post .user .user_avatar {
    float: left;
}
.pun .post .user .user_avatar img {
    padding: 1px;  border: 1px solid #DDD;  box-shadow: 0px 1px 3px -1px #BEBEBE;
    width: 70px;
    height: 70px;
}
.pun .post .user .user_avatar img:hover {border-color: #aaa;}
.pun .user-ident .username {
    position: relative;
}
.pun .user .user-ident {
    margin-left: 15px;
    font-size: 11px;
    font-weight: normal;
}
.pun .user-ident .username a {
    font-size: 13px;
    font-weight: bold;
}
.pun .user-ident .username status.s_u_p {
    float: left;
    background: url("http://i.imgur.com/UvKrxTF.png");
    height: 7px;
    width: 7px;
    margin: 4px 4px 4px 0px;
}

Hi,

May I ask which version of the IE are you using?

Regards,
Sir Chivas.

Sir Chivas™ wrote:Hi,

May I ask which version of the IE are you using?

Regards,
Sir Chivas.

hello, i'm using IE 11 now

Hi,

I normally don't use IE, so please bare with me; I'll try to provide you the correct CSS to fix this.

Regards,
Sir Chivas.

Sir Chivas wrote:Hi,

I normally don't use IE, so please bare with me; I'll try to provide you the correct CSS to fix this.

Regards,
Sir Chivas.

indeed most people don't use IE, but it affects the display on mobile browser.
please help me to fix it to be consistent in all browser  

Hello kumotta,

You're using the initial keyword which is not supported in Internet Explorer as a property value. It would be better to use an exact value so it will render properly on all browsers.

Like, instead of :

Code:

width:initial !important;

you would write :

Code:

width:auto !important;

and instead of :

Code:

overflow:initial !important;

you could write :

Code:

overflow:visible !important;

It depends on what the original value is, or the result you're seeking.

If you wanted you could also write a fallback :

Code:

.parent-class { color:red; }

.child-class {
   color:#000; /* IE fallback */
   color:initial;
}

http://www.w3schools.com/cssref/css_initial.asp

Ange Tuteur wrote:Hello kumotta,

You're using the initial keyword which is not supported in Internet Explorer as a property value. It would be better to use an exact value so it will render properly on all browsers.

Like, instead of :

Code:

width:initial !important;

you would write :

Code:

width:auto !important;

and instead of :

Code:

overflow:initial !important;

you could write :

Code:

overflow:visible !important;

It depends on what the original value is, or the result you're seeking.

If you wanted you could also write a fallback :

Code:

.parent-class { color:red; }

.child-class {
   color:#000; /* IE fallback */
   color:initial;
}

http://www.w3schools.com/cssref/css_initial.asp

hello,

I have tried, but to no avail    can you help me further?

Have you replaced the initial values by a value that IE can understand ? I have done the following and it is displaying fine on IE and Fx :

Replace :

Code:

.pun .post .user {
    display: block;
    position: relative;
    margin: 0;
    width: initial!important;
    float: none;
    background: white;  vertical-align: middle;  border-bottom: 1px solid #DDD;  padding: 15px;
    height: 75px;
  overflow:initial;
}

by :

Code:

.pun .post .user {
    display: block;
    position: relative;
    margin: 0;
    width: auto !important;
    float: none;
    background: white;  vertical-align: middle;  border-bottom: 1px solid #DDD;  padding: 15px;
    height: 75px;
  overflow:hidden;
}

code work, thank you very much!  
topic solved~

You're welcome

Topic solved and archived