I want to remove the border on code while using google-code-prettify. I tried the following but got no result.
pre.prettyprint {
border: none;
}
I also tried to remove borders on all pre tags, same no result.
pre {
border: none;
}
I think you need to tell the browser which set of style instructions it should listen to.
The !important property should tell te browser you you want your css to take precedent.
pre.prettyprint {
border: none !important;
}
Related
I'm trying to change the color of the background. However, the background stays white even if I remove the background-color keeps showing me that the background color is white. To make sure that I'm changing the background I opened the style file in the browser but it still shows "background-color: white".
My code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
After adding a background:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #000;
}
The code the browser shows:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: white;
}
Can someone explain why is this happening and how can I fix it.
Try applying the background-color to the body, and not to the * (Universal Selector). The Universal Selector will apply the background-color to every element on the page, which might be breaking things.
If that doesn't work, make sure the css is linked to the HTML properly.
Example of applying background-color to the body
body {
background-color: #333;
}
/* The above css applies a dark gray background color to the body */
If all of the above doesn't work, add your HTML and CSS so I can help further diagnose the problem.
Good luck!
It should provide the background-color:#000 as you have written. There is no problem in that. Try to write the same as in the <head>...</head> section. So that you confirm, whether the issue is not due to some external-css file you are adding.
Also, this issue seems awkward, as I too tried and the browser is able to map correctly whatever is written in the CSS file.
It doesn't matter if you are taking * selector or any other selector. It doesn't make sense, nor does it affect or overrides your CSS.
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
Firefox, since version 23, natively supports the <input type="range"> element, but I couldn’t figure out how to remove the dotted outline. The following CSS has no effect:
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}
Does anyone have any idea how to fix this issue in Firefox?
Example: https://jsfiddle.net/pF37g/
Unfortunately, you can't! (update; you now can)
It's a bug in Firefox and there is no work-around to fix this besides from fixing the source base itself (see below).
Also see Jonathan Watt's blog (who is working on this):
Known issues:
the default CSS styled appearance still needs work, and native theming (giving the slider the appearance of the operating system's
theme) is still to come ...
In a reply to a comment in his blog about this very same issue he states:
Right now you can't - sorry. I've filed bug 932410 to make that
possible.
At the moment of writing there appear to be no progress on this and it's not known when a official fix will be available.
Update
Since this answer was posted the bug has been fixed. You can now use (as stated in other answers, but I include it here for completeness):
input[type=range]::-moz-focus-outer {
border: 0;
}
It can be done with new version of Firefox. As stated here, this bug is fixed. So it is possible to hide outer dotted border. To do so, set ::-moz-focus-outer's border to 0, like this:
input[type=range]::-moz-focus-outer {
border: 0;
}
Here is working example: http://jsfiddle.net/n2dsc/1/
In webkit browsers outer line will appear if -webkit-appearance: none; is set. To remove it, just set :focus's outline to none, like this:
input[type=range]:focus {
outline: none;
}
Here is working example: http://jsfiddle.net/8b5Mm/1/
As Ken already pointed out, there is no way to remove the outline. However, there is a work-around to "hide" the outline if you know the background-color of the parent element. Assuming a white background the following CSS would hide the dotted outline:
input[type=range] {
border: 1px solid white;
outline: 2px solid white;
outline-offset: -1px;
}
Your updated example: http://jsfiddle.net/9fVdd/15/
If you can settle for a wrapping element (it's likely you already have a wrapping LI or P), you can use FireFox-only CSS to position the input out of view and reposition the track/thumb in view.
Note 1 - don't try to use translateX - I think FireFox uses that to actually slide the thumb - so stick with translateY
Note 2 - Be sure to test with keyboard navigation. You should only move the input by the smallest amount possible to get the dotted lines out of sight. If you position it waaay far away (translateY(-1000em)) - then you will break usability for keyboard navigation.
Here ya go:
HTML
<span class="range-wrap"><input type="range" /></span>
CSS
.range-wrap {
overflow: hidden;
}
input[type='range'] {
-moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
-moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
-moz-transform: translateY(3em);
}
http://jsfiddle.net/pF37g/98/
Dotted outline is not an issue, it's browser's way to show the input element is selected. What you can do is set tabIndex to -1 which will prevent your input element from taking focus on tab and, consequently, from having the outline:
<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>
But after doing this you will lose some keyboard accessibility. It is better to have input element keyboard accessible.
Here is the fiddle: http://jsfiddle.net/pF37g/14/
If any custom styling is applied to input[type='range'] then Firefox use a different model (beta) to render the range input.
You can see the 2 different models here:
http://jsfiddle.net/pF37g/75/
Currently I do not believe it is currently possible to have a custom CSS styled input range box in Firefox to adhere to outline: 0; as of Firefox 27.0
To make it complete: The Bug has been fixed and now it's working with:
input[type=range]::-moz-focus-outer { border: 0; }
to remove all outlines from all input-tags use:
input::-moz-focus-inner, input::-moz-focus-outer { border: none; }
source: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7
You can not. It seams to be a bug in Firefox.
It makes two outlines for the range element. One you can influence by css setting and a second, which is resistant against any manipulation.
I set the outline visible to show the issues:
input[type='range']:focus {
outline: 5px solid green;
}
Here you can see it:
http://jsfiddle.net/pF37g/97/
I have little research in config section of mozilla add this too
:-moz-any-link:focus {
outline: none;
}
a, a:active, a:visited, a:hover {
outline: 0;
}
then
:focus {
outline: none;
}
then
::-moz-focus-inner {
border: 0;
}
Here comes the solution
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
A fellow developer has set the following css rule, which must remain in place.
* {
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
This removes the border from SELECT and INPUT fields and makes them look less than ideal. If I remove the border style in firebug then the fields look normal again. Which css rules must I add to revert back to the default styles set by the browser?
Edit: these are the styles I'm trying to revert to (on my computer):
(source: 456bereastreet.com)
I think what your fellow developer was attempting to do was create his own reset (similar to Yahoo Reset, etc). But since he's declaring * instead of specific elements, it removes the border from everything.
You can work around this though and still get the browser's default border back on form elements by changing the * to your most common elements (sans form elements) - it's a bit ugly, but it does what you're looking for:
a,abbr,acronym,address,b,blockquote,body,br,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,i,img,label,legend,li,link,menu,ol,p,pre,small,span,strong,table,td,th,tr,u,ul
{
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
Add these:
select, input {
border: solid 1px; /* or whatever you want */
}
Unfortunately, you need to set the new values. There is no reset value.
If you want to add a border, set the new border style. Or remove the style you posted.