CSS navigation not working properly in Internet Explorer 7

I am struggling to get this script to function properly in IE 7, as the navigation menu is CSS3-based and breaks completely after using Modernizer.

Check out an example on this fiddle

Modernizer did not fix the problem, so I'm considering if I need to make it work using jQuery instead?

CODE

<div class="main-wrapper">
    <div class="menu-wrapper">
        <nav class="nav-wrapper">
            <ul class="nav">
                <li><a href="#">Menu One</a>

                    <div class="dropdown">
                        <ul>
                            <li><a href="#">Sub menu one</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            ...
                        </ul>
                    </div>
                </li>
                ...
            </ul>
        </nav>
    </div>
    <img width="1000px" src="http://photorepairshop.com/Pages/Panoramic_Photo3.jpg" alt="image">
</div>
jqueryhtmlcss

Answer №1

In older versions of Internet Explorer like IE6 and IE7, the inline-block property is supported on inline elements such as span and anchor tags. However, if we want to apply this property to block elements like li, we need to trigger haslayout.

Here's how you can achieve this:

Step 1)

Add a lt-ie8 class only for browsers below IE 8 using conditional comments. This way, the CSS will only be applied to those specific browsers.

<!--[if lt IE 8]> <html class="lt-ie8"> <![endif]-->

Step 2)

Add the following CSS code:

.lt-ie8 .nav > li {
    *display:inline;
    zoom:1;
}

You can find similar questions on this topic here.

For more resources, check out this link.

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

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

The onchange event in the dropdown activates a function, however, there is no alteration observed in the three

I am attempting to create a dynamic display of a green or brown floor on a webpage using three.js, based on the selection from a dropdown list. However, I am encountering an issue where the floor images do not update even though the function is being execu ...

javascripthtmlthree.js

How can we separate XML data retrieved from an Ajax call using jQuery?

I have a massive amount of data from an XML file that I am organizing into an unordered list. I need to split the data into multiple lists so that I can style them as columns using CSS. Is there a way to insert a </ul><ul> every 20 entries or s ...

jqueryxmlajax

Steps to duplicate a text within a span tag

I need to extract the dynamic text from a spam generated by a slider set by the user. This text should then be copied to an input field. I attempted the following, but it did not work: <h4>Consórcio Value: <span class="slider-value quote-form-e ...

javascriptjqueryhtml

Identifying the specific random image that has been clicked on in an ASP.NET application

I have 12 unique images randomly selected from 2 different folders. Whenever an image is clicked, I want to change the border color of that image and also save which image was clicked in a database. Below is the code I am currently using to display the ran ...

c#jqueryhtmlasp.net

How can I ensure the end of the list is clearly visible?

I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...

cssreactjstypescript

Issue with Django app: Bootstrap 4 modal hidden behind background

Having exhaustively researched this issue, I am still unable to resolve it with the outdated Bootstrap solutions available. The problem arises when I click on the button - the modal appears behind the background instead of in front. Most suggestions indica ...

htmlcssdjangobootstrap-4bootstrap-modal

Limiting keyboard input with a phone number in a gridcolumn tag: A step-by-step guide

I have a query regarding a code line that is used to input a phone number into a designated box. <GridColumn field="phoneNumber" title="Phone Number" editor="text"/> Currently, I am able to enter any text using the key ...

htmlreactjs

How can I display a single quote in my code without using the HTML entity '?

Is there a way to output a single quote character (') in my string without it converting to &#39? I need the single quote for a jQuery function. My current approach involves using C# to loop through an object and build up a string like this: "va ...

c#jqueryasp.netrazor

Initiate CSS3 animations on each individual slide within the slider

I have integrated flex slider into my project. There are 3 CSS3 animations implemented, where the animations work perfectly on the first slide when the website loads. However, upon switching to the second slide, the animations do not start. I am seeking ...

jqueryhtmlcss

Using jQuery to compare the output of a function with another result

My goal is to analyze a list of links and extract the last section of each URL in the href attribute. After that, I want to compare it with the current page's URL. I have a collection of pages stored in a folder named Projects. Specifically, if the U ...

jquery

After implementing ajax jQuery with Laravel 10, this page is experiencing technical difficulties

Seeking assistance from experienced individuals in dealing with Ajax jQuery within the context of Laravel. I have encountered a problem that has proven difficult for me to resolve on my own. Sample html code: <li> <a href="" onclick ...

jqueryajaxlaravellaravel-10

Enhance the URL with a search form for including the 'sku'

Currently, I have a search form on my website that successfully refreshes the page when the submit button is pressed, displaying the table of results below. The URL generated by this form is http://example.com/?txtKeyword=searchterm. However, I am looking ...

phphtmlmysqldatabase

Navigating the techniques of filtering an object with an array

I am looking to filter this object using the aaData array in order to display only unique values. For example, if the first item has the name "testowy2" and the second and third have the name "testowy", I want to show only one instance of "testowy". var j ...

javascriptjquerymysqldatabasejson

Creating a dynamic sidebar navigation that adapts seamlessly across all devices, including desktop and mobile platforms

I am currently using Bootstrap 5 to design a resume webpage. While I have achieved the desired look, I am facing an issue with making the sidebar fixed without overlapping other content when the page is resized to be smaller. Initially, I attempted to use ...

htmlflexboxbootstrap-5sidebarfluid-layout

Only display Jquery Block ui when starting an ajax operation within a function

I've implemented BlockUI to display a loading gif and block the page during ajax function execution. Here's how it looks: $(document).ready(function() { //shows loading screen whilst posting via ajax $().ajaxStart(function() { ...

jqueryajaxloadingblockui

Connecting a custom bootstrap stylesheet to WordPress

I'm having trouble linking my WordPress Stylesheet to a child theme in a different directory/subfolder. The code I placed in the functions.php file doesn't seem to be working correctly. Here is the code snippet: function theme_add_bootstrap() { ...

csswordpresstwitter-bootstrap

Is it possible to make an HTML page permanent and uneditable?

Is it possible to secure my HTML file from being edited or modified, especially in a web browser? Discover innovative techniques and gain deeper insights into web development and website design. Interested in learning more about HTML, CSS, JavaScript, PH ...

javascripthtmlcssvisual-web-developer

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...

javascripthtml