The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite figure it out!

#liststyle2 {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid #c7c7c7;
    background-color: #ececec;
    float: left;
    text-decoration: none;
    list-style: none;
    display: block;
    margin: 20px 0 0 0;
}

#liststyle2 li {
    position: relative;
}

#liststyle2 li a {
    padding: 17px 25px 15px 25px;
    font-size: 15px;
    float: left;
    min-width: 77px;
    text-align: center;
    font-weight: bold;
    color: #a3a3a3;
    border-bottom: 1px solid #c7c7c7;
}

#liststyle2 li a:hover{
    background-color: #e2e1e1;
}

#liststyle2 li:last-child a{
    border-bottom: none;
}

Answer №1

Having the HTML code available would be beneficial.

In my opinion, it might be best to consider removing this specific option:

#liststyle2 li a {
    float: left;
}

If you decide to float the li a elements to the left, ensure that you set the width of #liststyle2 li a equal to the width of #liststyle2.

Answer №2

To ensure compatibility with different browsers' engines, it is necessary to include specific transition prefixes for each one. Additionally, include the following properties:

-o-border-top-left-radius: 5px;
-o-border-top-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-o-border-bottom-left-radius: 5px;

Make sure to add these properties to your #liststyle2.

For more information, refer to Opera's documentation.

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

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

Incorporating information into Observable in Angular 2

I'm currently working on loading gifs from the API based on a search parameter in batches of 20. Once I reach the bottom of the page, I need to load another 20. To achieve this, I've implemented observables. However, I'm facing an issue with ...

Resizable item within a text box (similar to an HTML editing tool)

After extensive searching online, I have not been able to find a solution. What I need is a draggable input element within a textarea in a text-editable div. The draggable textarea should be integrated seamlessly into the text, and upon submitting, it shou ...

What is the best way to relocate a form to the top of the page

I am creating a website to enhance my HTML skills, and I encountered an issue with the sign-in form. Whenever I try to place an image next to the form, it automatically moves to the bottom. I have attempted using padding-top and padding-bottom but to no av ...

How can I use pinching gestures to zoom in and out on an image in the ASP.NET framework and HTML5?

I'm developing an iPad app and utilizing the ASP.NET framework along with HTML5 and Mobile jQuery. Any tips on how to accomplish this? Thank you! ...

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine. Here' ...

center text above images in flexbox when page is resized

When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need t ...

How to create a custom CSS style to make Bootstrap 4 modal slide in from the bottom

Back in the days of Bootstrap 3, this was the trick: .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } Another approach that could have been used: .modal.fade .modal-dialog { transfor ...

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

When scrolling down a webpage, the background color of the content does not stretch along with the page

I've created a webpage with a sticky header and footer, along with a scrollbar on the main content. However, I'm facing an issue where the background color of the content does not extend beyond the viewport when scrolling down. The text is visibl ...

Guide on implementing "Displaying 1 of N Records" using the dataTables.js framework

let userTable = $("#user_table").DataTable({ 'sDom': '<"row-drop"<"col-sm-12 row"lr>><"row"t><"row-pager"<"col-sm-12 col-md-5"i><"col-sm-12&qu ...

Having difficulty transferring serialized arrays from HTML to lower PHP files

I am attempting to transfer an array of checkbox inputs from an HTML page to an initial PHP file which creates a new layout for a page and then calls another PHP file to populate it. However, I am encountering issues with the serialization and unserializat ...

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

Retrieving data from the database and presenting it in HTML div elements

As a newcomer to PHP and MySQL, I am still learning the ropes. My goal is to extract data from the database and organize it into different divs based on unique IDs. For instance, div assigned to ID 1 will display the corresponding entry, div with ID 2 will ...

Conceal anchor links using jQuery by targeting their title attribute

Looking at the html below <li class="static"> <a title="blog" class="static menu-item" href="http://google.com">Blog</a> </li> <li class="static"> <a title="profile" class="static menu-item" href="http://profile.com"> ...

The :not() exclusion in CSS property fails to exclude the class

I'm attempting to style all the links on my webpage in a particular way, except for those in the navigation bar. Despite trying to exclude the navbar links using a:not(.navbar), it seems that the styling still applies to all links, including Link 1 in ...

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

The website is unresponsive and fails to adapt to mobile screen sizes

For practice, I designed this layout that is not responsive to mobile screens. The text is supposed to be below the image, but it is not adjusting as expected. To make it responsive, I used Bootstrap, but it seems to not be working properly. Below is the ...

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

Having encountered some issues with setting up a list of items and moving them between each other, I was wondering if it is possible to have multiple lists with a link inside each item that allows for moving it to a specified list. For example, having a li ...