Unusual thin border of white pixels on IE 9

Having some issues with border radius in IE-9.

The left border is showing white pixels. Any thoughts on why?

This problem is only in IE 9, other browsers look fine.

Here is the code snippet:

                    <ul class="tags clearfix">
                        <li>
                            <a href="javascript:void(0)">Tag One</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Another tag</a>
                        </li>
                    </ul><!-- tags -->

This is the CSS style:

#article_sidebar ul.tags li {
    background: #000000;
    list-style: none;
    float: left;
    margin-right: 4px;
    padding: 0px 18px 0px 19px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    line-height: 20px;
    margin-bottom: 4px;
}
htmlcssinternet-explorer

Answer №1

@fxg Have you considered creating a Special Stylesheet for Internet Explorer? You may find this article on creating a stylesheet specifically for IE helpful. In this dedicated stylesheet, you can apply unique styles such as:

li{
    border: 0 none;
}

I hope this solution proves effective for your project.

Answer №2

My best guess is that the issue you're experiencing is due to a rounding error. This can occur in situations where the calculated value is a non-terminating floating point number (e.g. 3.3333333...). Depending on how the browser handles rounding, it may result in a visual discrepancy like the one you're observing.

Check the padding values in your code. If your padding-right is set to 18px and there's no issue on that side, but your padding-left is at 19px, try adjusting the padding-left to match the padding-right at 18px and see if that resolves the problem.

Additionally, experiment with changing the border-radius value to a slightly larger radius, such as 3px or 4px, to see if it has any impact on the display.

Make sure to also check if you accidentally zoomed in on your browser. You can reset the zoom level by pressing ctrl+0.

Answer №3

To improve the appearance, consider applying the CSS property overflow: hidden; to the li elements and/or outline: none; to the a tags.

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

Deletion of input is not permitted

Currently, I have a telephone input field on my form that only allows numbers. I have implemented a simple JavaScript code to enforce this validation. However, the issue I am facing now is that the input box cannot be deleted. <form id="aylikal" action ...

javascripthtmlinput

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

Set meanmenu to a fixed position

I am currently utilizing the meanmenu plugin to create a responsive menu for mobile devices. My goal is to fix the position of the menu at the bottom of the page so that users can easily access it. However, when I set the position of the meancontainer to ...

jqueryhtmlcsspositionfixed

More content will not be displayed beneath folded DIVs arranged to stack on mobile devices

On my website, I have two separate sections dedicated to use cases and benefits. Here is the code: .onboardmessaging { min-width: 100%; } .onboardmessagingwrap { min-width: 100%; } .usecase { padding-left: 8vw; max-widt ...

htmlcss

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

javascriptcssjquery-ui

Ways to perfectly align three images side by side using CSS

I am trying to align 3 pictures horizontally, but they keep ending up on separate lines. Here is the code I have been using: HTML <section class="features"> <figure> <img src="....jpg" alt="..."> ...

htmlcssimageflexboxinline

As you scroll, this smooth marquee effect gently shimmers with each movement

I've been trying out this code to create a scrolling marquee text, but the issue is that after 7000 milliseconds it starts to jitter, which doesn't make the text look good. Any suggestions on how I can fix this problem? Let me know! <script ...

javascriptjqueryhtmlmarquee

The CSS property that controls the background color of an element

This syntax for a CSS background property is quite effective: .my-element { background: linear-gradient(rgba(131,131,131,0.8), rgba(98,98,98,0.8)), url('img/background.jpg') } However, I am not looking for a gr ...

cssbackground

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

javascriptjqueryhtmlcss

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

cssmedia-queriesviewport

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

javascriptjqueryhtmlfacebox

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Is the AngularJS Date property model sending an incorrect value to the server?

There are some puzzling things I am trying to figure out. When using datetimepicker, the Date and time selected appear correctly on the screenshot. The value in the textbox is accurate The model's value in console is correct (but hold on a second... ...

javascripthtmlangularjsdatetime

Using class binding for both ternary and non-ternary attributes

Suppose we have a tag that utilizes a ternary operator to apply alignment: <td :class="alignment ? ('u-' + alignment) : null" > This functions as intended since the pre-defined alignment classes are in place, now if we want to ...

javascripthtmlcssvue.js

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

csssvg

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

jqueryhtmlajax

Challenges arise when creating a complementary php script for a natural language form

I'm a beginner at this and all the PHP I've tried hasn't been successful. I've come across examples of Natural Language forms, but none with functional PHP. While I am familiar with PHP in traditional forms, integrating the two has been ...

phphtmlcssemailwebforms