I'm aware that an iframe can't inherit the css styles of the "main" webpage, but if so I am confused. I have a main page whose background is plain black, with white text. The iframe doesn't have a background colour specified and yet it is black, the same as the main page. However, other css properties in the main page have to be defined separately for the iframe if I want them to be used. Why is this?
If you do not set the background of an HTML document (by setting it on its html element or its body element), the browser default will be used, and it can be expected to be the initial value, transparent.
This means that for a page embedded in another page with the iframe element, you can expect the background of the embedding page to shine through.
You can use Developer Tools to figure out where the black background is coming from. (It's built into the browser.)
If you are using IE or Chrome, you can just press F12 on your keyboard and then use the element selector (top left) to select the IFrame. On the left you will then find all the CSS styles that are applied on that IFrame.
This will give you an insight on what's happening and also give you a new priceless tool to debug in the browser.
Note: If you use firefox, you will need to install firebug.
This can also come useful.
Precedence rules in CSS (1 is most Precedent):
User defined style
Embedded or inline style sheet
Internal style sheet
External style sheet
Browser default style
This may be Firefox specific. See here and here.
Related
I have a page, all styles are authored using em unit for sizing. I am facing a strange issue in IE9.
I have a requirement to have custom zoom buttons. By clicking on that button, I am increasing the font-size of body. Eg from 1em to 2em and all child elements gets the higher inheritance and zoom is applied.
But whenever zoom is applied, texts are hidden in SELECT and INPUT fields. This gets fixed as soon as you interact with that element - that is as soon as you focus the cursor on that element, everything looks okay.
See this picture:
What could be the issue? How I might fix it?
Please note, I tried making a JS fiddle, but no success on reproducing the issue. A clone of what I have in real app can be seen here: http://shekhardesigner.github.io/IE9-EM-Sizing-ZOOM-Issue/
Make sure you have correct Standard Doctype Rendering, also you could add
"<meta http-equiv="X-UA-Compatible" content="IE=Edge" />" inside the head tag. It helps to display the webpage in edge mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
I use chrome all the time when developing my sites, although recently when inspecting elements randomly the style section of the editor will disappear and just show me the padding border and margin section and not the actual style of elements anymore. I've attached a picture of what happens. Does anyone know how to fix this?
On this site you can read: "[...] if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want."
Is there another solution to emulate Webkit´s behaviour?
I am having issues with overlaying divs with transparency and being able to click on both layers in Chrome (but not IE).
In my search for answers I found the following example to illustrate:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
The source for that page is commented to explain about transparency.
If I view this page in IE I can highlight (ie interact) both the text in the box("Here is a div with...") AND the text at the top ("This DIV is overlayed on..."). However, when I open the same page in Chrome, I cannot select the text at the top.
This highlights the issue I am having in using iframes which contains links, but I also want the page containing the iframe to also allow links to be clicked. The transparanecy works in Chrome in as much as I can see both sets of links, but can only click those on the top layer (ie the iframe). The top iframe allows me to see what is behind but not interact with it.
I know about pointer-events:none however, that then stops the links on the iframe. I can basically get it working on the background html OR the overlying iframe but not both!
Hope this all makes sense and thanks in advance.
It seems that the solution specifically for chrome is using the css:
div#parent, div#parent div {pointer-events:none;}
meaning Div, and all children div as well should enable clicking through.
I found the solution here:
Click through transparency in Chrome
It's pretty well known by now that you can style scrollbars using the webkit specific CSS tags (::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment, etc. ). However, I've noticed that I cannot style the scrollbars attached to iFrames.
Question: Is there a way to access and style the scrollbars on the iFrame using webkit? (Yes, I've actually got a particular scenario where I'd like to be able to do this.)
Thanks much in advance for any help!
The iframe scrollbars are actually part of the document inside the iframe. As a result, you have to set the scrollbar styles in the document you are loading into the iframe, not in the document that contains the iframe.