Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence.

Here's an example (you might need to enlarge the view as they are quite small):

This represents the html (I have kept it mostly unaltered from how it appears in the view source to ensure nothing is mistakenly removed): 

<div align="left" class="col-xs-5 col-sm-7 col-md-7 searchresultbg" style="border:0px solid red; margin-top:10px;">                         
<div class="hidden-xs" style="border:0px solid red;"><br />
                          <a href="http://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&amp;toolid=10044&amp;campid=5337720480&amp;customid=999999999999999&amp;lgeo=1&amp;vectorid=229466&amp;item=121697860181" target="_blank">Strange Dragon  vol.3  Hana to Yume Comics / Manga Comic from Japan</a> <br />                      
</div>
<div class="hidden-sm hidden-md hidden-lg" style="border:0px solid red;"><br />                          
                          <a href="http://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&amp;toolid=10044&amp;campid=5337720480&amp;customid=999999999999999&amp;lgeo=1&amp;vectorid=229466&amp;item=121697860181" target="_blank">Strange Dragon  vol.3  Hana to Yume Comi [...]</a> <br />

</div>

<div class="hidden-xs" style="border:0px solid red;"><br /></div>

<div style="border:0px solid blue;">
                             Fixed Price<br />
                             Listed: Jul 07 2015 at 11:07AM<br />                                
                             Time Left: 6d 22h 0m<br />
                          </div>                              

                          <!-- site logo -->
<div class="hidden-xs"><br /></div><img src="/app/javax.faces.resource/ebaylogo.png.xhtml?ln=images" class="img-responsive maxwidth70 bottom-buffer10" />                           
</div>

This issue is consistent across all browsers. Any thoughts on why this may be happening?

EDIT: I have applied a gray background image to the entire row. Here is the css: 

.searchresultbg {
    background-image:url('../resources/images/searchresultbg.jpg');
    border-radius: 8px;
}

I have confirmed that the image is clean.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

It appears that the issue is arising from the use of border-radius causing four rounded corners to come together, rather than a phantom "+" symbol.

Have you tried removing the border-radius property to see if it resolves the issue?

.searchresultbg {
  background-image: url('../resources/images/searchresultbg.jpg');
}

In addition, it is indeed possible to incorporate external CSS in JSFiddle. You can access the External Resources option in the menu or utilize @import in your CSS code, like this:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

Answer №2

To fix the issue, I decided to replace the picture with a background color. Here's the css code that did the trick: 

.searchresultbg {
    /*background-image:url('../resources/images/searchresultbg.jpg');*/
    border-radius: 8px;
}
.container-fluid .searchresultbg{background:#f2f2f2!important;}

After making this change, the annoying plus signs disappeared and everything looks great now.

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

Setting expiration dates for cached images

I am interested in optimizing the loading speed of my webpage by setting an expiration date for images. However, I am unsure about where to specify this. The images on my website are loaded via CSS from Cloudfront using an S3 bucket in AWS. Can you provid ...

cssamazon-web-servicesamazon-s3amazon-cloudfront

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

Utilizing Beautifulsoup to extract elements from Selenium

When utilizing BeautifulSoup with Selenium, I usually start by parsing the entire page using soup = BeautifulSoup(driver.page_source). But what if I only want to parse a specific element from Selenium in BeautifulSoup? If you try the following code snipp ...

pythonhtmlseleniumbeautifulsoupelement

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

javascripthtmlvalidation

The issue of not being able to go fullscreen with a YouTube iframe nested within another iframe

I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...

javascripthtmliframeyoutubeyoutube-api

Mysterious issue with loading images in HTML and PHP

I've been dealing with a puzzling issue on my website design project. The logo image won't load in Firefox unless you hover over the ALT text, then it finally appears. However, this isn't an issue in IE where the logo displays properly. Thi ...

cssimagehtml

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to ...

csstailwind-css

Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

htmlcssreactjsmaterial-uimaterial-table

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

htmlcsswordpresscontact-form-7elementor

Troubleshooting a CSS problem on a table filled with images - See attached screenshots for

I've been working on a project involving my phpmyadmin database generating a series of 6 images on my website. I've placed them in a table, but now I'm facing some challenges - even though it seemed simple at first! The goal is to display t ...

htmlcsscss-tables

Verify the input in text fields and checkboxes using JavaScript

I'm in the process of creating a complete "validate-form" function, but there are still a couple of things missing: Ensuring that the Name field only allows alphabetical characters and white spaces Validating that at least one checkbox is selected, ...

javascriptjqueryhtmlvalidationcheckbox

What is the best way to showcase React Components in a inline format?

I'm attempting to place multiple React Components in the same line so that I can scroll through them later. Unfortunately, React and Material UI are not cooperating. The Card Components consist of a standard div element with text and an image inside. ...

cssreactjsmaterial-ui

What is the best way to incorporate a PHP file into an HTML file?

Below is the code snippet from my index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Voting Page</title> <script type="text/javascript" src="js/jquer ...

javascriptphpjqueryhtml

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Help needed! I'm encountering an issue where mysterious "L" characters are appearing in IE 8. The problem is specifically occurring in the Healthcare Professionals section and the bottom two blocks of the page. Has anyone else experienced this or have ...

htmlcssinternet-explorer-8

The image does not properly scale within the div as it rotates

I am currently attempting to use jQuery to rotate an image, but I am facing an issue. When I rotate the image left or right, a portion of it extends beyond the frame. The image is not resizing based on the CSS properties set as max-height: 100%; max-width: ...

jqueryhtmlcss

Challenges with JavaScript calculations on dynamic HTML forms

Currently, I am immersed in a project focused on creating invoices. My progress so far involves a dynamic form where users can add and remove rows (as shown in the snippet below). I'm encountering an issue with my JavaScript and I could use some ass ...

javascripthtmlforms

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

How do I alter the color of a Vue 3 font awesome icon?

I am currently using Vue version 3.2.1 and have followed the official Font Awesome documentation for Vue 3 found at https://github.com/FortAwesome/vue-fontawesome. I also referenced a helpful video tutorial: https://www.youtube.com/watch?v=MoDIpTuRWfM Des ...

cssvue.jsfont-awesomevuejs3

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

javascripthtmldom