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.
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;
I'm trying to make gradient text in webkit browsers using this CSS code:
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.
HTML is as follows:
<p class = "text">Hello world.</p>
Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.
IMPORTANT UPDATE:
I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:
<div class = "text">
<p>First line.</p>
<p>Second, way longeeeeeeer line. </p>
<p>Third line, just to see gradient span over multiple lines. </p>
</div>
Any thoughts why this could be the case or how to overcome this?
I found a simple fix for this
.text, span {
display: block;
}
I know it's an old question but in case someone still needs it: I had the same problem and what worked for me was to add a text-shadow to it and make the shadow transparent.
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}
Note that I added '00' to the end of the HEXA code which leads to transparency if someone doesn't know!
If you code like this <h1>Discover <span>Something</span></h1> then text gradient won't appear in Safari but does appear fine in Chrome and Firefox.
If you do like this <h1>Discover Something</h1> without span tag then it does work properly. I don't think Safari liked tags inside the tag. Nasty bug. It works on other browsers like Chrome and Safari.
If you have a two lines text and in Safari does not works, try:
-webkit-box-decoration-break: clone;
flex or inline-flex are the problems if you are using it.
block or inline-block are fixing the problem
This remains a Safari bug as of May 2018. The gradient properly appears if the text is first highlighted, and then unhighlighted.
I was able to use the following alternative:
.text {
-webkit-mask-image: linear-gradient(blue, green);
}
This is working in Safari 11, iOS Safari 11, Chrome 66, and Firefox 60.
Inspired by https://stackoverflow.com/a/45136579/9772439
I had the same problem with b tag, and solve it with property
display: inline-block;
I had the same issue and it looks like it's a Safari bug.
I noticed that the issue only happens when your cascading elements are block types.
My hack for this went like this
<div class = "text">
<span>First line.</span>
<p></p>
<span>Second, way longeeeeeeer line. </span>
<p></p>
<span>Third line, just to see gradient span over multiple lines.</span>
<p></p>
</div>
The only reason I have the paragraph tags is for spacing since adding a display block on the spans will trigger the bug again.
For me, the easiest way to archive this is drawing text as image, contain shadow... And put it in background css.
If you have tried all of the above and none are working, check to see if you have a Pseudo element on the tag.
Safari doesn't like it if these are static so you'll need to position them absolute.
I have the same issue, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case p.text
I've made this fiddle, to demonstrate my problem and question.
I want to have the div that holds all the text have an opacity so that you can see the background (for some reason the background won't show up, works on my machine).
However, in my example all the text has got the same opacity, and that isn't useful for reading.
So basically, how do you have full opaque text, I assume that any child elements will be set to the opacity setting of the parent?
html:
<div class="mainPage">
<h1>Welcome</h1>
<p>... some text ...</p>
</div>
css:
.mainPage {
opacity:0.6;
}
You want to use
.mainPage {
background:rgba(0,0,0,0.6);
}
where 0,0,0 represent black (255,255,255 would be white then) and 0.6 alpha channel
but it is CSS3 so check for the compatibility. Also if you want to this to work in older versions of IE, you could consider PIE CSS
EDIT: As other have mentioned, there are other solutions possible here. To use repeating transparent 1x1px image as your background (which will not work in IE6 if you care?), there are also some php scripts to include to your css that will generate those images automatically for you.
Or another solution would be to use another div with opacity and position it absolutely behind your content, so that div wouldn't contain your content but anyway would be behind.
Opacity affects whole element, so there is no way to do that just using "opacity".
You may set RGBA color to background (last argument is opacity), use transparent BG image or create another div (wrapper) with opacity.
If you need support old browsers, see fiddle with wrapper:
http://jsfiddle.net/nick4fake/N78G8/
<div class="a"><div class="b b2"></div>My text example</div>
<div class="b">My text example</div>
Here b2 is wrapper class.
Also, check this link:
http://css-tricks.com/forums/topic/css-transparency-in-wrappers/
Two possibilities:
Use rgba colours:
background-color:rgba(255,255,255,0.6);
Though you'll want to check the compatibility of this, as it's CSS3. The only browsers that it doesn't work in are Internet Explorer 6, 7, and 8 (and less), so you might be ok using this - it works in all other major browsers.
Make a semi-transparent PNG in Paint.NET, Photoshop, or some other similar program, and use that as the background image:
background-image:url("./myTransparentImage.png");
This has the benefit of working on pretty much every browser, except probably IE6 and the like as it doesn't support alpha transparency.
You'd probably want to make it a 1px × 1px image, to keep the size down, and then that would tile across the whole element.
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]
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.