An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

There is a peculiar issue with some buttons on a web page where a strange line appears on the right side when hovering over the button. This problem only affects the first two out of three buttons, possibly because there is no fourth button to trigger the effect. The anomaly seems to occur across all browsers.

Below are screenshots illustrating the appearance of the mysterious line.

I have created a JSFiddle sample demonstrating the issue.

You can also view the Stack JSFiddle here:

[CSS code snippet]
[HTML code snippet]

The CSS provided may appear repetitive as it was copied directly from Firebug's CSS window. Due to multiple sources defining styles, repetition is inevitable in our codebase. Additionally, the pasted CSS may seem inverted; this could be due to the evaluation order displayed by Firebug for human readability.

Upon investigation, it appears that the line originates from the anchor tags wrapping the buttons. Removing these anchor tags eliminates the unwanted line. Interestingly, even on the JSFiddle, the line persists regardless of hovering, aiding in easier issue detection. I introduced a new element for further testing, yet the problem remains visible.

If you have any insights on resolving the line artifact or identifying its cause, please share your thoughts.

Thank you, J

cssbuttonhover

Answer №1

To ensure the button inside your anchor tag displays correctly, set the text-decoration property of the <a> tag to none.

a {
color: #000000;
text-decoration:none;
}

Full Code Example

element.style {
    margin-top: 4px;
    text-decoration: none;
    width: 75px;
}
*:before, *:after {
    box-sizing: border-box;
}
*.btn-m {
    background-color: rgb(220, 211, 188);
    border-color: rgb(120, 97, 68);
    color: rgb(69, 39, 0);
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.5;
    padding: 1px 5px;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button, select {
    text-transform: none;
}
button {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 5px;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}
a {
    color: #000000;
    text-decoration:none;

}
body {
    font-family: Tahoma,Verdana,sans-serif;
}
html {
    font-size: 62.5%;
    font-family: sans-serif;
}
<body>
<div style="position: absolute;top: 58px;left: 100px;">
<a href="log.php?Range=Today">
<button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only.">Today</button>
</a>

<button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button">Last 7 Days   </button>

    <a href="">
        <button title="week." type="button">Week</button>
    </a>
    
<a href="log.php?Range=ThisMonth">
<button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button">This Month</button>
</a>
</div>
</body>

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

Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider. The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header ...

cssreactjsmaterial-ui

What are the best ways to stop jQuery events from propagating to ancestor elements?

I have a collection of nested UL's that follow this structure: <ul class="categorySelect" id=""> <li class="selected">Root<span class='catID'>1</span> <ul class="" id=""> <li>First Cat<span ...

javascriptjqueryhtmlcss

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Best practice for showcasing an MVC Form with the use of Bootstrap

I am facing an issue with my form layout while trying to capture user input. The use of Bootstrap is creating two columns for text boxes and their labels, but the alignment goes off track with the last EditorFor element. I'm questioning if I am misusi ...

c#htmlcsstwitter-bootstrapmodel-view-controller

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

When I click on it, it works fine. But I can't seem to get it to work on hover. Can someone help me out? This is the HTML code: <body> <audio autoplay id="HAT2" > <source src="OOOOO_1_HAT.mp3" > Your browser doesn't support t ...

javascriptjqueryhtmlhover

What causes the absence of CSS classes in production while utilizing Tailwind and next.js?

Tailwind version: v9.3.5 PostCSS Configuration: // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { '@fullhuman/p ...

cssreactjsnext.jstailwind-css

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

jquerycss

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

htmlcss

Can a hyperlink open multiple links at the same time when hovered over?

Can two links be opened in the same hyperlink when hovered over? ...

jqueryhtmlcsswordpress

Using Modernizr to determine the presence of nth-child in a test

I'm attempting to utilize modernizr in order to check for browser support of the :nth-child selector, but I am unsure of how to proceed. I came across this particular example on http://jsfiddle.net/laustdeleuran/3rEVe/ which tests for :last-child. How ...

csscss-selectorsmodernizr

AngularJS encountered an unhandled syntax error

My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...

htmlcssnode.jsangularjstwitter-bootstrap

The background image in CSS fails to display on IE11 when applied to a pseudo-element with the position set to fixed

Check out the issue showcased in JSfiddle: https://jsfiddle.net/qjtbchpu/11/ <div id="container"> <article> content here </article> <article> more content here </article> </div> #container::before { ...

cssinternet-explorercss-positionpseudo-element

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

Dynamic content that adjusts based on a multi-row element

I'm currently designing a webpage layout with a calendar on one side and a series of information-divs on the other. In desktop view, I want the calendar to span three rows like so: CAL DIV1 CAL DIV2 CAL DIV3 Right now, I am achieving this using neste ...

csslayoutbootstrap-4sassresponsive-design

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

What is the best way to stop the content in :after from wrapping onto the following line?

How can I add a divider "/" after each li element in my Bootstrap-based menu without it wrapping to the next line? The code I am using can be found here: http://jsfiddle.net/zBxAB/1/ I have tried using inline-block to prevent the slash from wrapping, but ...

htmlcsstwitter-bootstrap

Change the element's color to match the default anchor link

Can CSS be utilized to match an element's color with the default <a> color? If affirmative, what is the method? ...

css