Using column-count in Opera with max-height

Encountering an issue in Opera 12 when attempting to combine column-count with max-height. The problem arises when Opera generates more columns than specified in column-count when a fixed height is set, instead of adding a scroll option.

For example, consider the following HTML:

<div>
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
        <li>11</li> <li>12</li> <li>13</li>
        <li>14</li> <li>15</li> <li>16</li>
        <li>17</li> <li>18</li> <li>19</li>
        <li>21</li> <li>22</li> <li>23</li>
        <li>24</li> <li>25</li> <li>26</li>
        <li>27</li> <li>28</li> <li>29</li>
    </ul>
</div>

with the following CSS:

div
{
    overflow-x: hidden;
    overflow-y: auto;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; 
    max-height: 100px;
}

The issue is visible in Opera, while Firefox and Chrome display correctly. Opera generates more columns than specified, exceeding the intended two columns.

The goal is to create a fixed-height div with two columns and the option for vertical scrolling when necessary.

Answer №1

Check out this:

span {
    text-decoration: underline;
    font-weight: bold; 
    color: blue; 
}
p {
    text-align: center;
    margin: 10px; 
}

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

What is the method to choose the following CSS element?

There are two div elements in my HTML code: <body> <div id="one"></div> <div></div> </body> I am looking to hide the div elements after the one with id="one" using CSS. I attempted this method: #one:after{display: ...

The CSS functionality for the body tag operates seamlessly even without the presence of the body tag in the

My style.css file has the following code: body{ background-color:pink; font-size: 130%; } This is the code in my style_placement.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

I have a loop that creates multiple divs with the class panel. @for(comment <- event.getCommentsSorted()) { However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected. $(window).on('load& ...

Is it possible to adjust the background color based on the current time of day?

I have successfully designed a visually appealing website using HTML5, CSS, and Bootstrap. I am interested in finding a way to automatically change the background color and navigation bar selection color based on the time of day - blue during the day and d ...

Is there a way to turn off the ripple effect on Material UI Input components?

Is there a way to turn off the ripple effect or highlight color on the TextField component in React's Material UI? https://i.sstatic.net/qB2cm.png I've attempted to modify the theme: theme.props.MuiTab.disableRipple = true theme.props.MuiButto ...

Two hyperlinks are not visible

I've added 2 links in my header component, but for some reason, they are not displaying. It's strange because everything appears to be correct. These 2 links are part of a list within a ul element. <nav class="navbar navbar-expand-lg navbar-d ...

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

Customizing ExtJS Themes for Ext.panel.Panel

In my current project using ExtJS 4.1.1a, I am working on creating a new theme for a "tabbedPane" and a normal Panel with an "Accordion" layout. However, I am facing difficulty in changing the color of the headers for both elements. I wish to customize the ...

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

jQuery 'if' condition not getting detected

My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...

React createElement function does not include string children when there are multiple children present within the inner HTML

Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file. The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element&ap ...

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...

Tips on stopping slideToggle from opening and closing when clicked for the first time

When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...

What is the best way to adjust the size of an image as I navigate down a webpage?

I've been working on designing a navigation bar for a website, but I'm running into some issues. My goal is to have the logo shrink as the user scrolls down the site. I've experimented with webkit animations and various javascript/jQuery fun ...

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

What is the best way to enlarge an image while keeping it contained within a card using Bootstrap?

Is it possible to create a visually appealing card similar to the image provided using Bootstrap 5.3.3 and HTML on a website? https://i.sstatic.net/OH4U0.png ...

Bootstrap card restricting ul tag from occupying full width

Utilizing Bootstrap in my WordPress site, I employed the bootstrap grid system to split the page contents into two sections, one of which includes a card acting as a navigation menu. However, the <ul> element is failing to expand to full width. Wit ...

What are the distinct components used in CSS for :target?

I've encountered an issue with nesting :target pseudoclasses. Currently, I have a section containing an anchor tag. Right now, everything is functioning as intended; when I click on the anchor linking to #Current, it expands the area and displays the ...