Issues with CSS & HTML drop down feature on Blogger: Works flawlessly on all browsers except for Internet Explorer, where hover behavior is not functioning properly

I'm currently enhancing the aesthetics of my blog by incorporating a dropdown menu bar using html & CSS.

The code was sourced from My Blogger Lab with some modifications to suit my color scheme.

You can preview the layout on my test site:

I am quite satisfied with how it appears on Chrome & Firefox, as the dropdowns only pertain to About, Images, and Home DIY; the rest are standard links.

Encountering a few hiccups in Internet Explorer (tried versions 7, 8, and 64-bit):

  1. In IE, the dropdown backgrounds appear almost translucent (allowing content behind to show through)
  2. The dropdowns in IE open and close too swiftly, making it challenging to interact with them
  3. Safari seems to disable active links and does not display the dropdowns upon hover

Despite weeks of experimenting with various adjustments and recommendations from online sources, I have hit a roadblock in making the dropdowns function smoothly in IE.

Although I personally don't use IE, a significant portion of my blog followers do, necessitating these alterations. However, I have exhausted my ideas and capabilities at this juncture.

I have successfully fine-tuned the code to achieve the desired appearance (dropdowns hovering over the flag banner in the header) on Chrome & Firefox.

Note: Placing the html gadget at the top of the post section (instead of the header) required some margin adjustments to align the dropdowns correctly with the header image background.

This is what I observe:

The theme used is SIMPLE from Blogger by Josh Peterson. It's one of the limited choices available on Blogger - I haven't made any customizations beyond adding an html widget above the post section and tweaking the advanced CSS settings in the template. The added CSS from My Blogger Lab has been adjusted for colors and alignment to overlay the header, allowing it to integrate seamlessly into the SIMPLE template.

Html for widget:

CSS:

Simple template in Blogger

htmlcssinternet-explorerdrop-down-menublogger

Answer №1

After reviewing your code, it appears that a cleanup is necessary to fix syntax errors in your markup. You can use the following link to check for errors: http://validator.w3.org/check?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Your code contains several errors that may be causing the issue you are facing.

If the problem persists after cleaning up the code, consider treating it as a z-index issue on IE7. To resolve this, apply position: relative; and z-index: 500; to all parent elements containing the menu. Go through each div and add these rules. Since the menu has a z-index value of 500, its parent elements must also have a defined value equal to or greater than the child element - in this case, the menu. This should prevent the menu from appearing behind the content (I have already tested this on your site).

Additionally, there is a 

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
tag on your page forcing Internet Explorer 8+ to render in IE7 compatibility mode. It may be beneficial to remove this tag.

Please let me know if these suggestions help resolve the issues you are encountering.

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

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

csshtml

Text aligned vertically within an element using the table-cell display attribute in the Chrome browser

Struggling to align text inside an element styled with display: table-cell? The issue arises when dealing with multiline text in a tab format. Achieving the correct vertical-align: middle; requires displaying it as a table-cell, which works well in most ca ...

cssgoogle-chrome

Tips on getting your card to stay at the top

Screenshot of webpage HTML (EJS): In the HTML file, look for the section after <%- include("navbar.ejs") -%> inside the body tag. The ".cardholder" contains "anime-card" templates (card.ejs). The first and last div within ".cardholder" are ...

htmlcssnode.jsexpressejs

The functionality of ItemSliding appears to be disabled when used in combination with

Could you please help me figure out why the Me button is not visible? I implemented the ItemSliding component. Here is the link to the stackblitz project. The issue is within the home folder. I am trying to create a list like the one below: UI https:// ...

cssangulartypescriptsassionic3

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

javascriptjqueryhtmlcssrollover

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

Utilizing this jQuery script, I am able to center a website vertically within the browser window if it exceeds the height of the outer wrapper-div, which has fixed dimensions. $( document ).ready(function() { centerPage(); )}; // center page vertic ...

javascriptjqueryhtmlcssgoogle-chrome

Exploring the depths of cURL and PHP beyond the basics

After realizing that my previous question was not quite right, I am back with a more accurate one. This time, I am working with cURL in PHP and trying to access a website. However, every time I change the site, the browser sends a value x to the server. If ...

javascriptphphtmlcurl

The typical actions of the table elements

When I view my table on large screens, the TH elements are displayed at the top. However, when I switch to a mobile device, these THs move to the left side instead. Is this the default behavior of TH elements in tables? I am utilizing the 'responsive- ...

htmlcssmaterialize

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

This scenario is a bit intricate. Essentially, I am utilizing Material Design Lite CSS provided by Google and triggering an AJAX request to dynamically add input fields using PrimeFaces. <h:commandLink value="+ Add something> <f:ajax listener ...

cssajaxjsfmaterial-design-lite

What is the process for setting a background image using two alternate images? (ensure a substitute image displays when the original image is not available

I am trying to set a background image with two alternatives. Below is the code I have been using: <a id="test" style="background: url('image1.png'), background: url('image2.png');">test</a> My goal is to prioritize the fir ...

htmlcssbackground-image

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

javascriptphphtmlcssmysql

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascriptcssreactjsreact-nativestyled-components

jQuery sidebar with a fixed position

Is there a way to implement a sidebar menu feature using jQuery that reappears on the left as the user scrolls down the page? You can see an example sidebar menu here. ...

javascriptjqueryhtmlcss

children blocking clicks on their parents' divs

I previously asked a question about a parent div not responding to click events because its children were blocking it. Unfortunately, I couldn't recreate the issue without sharing a lot of code, which I didn't want to do. However, since I am stil ...

javascriptjqueryhtmlcssjquery-templates

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

javascriptjqueryhtmlcsstwitter-bootstrap

Looking to spice up your jQuery modal dialog with unique and varied styles?

Can anyone explain why the grid displayed in our jQuery modal dialog (jqGrid) appears with different styles, specifically font size, compared to the grid on our main screen? I would appreciate any insights or suggestions. ...

jquerycssjqgrid

Side-by-side division elements in IE7 without using float

Attempting to align two divs side-by-side and centered within a wrapper div has proven to be a challenge. While my current method involves centering the wrapper contents and displaying them as inline blocks, this approach does not function properly in IE7. ...

htmlcss

"An issue with preventing default behavior when clicking on a jQuery element

I need some assistance preventing a JQuery onclick function from scrolling the page to the top. I have tried using preventDefault() without success. You can find the code on this website: Below is the code snippet that I am currently using: $( document ...

javascriptjqueryhtml

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe

Demonstrate a array of values at varying angles within a circle using the functionalities of HTML5 canvas

Looking to utilize HTML5 Canvas and Javascript for a project where I need to showcase various values (depicted by dots possibly) at different angles within a circle. For example, data could include: val 34% @ 0°, val 54% @ 12°, val 23% @ 70°, a ...

javascripthtmlmathcanvasdegrees