I'm working in an Angular 8 project.
I have an iframe. it looks like this:
As you can see there is a black "border" around the document. I say "border" because it might actually just be the black background the iframe shows the document on top of.
I want to remove this black bordering, to get a result that'll be more like this (basically I want a seamless sort of style for the iframe):
I've read through the answers regarding this here, but none of them seem to work, and most of the answers are years old.frameBorder doesn't work because it's deprecated. Setting the style of the iframe to have no border doesn't remove the black lining. I also tried to set the background color to not be black but that also didn't work. seamless is also deprecated.
How can I remove this black lining?
Any help would be appreciated. Thank you.
Here's some code if it helps, but it's just an iframe.
<iframe [src]="myURL">
Sorry your browser does not support inline frames
</iframe>
Related
I'm embedding a YouTube <iframe> in my website. I would like to delete the gray gradient shadow under the title of the video but can't seem to find how.
I did a lot of research on this but found that you can't remove the title anymore. I was wondering if you can still remove the gray shadow under the title. I just want the video to look clean with a play button and I'd add a drop shadow behind it. I need this because this is in line with my design of my website.
Playing with inspect element I found that .ytp-gradient-topis the class that causes the gradient shadow, I just don't know how to get rid of it.
Any help is appreciated!
Gradient shadow I want to remove
You can't change the CSS of an element within the iframe due to the same origin policy.
At the .shadow class add text-shadow:none and remove the remaining tags that are not working. There are no shadows for that iframe after you add this !
Hope this is what you are looking for...
I want to render a div backward, and then render the table cells inside it forward. I prepared a demo here: http://jsfiddle.net/djsvL/3/ which works in my browser (chrome).
However, it doesn't work in IE 8. From what I've seen so far, I can flip the text or image within a div or cell, but I can't seem to flip the entire layout (for instance, notice how the table cells are reversed).
Is a trick like this possible using IE8's filter:fliph ? If so, what am I doing wrong or how can I do this?
Edit: Here is a screenshot of what I see in IE8: http://tinypic.com/r/2e4yw3p/6
The answer was to set a background color.
IE does not handle transparency well, it uses black instead of transparent, and the box technically has a transparent background.
The website for people who want to see it live:
Click here
Bug picture is here: Bug Picture (JPG)
Basically, I made a table. The first 3 rows in top contains a background image and set a height to 90. Other rows are set to 50 height and contains no background image.
However, although I applied background image to TR, Chrome keeps applying background image on each TD. See the picture, you'll understand.
I've tried several things like moving image to different class or give it additional attributes like no-repeat.
What may be causing and how can I solve it?
Are you sure you haven't written the same background-image style for all class in the CSS?
Try creating an individual class for the first of the every file and it should work alright.
In addition, as an alternative you can try setting the image as and putting it background with the position:absolute and then changing z-index although I wouldn't recommend that one.
PD: I wasn't able to check that background-color code on the Website because it wasn't there. (table was different from the one in the picture I mean).
I have a page where the body is set to a background colour. I have a fixed-position footer that is above some text that scrolls behind it.
I have used a css3 gradient to attempt to create a sort of fade effect, but there seems to be a brighter line occurring somewhere along the gradient. Any tips to remove this line would be greatly appreciated. Ideally, I would like to avoid using images as the colours are changing dynamically across various pages, so it would be nice not to have to create a new background image for every colour.
I have created a jsbin to demonstrate:
http://jsbin.com/okedut
I also took a screenshot and increased the contrast/size in photoshop which confirms there is indeed a line appearing for some reason:
It seems like a browser bug when you are using rgba values.
The effect that you want to achive can be done with CSS masks.
http://www.webkit.org/blog/181/css-masks/
For FF you can use a SVG solution:
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
I have a text field, and it's good everywhere except Opera, where it takes the color of the background.
How can I make just the inside white? Setting background(-color) to white makes the entire square element background white, which is not what I want.
The cornering is border-radius. No IE hacks needed :)
No specific CSS is used for the other browsers, it just works, in that it was always white.
Should've posted the link earlier, but the page in question is http://blog.darkhax.com/
I can't see anything wrong - I've set up a simple test here: http://jsfiddle.net/ZxR5k/1/, which works fine on Opera 10.6. The border radius property works as expected.
It appears from the image you have up there that you are applying the background color to the parent of the input element. That may be the problem.
How are you creating that curve? Is it with border-radius? If so, background-color should do it (though you say it doesn't).
If it is an image, can you fire up the image in your graphics program and give it a white background?
What CSS do you use that works in every other browser except Opera?