Remove the width:100%
for .chat_message class
Pergunta
I am following this tutorial to create a chat server: https://www.youtube.com/watch?v=ixDhEZJBmmA
What for whatever reason the textarea and input area in my program are not conforming to the correct width of 300px. I have checked similar threads and overlooked this video for the last two hours looking for a typo. So why are two of my componets not conforming to 300px? I downloaded a chrome ruler app and they measured around 280px instead of 300px. I am a noob at css so point out any bad code practices I have please!
Here is the code:
<!DOCTYPE hmtl>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class = "body">
<div class="chat">
<input type ="text" class = "chat-name" placeholder= "Enter Your Name">
<div class = "chat-messages">
</div>
<textarea placeholder= "Type Your Message"></textarea>
<div class = "chat-status"> Status: <span>Idle</span></div>
</div>
</body>
</html>
body, textarea, input
{
font: 14px "Trebuchet MS", sans-serif;
}
.chat{
max-width: 300px;
}
.chat-messages, .chat-name, .chat textarea {
border: 1px solid #bbb;
}
.chat-messages {
width: 100%;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
.chat-name {
width: 100%;
padding: 10px;
border-bottom: 0;
margin: 0;
}
.chat textarea {
width: 100%;
padding: 10px;
border-top: 0;
margin: 0;
max-width: 100%;
}
.chat-status {
color: #bbb;
}
.chat textarea, .chat-name{
outline: none;
}
EDIT: here is jfiddle: http://jsfiddle.net/rezen__/b2KRx/ Also here is a photo of what it looks like:
EDIT #2: So it works on jfiddle, works on some other users computers, but does not work on mine. I have this exact code copy and pasted in my editor.
Solução