•  20-07-2023
  •  | 
  •  

Domanda

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:wrongDivSize

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.

È stato utile?

Soluzione

Remove the width:100% for .chat_message class

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top