Home/ Questions/Q 9126259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:59:51+00:00

I created a Chat application, I kept the parent div related to chat application

  • 0

I created a Chat application, I kept the parent div related to chat application as position:fixed. here is the excerpt code:

#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;
    min-height: 300px;
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;
    position: fixed;
    bottom: 25px;  //even tried by giving 'em', no use
    right: 10px;
    padding: 2px;
}

The problem is that in IE8, I need to give more value to bottom property to make it completely visible(the below part is cutting down). If I do so, In chrome, the chat application is going more top than usual.

Any fix to this?

I am doing this in asp.net so, there is no need to worry about doctype.(as it provides the template)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

EDIT:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
   <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="JSfiles/file.js" type="text/javascript"></script>
   <link href="Styles/style.css" rel="stylesheet" type="text/css" />
   <!--[if lte IE 8 ]><html class="ie_8"><![endif]-->
     <!--[if (gt IE 8)|(!IE)]><!-->
        <html>
    <!--<![endif]-->
</head>
<body>
    <div id="#chat-outline"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add a conditional HTML class for IE8. Change your <html> tag to this

    <!--[if lte IE 8 ]><html class="ie_8"><![endif]-->
<!--[if (gt IE 8)|(!IE)]><!-->
<html>
<!--<![endif]-->

    and then in your css have this

    .ie_8 #chat-outline {
    bottom: 25px  //OR whatever it needs to be
}

    This will mean that the increased bottom will not affect any other browser:

    See here for more info: Link

    EDIT

    Your html is invalid:

    Try This:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lte IE 8 ]>
    <html xmlns="http://www.w3.org/1999/xhtml" class="ie_8">
<![endif]-->
<!--[if (gt IE 8)|(!IE)]><!-->
    <html xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head id="Head1" runat="server">
  <title></title>
   <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="JSfiles/file.js" type="text/javascript"></script>
   <link href="Styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="#chat-outline"></div>
</body>
</html>
    • 0