Tips for preventing errors in formatting?

I created a field using rectangles as divs. However, when I add content to the rectangle divs, the formatting gets messed up. Can anyone help me fix this issue? Here's the link

<div class='line' id='line1'>
  <div class='cell top_cell left_cell' id='l1c1'><font size="6">&bull;</font></div>
  <div class='cell top_cell' id='l1c2'></div>
  <div class='cell top_cell' id='l1c3'></div>
  <div class='cell top_cell' id='l1c4'></div>
  <div class='cell top_cell right_cell' id='l1c5'></div>
</div>

CSS

.cell {
    background:#F593D1;
    width:50px;
    height:50px;
    border-radius:6px;
    border: 1px solid;
    -webkit-border-radius:6px;
    -moz-border-radius:5px;
    -khtml-border-radius:10px;
    display:inline-block;
    opacity: 0.7;
}
htmlcss

Answer №1

Include the vertical-align property in the .cell ruleset and set it to a value other than baseline. Here's an example:

.cell {
    vertical-align: middle;
    background:#F593D1;
    width: 50px;
    height: 50px;
    border-radius:6px;
    border: 1px solid;
    -webkit-border-radius:6px;
    -moz-border-radius:5px;
    -khtml-border-radius:10px;
    display:inline-block;
    opacity: 0.7;
}

Check out the Demo.

Answer №2

Insert overflow:hidden; into the .top_cell element.

Check out the FIDDLE DEMO here

.top_cell {
    margin-top: 10px;
    overflow:hidden;
}

Alternatively, add vertical-align:top; to the .cell component.

Explore this FIDDLE DEMO for more details

.cell {
    background:#F593D1;
    width:50px;
    height:50px;
    border-radius:6px;
    border: 1px solid;
    -webkit-border-radius:6px;
    -moz-border-radius:5px;
    -khtml-border-radius:10px;
    display:inline-block;
    opacity: 0.7;
    vertical-align: top;
}

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

How can JQuery and CSS brighten up buttons?

Is there a way for me to create an "enlightening" effect similar to the one seen in the "Tags" section on this website? I am not just looking to change the color of the background from gray to white, but instead, I want to progressively make the button li ...

jquerycss

The navigation bar alignment to the right is malfunctioning

I'm puzzled as to why the navbar-right class is not properly closing out the two navigation bar elements on the right. Despite adding the correct code, it doesn't seem to be working as expected. <nav class="navbar fixed-top navbar-toggleable- ...

csstwitter-bootstrap

Utilize the text box feature for manipulating the data field in Angular4

Within my grid view, there exists a column labeled remark. This specific field contains various values, one of which is absence. My objective is to modify the remark value exclusively when it is equal to absence, followed by clicking the corresponding icon ...

htmlangulartypescript

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js

Is it possible for users to change months on a website using the Python calendar library?

Currently, I am in the process of developing a web application using Django. To create an HTML calendar, I am utilizing the Python calendar library. I am curious to know if there is a built-in method to enable users to switch between months while navigat ...

pythonhtmldjangocalendar

The HTML code is displayed on the page as source code and is not run by the browser

Here is the code snippet I am using: $link = "<a class=\"openevent\" href=\"$finalUrl\" target=\"_blank\">Open Event</a>"; foreach ($spans as $span) { if ($span->getAttribute('class') == 'categor ...

phphtmldomdocument

Experience the feeling of releasing momentum by click and dragging the scroll

One feature I am looking for is the ability to control the scroll speed when dragging, and have the scroll continue moving slightly after release instead of stopping instantly. CodePen: https://codepen.io/rKaiser/pen/qGomdR I can adjust the speed adequat ...

javascriptjquerycssscroll

Incorporate multipart data into your HTML form for increased versatility and

Can HTML form input values be set as multipart data? I am attempting to prepare an image for upload while submitting an HTML form (the desired remote image data is generated by PHP). For example: <form action="http://remote_site.com" method="post" en ...

phphtmlformsmultipartform-data

I am attempting to utilize Ajax in order to transfer information to a different webpage

It's a bit complex and I can't figure out why it's not working. My goal is to create a page with textboxes, dropdown lists, and a datagrid using easyui. The issue arises when I select something from the dropdown list - I want two actions to ...

javascriptphpjqueryhtml

Embracing this web design framework with Rails

Hey there, I am currently trying to integrate a free CSS/HTML/JavaScript template into my Rails project. You can download the template from here. The template consists of an index page, a single CSS file, and two JavaScript files. To implement this templa ...

htmlcssruby-on-railsruby-on-rails-5

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Greetings! As a newcomer to the realms of PHP and AJAX, I am currently on a quest to showcase the outcomes of a query within an HTML dropdown using AJAX. Let's delve into my PHP code: $pro1 = mysqli_query("select email from groups"); I made an attemp ...

javascriptphphtmljqueryajax

What is the best way to iterate over an array in PHP and display each element within an <li> HTML tag?

I need help with a PHP script to iterate through an array and store the items in a <li> tag. I am struggling to get the names to display properly. The count of array items is showing up, but not the names themselves. <ul> <?php ...

phphtmlarraysfor-loop

The desired hover effect on the navigation bar is not functioning properly

I have successfully created a hover effect for my navigation bar and the list inside it. However, I am facing an issue where the box shadow effect is only appearing in a small area when hovered (see image below). My goal is to extend the shadow effect to ...

htmlcss

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

I'm facing an issue with the multi-select box. I attempted to choose multiple values using jQuery, but only the last one seems to be selected. Can someone assist me, please? Below is my code: <script> $(function(){ <?php foreach ($selectd ...

phpjqueryhtml

What is the best way to conceal a broken image icon without sacrificing all of the stylesheet?

Can someone assist me in understanding and modifying this code? Here is the code snippet: <table> <tr> <td> <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2p ...

jqueryhtmlcssajaxlaravel

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Trying to find a solution for having sub menus within the menu items. There are 2 dropdown buttons (Reports and Views) within a menu item that is itself a dropdown item. Clicking on the first button displays the submenu below, but clicking on the second ...

csstwitter-bootstraptwitter-bootstrap-4

Issue with rendering images on Bootstrap-Vue card component

In the process of creating a static website with Vue.js, I am attempting to incorporate a basic Bootstrap card using Bootstrap-Vue. Unfortunately, I am facing an issue where the image does not display when utilizing the b-card component with the img attrib ...

htmltwitter-bootstrapvue.js

What is the best way to retrieve the dimensions of a custom pop-up window from the user?

Currently, I am in the process of developing a website that allows users to input width and height parameters within an HTML file. The idea is to use JavaScript to take these user inputs and generate a pop-up window of a custom size based on the values pro ...

javascripthtml

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

I recently started using Material-UI and encountered an issue where I couldn't override the root class for Avatar, specifically MuiAvatar-root. Material-Ui Version: 4.11.3 Despite following examples provided by material-ui's documentation here, ...

cssreactjssassmaterial-ui

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

javascriptjquerycssasp.net-mvc-4bootstrap-4