How does the use of various languages impact the structure of an HTML layout?

Working on my messageboard project, I noticed that the CSS layout gets affected by different languages...

English, Chinese, and Thai all display correctly, but Japanese language messes up the CSS styling...

Using en_US, ja_JP, zh_TW, th_TH PHP files to switch between languages.

When using English: https://i.sstatic.net/goNyO.png

When using Japanese: https://i.sstatic.net/aT7jK.png

<li class="board_list">
                    <div class="board_img">
                        <img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
                    </div>
                    <div class="board_text">
                        <div class="board_title">
                          <span>
                            <a href="./board.php?board_id=1">
                              <span>Testing the title length of a board name</span>
                            </a>
                          </span>
                        </div>
                        <div class="board_info">
                          <p class="p1">Posts: 26</p>
                        </div>
                    </div>
                    <div class="board_latest">
                        <div class="board_latest_title">
                            <span>Latest Post:</span>
                            <a href="./article.php?id=32" title="Testing the title length of a board name">Testing the title length of a board name</a>
                        </div>
                        <div class="board_latest_info">
                            <a href="./member.php?user=1" title="carry0987">
                                <span>carry0987,</span>
                            </a>
                            <span>2018-04-28</span>
                        </div>
                    </div>
                </li>
                <li class="board_list">
                    <div class="board_img">
                        <img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
                    </div>
                    <div class="board_text">
                        <div class="board_title">
                          <span>
                            <a href="./board.php?board_id=2">
                              <span>Default</span>
                            </a>
                          </span>
                        </div>
                        <div class="board_info">
                          <p class="p1">Posts: 6</p>
                        </div>
                    </div>
                    <div class="board_latest">
                        <div class="board_latest_title">
                            <span>Latest Post:</span>
                            <a href="./article.php?id=23" title="Testing the title length of a board name">Testing the title length of a board name</a>
                        </div>
                        <div class="board_latest_info">
                            <a href="./member.php?user=2" title="carry0987y">
                                <span>carry0987y,</span>
                            </a>
                            <span>2018-04-28</span>
                        </div>
                    </div>
                </li>

Here's my CSS code:

.board_list {
    border-width: 1px;
    border-style: solid;
    border-color: #E9E9E9;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tracing the variable passed by Jquery (AJAX) within the PHP code on the server to identify and

My web-hosted server has a PHP file in a specific folder. I want to send data from an HTML form using Jquery AJAX and view those variables in the PHP code on the server side. Here is my Jquery AJAX code: function sendtoServer() { $.ajax({ ur ...

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

Photographs within a line of HTML tables

I have been struggling with this issue, and it's honestly such a simple mistake! All I need is for each picture to be accompanied by a small box below it containing the name. I want all 4 pictures to be displayed in a row. However, when viewing this ...

Is it possible to create and view HTML files in Objective C through user interaction?

I am currently working on developing an iOS app that enables users to create an unlimited number of HTML documents and save them within the app's documents folder. It's somewhat of a combination question, but how can I showcase a file that is sto ...

My .php file seems to be having trouble loading any of the external css or javascript files

Being new to PHP, I recently created a .php website and connected it to a local test server using MAMP. However, I encountered an issue where the CSS and JavaScript from external files weren't working, even though the PHP functionality (such as sendin ...

What is the best way to transform Adobe XD designs into HTML and CSS with Vue.js?

I am looking to create a single page application with vue.js and came across this helpful reference at . A colleague has created a prototype using Adobe XD, and now my task is to transform it into HTML/CSS while making it functional and connecting it to an ...

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is e ...

Place an image at the center with a height set to 100% within a div that has a fixed height and

Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...

Is there a way to adjust the height overflow using a percentage?

I have a coding dilemma here where I am attempting to make the SearchLocationCards overflow. It seems to work fine with 'px' and 'vh' values, but the '%' value doesn't seem to have any effect. How can I adjust the height ...

Difficulty in displaying JavaScript function output as text

I'm currently developing a program that randomly selects and prints a function from an array list. I am facing difficulties in getting the result to print correctly. Below is the snippet of code: const hiddenElements = document.querySelectorAll( &qu ...

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;"> <div fxLayout="column" style="width: 50%;">1stOne </div> <div fxLayout="column" styl ...

Manipulating attribute values using Jquery

Currently, I am attempting to switch the src value of an iframe when a link is clicked by replacing it with the href from that link. By preventing the default action upon clicking the button, I can successfully update the src value with the url provided. H ...

Changing the cursor to a waiting state following a mouse click

Looking for some help here - when I click a button, the cursor remains standard and doesn't show loading. Any suggestions on how to fix this? Below is the snippet of my code: <div class="signup"> <input type="submit" value="Sign Up" tit ...

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

How to change the background color of select options using JQuery

My webpage includes multiple select boxes with different options: <select name="item-0-status" id="id_item-0-status"> <option value="">---------</option> <option value="1">Online</option> <option value="2">Offline</o ...

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

Good day, I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div ...

Preventing Safari 16 (macOS) from automatically selecting the current date in an HTML <input type="date"> field

I am encountering an issue with Safari where date fields are defaulting to today's date if no date is selected. I have tried various methods to make the field blank when no date is chosen, but so far, nothing seems to work. In all other browsers, the ...