After analyzing my site with the websiteoptimization.com tool, I see that it lists every single css background image, even if they're not applied to any element on the specific page. Is this a bug on their end, or will some browsers load every css image, even if the element they're applied to isn't on the page?
No, browsers do not automatically load all images. However if you want that you could "link" them from your HTML.
You can check this issue with a tool like Fiddler (http://www.fiddler2.com/fiddler2/). It will show you all the http requests browser makes.
Related
I created a content script Chrome extension toolbar by following #RobW's answer to this question.
I'm now trying to get certain elements to overlay on the rest of the page, but currently they are only showing within the iframe.
For instance, an icon is clicked and shows a notification panel/tooltip. As you can see, it is cut off by the edge of the iframe:
Is there a way to change the CSS of the panel to hover on top of the rest of the page despite being in a separate iframe?
BTW, I made the height of the toolbar 143px, instead of the 43px you might expect of a toolbar, just so the issue would be more apparent.
No, I'm fairly sure you can't do that with an iframe-based approach. That beats the purpose of iframe content isolation - imagine the clickjacking possibilites!
You will need to inject your UI into the document itself.
You probably went with an iframe-based approach because of possible clashes with the page's own CSS, for example. Thankfully, there's a modern tool to help with this - Shadow DOM.
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
Is there a way to quickly copy all of the css code of the inspected element in google chrome?
I found that while designing, it's sometimes easier to change the css on-the-fly via inspect to figure out correct pixel distances, rather than changing in the code and refreshing the page.
Does that capability even exists?
thanks to steveax's comment I was able to find the answer, which I will share with you
Once the inspected element has been edited, going to the sources tab and choosing the appropriate CSS where that element is defined, the edited attributes will appear there, which you can copy regularly..
Obviously, a copy straight from the style window would be more comfortable..
Yes I know no one likes iframes, but here's the scenario.
I have a client who has his website that he's never going to change.
He has page that has an iframe with a 680px width and 600px height.
He currently has a website embedded in it that has a width of 950px.
What I want to know is if there is a way (I've searched all over) to automatically set the website to fit into the iframe box?
I have access to the child site but not to the parent, but my client actually knows some html/css so I can build a test link on my server and send him the code (if he needs it) to be applied on his end.
Thanks in advance.
This isn't an "automatic" way, but one thing you could do is apply some CSS to the little page. If the page you are loading doesn't change, you can apply CSS that is specific to that page which will change the elements' widths, and anything else that needs to be changed. Here is an answer on SO that describes just how to do that for iframes.
I am using sIFR on a page which I am loading into an iframe, and using a javascript in the parent window which constantly polls the iframe to see when it changes height (ie. when you click a link in the iframe page and it has a different height than the previous page). Anyways, the problem is that sIFR doesn't seem to show the rendered text until the entire page/script has executed so when the page is first loaded and the javascript is waiting for the iframe to change height, there is no text. As soon as the iframe changes height however (ie. I click a link within the iframe), the javascript finishes and the sIFR rendered text shows up. Is there a way to allow sIFR to render before the page/scripts have finished running?
Put you sifr js and css first of all in <head> before other css and js files
As Jitendra mentioned, loading the files first will help a bit. You can also look into Detecting CSS load.