The website menu appears a bit quirky on all versions of Internet Explorer prior to IE 8

Embarking on my journey with CSS, I have successfully coded my first website. Although I must admit that I am still learning the ropes when it comes to CSS. I have come across information about special XHTML & CSS coding required for older IE browsers, but I am unsure which parts of my CSS code are causing compatibility issues.

You can view my website here. The issue lies within the top and bottom navigation menus on all pages, excluding Blog and Moodle (which I have yet to update). Can anyone provide some guidance on identifying the problematic sections that need to be isolated for IE?

Your assistance is greatly appreciated!

cssinternet-explorerxhtmlcross-browser

Answer №1

To optimize your website's navigation, follow these three steps:

  1. Make sure to use a strict doctype at the beginning of your page. Currently, you are using a transitional doctype. By using a strict doctype, Internet Explorer will better conform to CSS standards.

  2. Apply the following CSS code for your top navigation list items:

    #topnavcontainer ul li { display:inline; }

  3. Implement the following CSS for your bottom navigation list items:

    #bottomnavcontainer ul li { display:inline; }

Answer №2

Here is an alternative solution that can work regardless of the doctype used:

#topnavcontainer li {
    display:inline-block;
    zoom: 1;
    *display: inline;
}

To briefly explain, using inline-block allows you to style list items as if they were block-level elements, giving them width and height while still being laid out inline. This method offers advantages over using float: left, such as the ability to apply text-align to the parent container #topnavcontainer for aligning navigation left, center, or right. Vertical alignment can also be set, although it may be a bit finicky at times.

The additional lines of code, zoom and *display, are tricks to ensure compatibility with older versions of Internet Explorer. For more in-depth information on these hacks, searching Google for "hasLayout" and "css star hack" will provide further insights.

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

Utilizing CSS for multiple carousels while applying unique styles to each one individually

I am currently working on modifying the code below so that it will only execute when a specific class is linked to the carousel. There are multiple carousels present on the same page. @media (min-width: 576px) and (max-width: 768px) { /* Display the 3r ...

css

Unable to modify CSS property following AJAX request

I'm currently making an ajax call and attempting to add a class to a DOM element, followed by changing a property value of that class. Although I am able to add the class successfully, I am facing issues when trying to change the attribute. <scri ...

javascriptjqueryhtmlcssajax

Tips for preventing text from shifting once a border has been applied

Is there a way to create a navigation bar that adds a border upon hovering without the text shifting every time the border is added or removed? function navigateToHomePage(){ window.location.replace("..."); }; $(document).ready(function(){ $(".n ...

javascripthtmlcss

Personalize the hover effect of CardActionArea

I'm attempting to personalize the hover effect of material-ui's CardActionArea for a specific component in my React application. Unfortunately, I am struggling to locate detailed documentation on how to style it effectively. Even after experimen ...

cssreactjsmaterial-ui

Choose a node from descendants based on its attribute

I am working with an interface that switches between displaying different div elements. Each div element has their children arranged differently, and when the switch happens, I need to access a specific child node of the newly displayed div. However, I fin ...

javascripthtmlcss

Creating a CSS dropdown menu where the child elements are made to match the width of their parent elements

I created a three-tier CSS drop-down menu that is functioning correctly, except for the width of the second and third tier list items. I've spent hours tweaking the code but haven't been able to achieve the desired look. What I'm aiming for ...

cssdrop-down-menu

"Comparing Bootstrap 3.x.x and Alpha 4 - Unveiling the Wizard's Flaws

I recently created a Bootstrap 3.3.1 wizard using Bootply. However, upon trying to embed it into a site that runs Bootstrap 4.0, the wizard breaks. This has led me to wonder if the wizard function is no longer supported in Bootstrap 4.0, as the appearance ...

htmlcsstwitter-bootstraptwitter-bootstrap-3twitter-bootstrap-4

How to center the navbar in Twitter Bootstrap when it switches to two rows in responsive mode

I am facing an issue with my navbar that has dropdowns. When the navbar is on a single row at full screen size, I have managed to center it. However, when the screen size is reduced and the navbar expands to two rows, neither row appears centered. How can ...

csstwitter-bootstrap

Box surrounding the image with a shade of gray, all thanks to

Despite trying to set "outline: none" and tweaking the border, I'm unable to resolve the issue. For reference, you can visit the page here: . I've shared the link because I'm unsure of what exactly needs fixing or adding on the page. Any gui ...

javascripthtmlcssbootstrap-4

I have implemented a custom-built sidebar component and I'm unsure about the process of adding data to it

After successfully incorporating this SideBar into my Vuex/Laravel project, I encountered a problem. The example code provided used: <div :class="$style.sidebar"/> However, when I tried to modify it to: <div :class="$style.sidebar">Content&l ...

htmlcssvue.jsvuexsidebar

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

javascriptjquerycsshtml

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

htmlcssimage

Can you suggest a method to align this form to the center?

Take a look at this image Hello there! I am trying to center the login form on my webpage and I have added this code to my index file: Here is the complete code snippet: <section class="row" justify-content-center> <section class="col-12-sm ...

cssbootstrap-4

Instant webpage updates upon editing CSS/HTML live

I recently watched a tutorial where a designer was updating CSS with live browser refreshes. What stood out to me was that the browser instantly showed any changes made to the CSS or HTML without needing to manually refresh the page. I am using a Mac with ...

htmlcssmacossafari

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog

Enhance your table with jQuery for expanding and collapsing views with just a

Interactive Table Display I am looking to create a table that shows more rows when the "View More" button is clicked. Once all rows are shown, the button text should change to "View Less" and clicking it will hide the extra rows. The functionality should ...

javascripthtmljquerycss

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

javascriptjquerycsshtml

Create equal height card headers in Bootstrap4

Imagine a scenario where you are using Bootstrap 4's pricing template and the card headers have varying text lengths, causing their heights to differ under certain screen resolutions. The challenge is to ensure that all card headers maintain a consist ...

htmlcssbootstrap-4

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss