I have a page with the body tag and the HTML tag styled with a css background image. It is a SVG. Now I noticed that when I go to a page that has an IFRAME in it that holds our tiny wysywyg editor in it. The frames body tags ALSO has out site background image and you can't read what you type in it lol. I have tried everything but I can't get the frames background-image to NONE unless I change it for the whole site. to
Related
I have a small chatbox at the bottom of my page which seems to be inheriting CSS style from bootstrap.min.css and that chatbox is transparent which is a nuisance because the underlying text on the page shows through and what is worse, is that hyperlinks on the page are over-riding clickable areas in the chatbox for opening, closing and submitting messages.
I have tried adding CSS style to the chatbox for opacity and rgba. Even tried adding a background image but to no effect.
I have since modified the chatbox to display an iFrame from a different site that does not use bootstrap.min.css.
But even the iFrame page is affected by transparency. I can remove the transparency setting in bootstrap.min.css but that will not solve my bigger problem... I am intending to use this chatbox on several sites and may not have control of the site's CSS.
So I need a way to override the parent site's CSS just for the chatbox.
If that is impossible, then I can weed out the transparency from bootstrap.min.css that is used on my own sites. However I do wonder what is the point of such transparency when it is useless here...
It's a z-index problem which is common when integrating iframes, apply z-index: 2000; (or whatever number as long as it comes on top) on your chatbox div so your chatbox will still stay upfront.
Since you haven't posted any code, I'm not sure if you've tried this or not, but you can use the !important value to override Bootstrap's styles in your custom CSS. For example:
background-color: white !important;
I can't figure out this issue and I have tried looking this up and it is hard to find any one with this scenario. I am using a master page with two content pages. The first content page is default.aspx, of course. The master page has a png that is a banner. This has a rule that makes it responsive in a separate CSS file. This works fine.
For the first content page, I have three buttons that are styled using CSS ( they are custom buttons I made in a vector graphics program that change appearance when they are pressed, all using CSS ) and they are responsive. There is also a listbox that is styled and responsive with CSS.
The layout of the default page is like this: Two div containers: one that floats left and one that floats right. CSS is used to make these containers responsive. In the right div, I have my buttons and they are enclosed in their own divs. So .. and so on. Of course, the listbox is handled the same way with a div that encloses that as well.
Moving on to the second page, I have the same basic structure as the default page. My intention is to have in the right div an image, followed by a text box, then an image, and a text box. The left div will contain the same content that the default page has.
At this point, I have added to the second content page the list box and the CSS is working as expected. The list box looks just like it did on the default page and is responsive as well. So the CSS is working. For the first image, I need a new CSS rule. So I go to my CSS rule and add a new rule .image{ width: 100%; height: auto; } and then I add my image and set it up with the class reference and the image. It does not work. This image is in it's own div. If I change the class of the image to another class that was created previously, the image is responsive. So I can use the banner CSS rule and the image is responsive, I can use the button CSS rules and the image is responsive, it behaves like a button ( clicking on it makes it change its appearance, that kind of thing ), I can even add the rules for the list box and the image is responsive. If I then go back and try to use the rule for image, it doesn't work anymore.
Any ideas on what is going on. It is not making any sense what so ever. I added the rule to the CSS file just like I did with all the other rules but for some reason, this rule is not working at all.
Thank you guys for any help. I can post code if you guys need it, but I don't see how that would help. My image for the second content page is identical to how I did the banner and the rules for the banner and the image are virtually identical, except percentages are different. This is just super weird.
To improve the performance, browsers save the css files in their cache and use their cache. If they don't do that, the browser has to keep loading the css file every time a page is using the css file.
If you clear your browser cache, you will notice that the new style gets applied.
If you are developing commercial software, you probably don't want to tell every user to clear their browser cache and you prefer to force the browser to load the new css file. On the other hand, once the css is loaded you would like the browser to cache it, because it will improve the performance.
There is a trick to achieve that!
Let's say your style file is called mystyle.css and you have a link to the style file in your web site like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css">
To force the browser to load the file again, you need to change link and the standard practice is to use a parameter in the url (usually a version number).
like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css?version=1.00">
Your style file is going to ignore that version parameter but the browser will notice a change in the link and will load the new style file. Basically, the browser stores the link to the file and if you change the version number, since the link does not match with what your browser has in its cache, it will force the browser to load the file again.
I am trying to program a TAB based paging.
My problem is each Tab contains a different background, so when I click on the hyperlink, the new background DOES NOT load, BUT the content loads.
Any ideas?
Code here
http://jsfiddle.net/rgarimella/AnBEc/1/
Tested your jsfiddle, adding !important to your css rules does the trick: http://jsfiddle.net/AnBEc/2/
Edit:
Depending on what effect you are looking for you could also remove the .ui-content part of each rule (so that it's just #services) that would apply the background to the whole page and not just the content part: http://jsfiddle.net/AnBEc/3/
Considering SEO which one is better.
IMG tag inside a tag or giving background image to the a tag.
Please suggest which one suits well for seo purpose.
If image is relevant to content
For SEO - keep image in HTML and give a relevant name to image and describe the image in alt attribute.
If image is purely decorative than keep in CSS.
Edit
And read this article to understand the proper use with link
http://webaim.org/blog/alt-text-and-linked-images/
This is a very specific question for a Google Chrome extension.
http://www.meebo.com/mobile/
This page is where you're kicked to when you go to Meebo.com on an iPhone or Droid phone. But if you notice, the Status box where you can set yourself away or what you want your status to be has white text on a white background.
In order to get a website to appear in a Google Chrome extension's popup window (the one that drops down when you click the icon next to the address bar) that isn't an included html file in the extension, I need to use an iFrame. I know that there's security measures about Cross-Site stuff like javascript and I'm not surprised I'm having trouble accessing the CSS. But there's a class, status, and it's color is white and I need to change that to black. I've tested it with Chrome's Inspect Element window and if I change that, I'll be fine.
I've tried changing the manifest.json file to inject a CSS file using Content-Scripts, but nothing...
I'm new to Chrome Extensions but I have experience doing web development.
What you have to do is to change the DOM inside the iframe, ie to change the style of the text element with javascript.
You can for example, change the 'color' attribute of the text element, or change his CSS class and add a new one.