I have an <object> in my page code and my background color is not white. The object is created with a white border, which I don't want.
Any ideas on how to make it border: 0px; or border-color: #whatever;? Neither of those work. Can someone help me figure this out. Thanks
You're probably seeing an outline rule. This CSS should remove it:
object {
border: none !important;
outline: none !important;
}
You should probably get rid of the !important tags once you make sure that works.
When debugging something in the browser, you should be able to see what styles are set within the browser console. In Chrome, for example, you can right click on an element and it will show you exactly what styles are being applied to any given DOM element.
Related
I have a strange issue and I am not sure where to look for a fix. Googling is not leading to any answers.
I have some CSS to make the selected radio button purple. Easy right? However, it is blue. Even though the CSS is clearly in the inspector as purple. Even trying to force style in the browser just to change it doesn't work. Why would this be? I've never seen where it clearly is using the right CSS but not actually rendering. This is happening on multiple browsers.
My code is in Elementor:
selector input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}
Which shows up perfectly in the inspector:
.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}
And shows as what is being computed in console.
background-color
rgb(151, 16, 166)
#9710A6 !important.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb
And yet when I look at it is is blue. Using a color selecting tool it returns:
0075FF - I think it is the default browser blue.
Is there a way to have maybe some JS running or something changing it that would not show up in the console? If it was JS changing it wouldn't the result "computed" value change?
So strange, any ideas or help you can offer would be really appreciated. Thanks so much!
Thanks to Carlton Lindsay for the answer.
It appears you cannot change the radio button directly with CSS. Instead, hide the default button and create a new one using :before to add one back in it's place.
This seems like really strange way to do it. But it is how it is done for now. Hopefully things change soon in the browsers so you can directly manipulate the style through CSS.
I am having a problem, where there is a border(different in different browsers, blue in safari, a dotted black in chrome) around my buttons when they first load. I am guessing it's some sort of selecting but I want to disable it. How can I do so, that there is no border on the initial loading of the buttons. Here is what I mean:
It is called an outline. Try this:
button:focus {outline:0 !important;}
Worth noting that this will become an accessibility issue if removed.
This border is an outline. It's provided by browsers
You can also use:
button:focus {outline: none;}
Click here for more information.
If you want to remove it, use this.
.buttonclass {
outline:none;
}
<button class="buttonclass">Button</button>
If you want to keep it but you don't want that it should be visible, use this.
.buttonclass:focus {
outline:hidden;
}
<button class="buttonclass">Button</button>
However I don't think a button has an outline.
I can't remove inset borders from object elements in IE11. They don't appear in any other browser or version of IE as far as I can tell. See the attached screenshot. Setting border as an attribute or inline style doesn't work... any ideas?
Add border-style: none; to your css for that div.
I had this issue with object images which were loading over script. The object data attribute wasn't defined so it was putting this border around the object. Adding a 1x1px blank image as the data attribute made it happy.
Have you tried:
border-width:none
or
-webkit-border-before: unset;
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .