There's a strange drop shadow on my SVG text. The reference guide i bought on Amazon doesn't have any answers. I cant seem to figure out how it got there, and how to remove it. There aren't any filters applied, and the markup matches examples of plain text.
heres the text element:
<text class="noToggle" data-nodetitle="Node 1" lengthAdjust="spacingAndGlyphs" x="510" y="420" textLength="230" fill="#d90000">Node Title Goes Here</text>
If you want to get rid of the white shadow, you can override the jquerymobile css and set it to none, example:
<p style="text-shadow: none">This text used to have a white shadow</p>
I traced the problem to jQuery mobile 1.1. It was inheriting a style rule from the body div where jQm was applying a 1px white text shadow. I wasn't aware that SVG text can be affected by this specific css style rule. Obviously in chrome and safari webkit browsers, it can.
Related
I need to get the area outlined in red in the image below completely transparent. I'm new to this HTML stuff, but I've tried searching for transparency and opacity in the HTML editing section and I don't seem to be able to find the correct bit to edit.
If there's a simple CSS code someone could provide me with that would be even better.
I'm using the Picture Window theme on Blogger.
Thanks :)
The CSS I would use is background-color: rgba(0,0,0,0); (red,green,blue,alpha)
for alpha, 0 is transparent, 1 is solid, so 0.5 would be halfway transparent
If you are unsure where to put this css, you'll need to identify the div; you can use developer tools in most popular browsers to find the ID or Class of the div; right click on it and choose "Inspect" or "Inspect element" or similar.
EDIT:
The div you need to alter is <div class="content-outer">....</div>
add the style background:none; to remove the existing background.
<div class='content-outer' style="background:none;box-shadow:none;">
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
see here
If you want to ensure the box-shadow (fuzzy outline) does not appear on older browsers, see https://www.w3schools.com/cssref/css3_pr_box-shadow.asp for browser specific css. For example for older versions of chrome you would also add -webkit-box-shadow:none;
Update: as it seems, the issue I'm describing in this question only affects OS X browsers.
I would like to change the font style of my input buttons in CSS more or less like this:
input[type="button"]
{
font: italic bold 3em fantasy;
}
Unfortunately, this doesn't work well in Chrome, Safari and Opera on OS X unless I also change the default background-color, which I don't want to do.
See here: http://jsfiddle.net/S7y5B/
So my question is simple: how can I change a button's font without also changing the background color, in a way that all browsers understand? I n the JsFiddle example above, I'd like to have Button 1 look like Button 2, but with the background color unchanged. How can this be done?
After fiddling with it, it seems OSX will change buttons despite normal styling done to them. Properties such as height(even when element is set to display:block), any font property and padding are not rendered. To see the actual styling, the element's border or background must be styled.
It seems that the color and width properties render normally.
Your buttons do look the same.
EDIT
OS.X Chrome:
Ok, I figured it out by myself. I'm styling the button using
-webkit-appearance: button;
The text inside the button is now rendering with the expected font without need to set the background color. The border still looks somewhat different, but that's another question.
JSsFiddle: http://jsfiddle.net/S7y5B/18/
I am inserting images in TD's in a table with
style="background-image: url("my_url_goes_here")
Then I apply a transparent PNG mask in that TD so that it rounds the image corners
(same colour as background corners, and it shows the middle of the picture)
I wonder if i can write the ALT of the image in the CSS part (style = "background-image: url()) as if I am to write the ALT to the mask image (which is what users can save if they right click on the image), Google will index transparent masks with ALT from the image.
If it's not clear what I'm asking, I will explain further, just ask.
Also, a friend of mine told me just minutes ago over the phone that css3-round borders can be applied to all sorts of things, not just borders, but also images etc. It'd be lovely if this is the case, i'm not sure round borders will round images too, never tried it tho' (exception as usual IE, where they show square).
Thanks.
No, you can't add alt to background images
Yes, it's possible - http://jsfiddle.net/TyFM7/
No css does not suppport the alt tag.
As for rounding image corners with CSS that is possible.
http://www.css3.info/preview/rounded-border/
The alt attribute is meant to provide a text-equivalent in the absence of a loaded resource. It doesn't go in background images, it goes on images, areas, etc.
Source: http://www.w3.org/TR/html4/struct/objects.html#h-13.8
As for rounded corners, border-radius works on images as well - even in IE. If you want to see the current best approach to providing styles for this property, check out http://css3please.com.
img.rounded {
-webkit-border-radius: 12px;
border-radius: 12px;
}
You don't need alt tags for background images, as you wouldn't want these actually indexed.
CSS border radius can be added to most things, here is an example of an image with the border radius added:
Example of image with 30px border radius
I'm trying to fill in the content of a text in a h1 tag by an image.
Following my understanding ;-), I'm doing the following in the html:
<div class="image_clip">
<h1>
MY WONDERFULL TEXT
</h1>
</div>
And in the css file:
.image_clip{
background: url(../images/default.png) repeat;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The fact is that it does not yield the expected result... that is the text with the image in it as color.
The image is displayed on the entire background of the div and not only behind the text.
The text itself is moreover still in black.
I'm trying that on Firefox. Don't have other browsers.
Did I missed something?
Tks for the help.
Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)
Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.
Your code does work in Chrome and Safari:
http://jsfiddle.net/7T8am/2/
However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.
Per the standard, the background-clip property (which is implemented without a prefix in Firefox, by the way), doesn't have text value. You're using a proprietary WebKit feature, not a standard CSS property....
You are applying the style to the enclosing div, not the h1 tag. Try changing your selector to be .image_clip h1 {your:styles;}, or alternatively you can leave your CSS the same and apply the class to the h1 with <h1 class="image_clip"></h1>.
To get background-clip:text to give the anticipated appearance in Firefox you could use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - that replaces the CSS with an SVG version in non Webkit browsers. [untested but seen working]
I'm having a problem with some text that is meant to be black. Only in IE7 and IE8 is the text white (in IE6 it is black).
The text is in a paragraph within a slideshow and I've tried all I can think of; pointing at it very specifically with CSS and doing color:#000;. I also tried pointing at it with jQuery to no avail. When I load the page, it begins as black then instantly turns white.
Many Thanks
I finally cracked it! It was to do with a CSS opacity filter. It's strange though because the opacity filter was set to the element's sibling.
ex:
<h3 (opacity set on bg of this, given height, absolute position etc) >
Bla bla bla</h3>
<div (absolutely positioned above h3 sibling) >
<div>
<p>Problem text here</p>
</div>
</div>
I tried setting the z-index of the div to be on top of the h3 but it doesn't work in IE8 and 7. Anyway, applying filter:none; in my IE8 stylesheet HAS worked! :)
try giving the p tag direct styling
<p style="color: #000 !important;">hjskhjakfhjkshfjdhkja</p>
Okay maybe another try:
You said it switches to white suddenly... Do you have some code in your jQuery file, that triggers after the page is loaded completely?
And another way to find out where the problem is located: disable js or css in the development settings and see what happens.