I'm working on a cross-browser bookmarklet where I need to inject my own style sheet into the page as well as various divs, etc. I've got it working everywhere but IE so am now attempting to debug some of the styling issues there.
I'm adding my css to the document after a user clicks my bookmarklet as follows:
if (document.createStyleSheet){
document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
$('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}
The file is being fetched and applied to divs, etc. I create on the page, however when I inspect the element in IE 9 Developer Tools it does not show me ANY properties from the stylesheet I added dynamically, only those in the style="{}" attr.
Also, mystyle.css does not show up in the dropdown on the CSS tab, yet it does have a corresponding element in the head and styles in it are being applied to the dom correctly.
Any thoughts on how to force the dev tools to recognize my new sheet? It is infuriating to attempt to debug css w/o being able to manipulate it in-browser directly.
Did you click the refresh button in developer tools? It doesn't refresh the page, it reloads the dom from the current page.
Related
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
How can I easily copy the whole CSS file a website uses to stylize HTML with Google Chrome, Firefox, Safari, and Opera?
With the web inspector, I can see the css styles applied to an element, but I can't see the big picture of styles applied to the whole HTML document.
Can you show me how can I do this?
For chrome you can use Quick Source Viewer to see all CSS, whether in the body or the head, whether in the served HTML or injected at runtime.
It is better than the dev tools as you don't have to go looking for the style tags, and saving them is just a right click on the link.
The answer given by Bobby Russell is not correct in this case.
Just follow the steps:
Open the Firefox and type google.com in the url
Now Inspect the googlepage with the help of firebug.
You can see in the attached image how to select the css file
Right click the page and view the source.
Ctrl+F link rel="stylesheet" type="text/css" href="
Follow the link
See the CSS
Not too hard...right?
It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?
In my case what I wanted to do was apply the following style rules:
br {display: none}
hr {margin-top: 20px}
font {font-size: 18px}
To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.
The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.
There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):
This will create a new style block which will allow you to define the selector yourself:
This is handy for little amendments on the fly, however it doesn't work well for CSS3 media queries that need extra curly brackets, or for pasting whole sections of CSS in to test.
The solution to that is to first click on the + button to add a new style, then hit enter (or click in the adjacent whitespace).
This will now show a link to the inspector stylesheet called inspector-stylesheet:1
If you click that link, it opens a whole live stylesheet that you can write complex rules in, as well as paste a whole external stylesheet into for testing.
Try using CSS Brush, a chrome plugin to create CSS live. You can create selectors from the page. You can have the complete CSS path or filter it up to make a shorter one. The context-sensitive menu is quite helpful while editing CSS properties live. You can even switch on/off properties or selectors.
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones
I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.
What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.
The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)
Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?
What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.
i've always used print preview, never had a problem with it. just open it up in IE; i'd target it with conditionals, but "hacks" work just as well.
you're seeing differences....what media attributes do your other link elements have? if you have one for all, switch it to type="screen, projection">