login to the chat.
It works well at IE except one problem.
1. you can see a div where we post messages and a textarea beneath it where we type in chat messages. each of them have the same margin-left value but still they dont align vertically at the same point. why???
Regarding Mozilla:
2. If you open the appln in Mozilla, it should be very close to being a horrible design.
The userWindow that's where I display the users' list goes atop compared to the nearby chat messages window. Actually both of them have the same margin-top value which works fine in IE but not in Mozilla...why???
3.There is a 2px margin-left between userWindow and chatWindow which does not work...why???
4. If you see the Send button near the right end of the textarea it does not align horizontally but does with IE. why?? FYI, both the textarea and the button are in the same div not wrapped by span elements.
My css employed:
Code: Select all
body {
background-image:url(background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
width:80%;
}
html, body {
height:100%;
}
.rAlign{
text-align:right;
}
.lAlign{
text-align:left;
}
.cAlign{
text-align:center;
}
.chatWindow{
background-color:#CCCCCC;
color:#000099;
width:300px;
height:240px;
border:3px solid #000000;
float:left;
padding:10px;
margin-top:20px;
margin-left:20px;
}
.userWindow{
margin-top:20px;
margin-left:2px;
}
.inputDiv{
margin-top:3px;
margin-left:20px;
}
.groupControls{
margin-top:6%;
margin-left:10%;
}
.leftMainDiv{
background-color:#FFFFFF;
color:#333333;
}
.rightMainDiv{
background-color:#333333;
color:#FFFFFF;
}
.displayChatName{
font-weight:bolder;
text-transform:capitalize;
color:#990000;
}
.displayChatMessages{
color:#3366FF;
}
.title{
background-color:#000099;
color:#FFFFFF;
font-weight:bolder;
font-size:1.2em;
text-align:center;
}
.login{
color:#000000;
margin-top:100px;
margin-left:20%;
width:70%;
float:none;
}
.subMenuDiv{
background-color:#400040;
color:#FFFFFF;
}
.button1{
background-color:#CCCCCC; color:#000000; height:40px; width:60px; border: 2px solid #000000;
text-align:center;
}
.textArea{
border:2px solid #000000;
background-color:#CCCCCC;
color:#003366;
}
.select{
border:2px solid #000000;
background-color:#CCCCCC;
color:#003366;
font:Icon, Verdana, Arial;
}
.listRooms{
text-align:left;
padding:5px;
}
div.loginHeader{
background-color:#000099;
color:#FFFFFF;
height:10%;
font-weight:bolder;
font-size:1.2em;
text-align:center;
padding-top:5px;
padding-bottom:5px;
}
div.header{
background-color:#003399;
color:#FFFFFF;
height:10%;
min-height:10%;
margin-left:10%;
margin-right:10%;
padding-top:1%;
padding-bottom:1%;
}