Troubles with displaying an ordered list on Internet Explorer versions 6 and 7 have

When viewing www.qwibbledesigns.co.uk/preview/aurelius/about.html in IE6 and IE7, the list is shifted to the left and the numbers are cut off near the bottom. Does anyone have any insights on this issue?

Answer №1

From my understanding, Internet Explorer defaults to a left margin of 40px for lists, while other browsers use padding according to w3c recommendations. It's possible that you've reset the margin but overlooked the padding issue. I recommend implementing CSS similar to the following:

ul {
  margin: 0;
  padding: 0 0 0 40px;
}

Answer №2

Have you ever heard of the IE hack suggested by DisgruntledGoat? It involves using '* html' as a prefix in your css definition to ensure that it only applies to Internet Explorer and not other browsers like Firefox.

Here's an example:

* html ul {
  ...
}

This prefix essentially tells IE to 'understand' the css rule specified.

Apologies if this is common knowledge for you already.

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 best way to create space between Bootstrap cards without causing flex-wrap to activate?

Looking for guidance on managing Bootstrap cards with a 2px margin between them. Encountering flex-wrap issues when applying margin classes or styles directly to the cards. Any suggestions on how to handle this behavior effectively? Should I consider ad ...

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...

Manipulate the label content of the last child using Javascript

On my BigCommerce website, I am trying to change the label text of a variable using a JavaScript function since the support team is unable to assist with this. Below is the code snippet that needs modification: <dd class="GiftCertificateThemeList" st ...

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

Solving the enigma of CSS positioning: mastering floats, margin-left/right, and auto

Hey there, I'm having trouble posting an image but here is the link: I believe this explanation will be clearer, D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px)      & ...

Scrolling horizontally in a container using the mouse wheel

Is there a way to enable horizontal scrolling in a div using the mouse wheel or drag functionality with jQuery? I attempted using draggable, but it did not work effectively in my specific code scenario. Currently, I have a horizontal scrollbar. Are there ...

Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels. Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half? Also, ...

Selenium is having trouble finding the link within the table

While writing a Selenium script, I encountered an issue with locating a link in a table on an HTML page. Using "css=table tr:nth-child(2) td:nth-child(3) a" did not work and resulted in a "[error] locator not found" message in Selenium IDE. However, when ...

Conditional Statements in jQuery

Trying to implement a check for the CSS 'display' property being set to "none", then slideDown the element "menuBK". If not, slideUp "menuBK" but encountering an error in my IF statement. $(document).ready(function(){ $("#burger").click(func ...

Why does the sticky navbar not display anything on localhost:4200 in Angular, but works perfectly when placed in a regular HTML file?

I'm encountering an issue while trying to create a webpage in Angular 6. The content displays correctly when I write the code in NOTEPAD as normal HTML, but it doesn't work as expected when implemented in Angular. I am new to Angular and struggli ...

"Clicking on a link inside a div element using the onclick

Hey there! I'm having an issue with a div that contains a link with an onclick event (see the code snippet). Inside this div, there is another link that goes to a different page than the div itself. The code works perfectly fine in IE, Chrome, and Fir ...

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

My attempts to integrate an AngularJS directive to remove special characters from input and textarea fields have been unsuccessful. Despite no errors being reported in the console, I am facing issues with the character count tooltip not displaying numbers ...

What is the best way to create a single title that is expressed in two distinct languages

My website features content in two local languages, but all the titles are currently only in one language. I would like to have titles in both languages alternating, with title1 displaying for 3 seconds before automatically switching to title2. This mean ...

Uploading images using Ajax with HTML and PHP

I'm facing a small issue with a multi-image upload feature. Everything works perfectly when I select multiple photos, but if I upload three pictures and then add another one, only the last picture is taken into account. For example https://i.sstatic.n ...

Designing custom gridviews using CSS in an ASP.NET application with Bootstrap

Hey there, I'm currently working on a post system using GRIDVIEW in ASP.NET/BOOTSTRAP. Since GRIDVIEW is basically a table, I am using templatefild and itemtemplate with table td and tr to make it resemble a BLOG! Everything is going well so far, I ha ...

Issue with Background Color in WordPress Simple CSS PostGrid

Currently in the process of developing a demo website at I am attempting to add a grey border (#eeeeee) around the Post Grid-Elements located at the top and bottom of the page. However, it seems like there is an error somewhere. Can someone help me identi ...

What are the steps to set up the ionic framework on my Windows 7 system?

I am looking to set up the Ionic framework on my Windows system. However, I encountered an error while trying to install it. The warning 1909 appeared stating that it could not create a shortcut for node.js command prompt.ink. It asked me to verify if th ...

The function .css() in jQuery is malfunctioning

This task should be a piece of cake... All I want is to hide the buttons when a user is logged in and display the log out button instead. jQuery().ready(function($) { if ($("body").hasClass("logged-in")) { $(".logged-out-button").css("display", " ...

Conceal table headers on mobile devices for better responsiveness styling

I have implemented jQuery Datatables to display a table and made it mobile responsive. However, I am facing an issue where I want to completely hide the table headers when viewing the table on a mobile device, and show them again on a normal screen. Speci ...

Challenges of Python Web Scraping: Insufficient Extraction of HTML Code

As someone new to Python, I am currently experiencing difficulties with my web scraping code. The script is able to access the website and bypass cookies successfully. However, it is failing to capture the entire HTML code. Here is a snippet of the HTML c ...