I am currently transitioning a site from one host to another. The original .swf files I am trying to replace but for some reason there is a strange looking border around the images. Can anyone explain why or how to fix it?
Here is the site that is currently being hosted where the header image .swf file is displayed properly:
http://www.waimeasmiles.com
This is the site under the new host where the strange border is:
http://waimeasmiles.com.192-185-7-17.secure22.win.hostgator.com/smile_gallery.asp
Thanks for any help.
That's a weird little border alright. I've glanced over the code and didn't see anything glaring. I can tell you that the "border" you're seeing is the swf's declared background color. (One black, the other white.) It's as if the swfs have a 1px offset but from what I can see nothing has changed regarding their embed or styles.
In fact, one of the only differences I noticed while scanning your code was:
The original location's html has a closing paragraph tag at the end of the file (outside the closing body and html tags) but it seems to have been removed from the new location's html.
Errant or "catch-all" closing tags are bad, mmmk. I can't think of any reason this would affect the flash, but considering the heavily nested, difficult to read code on that page, I might try adding it back just for the sake of having tried it. ;)
Aside from that you may want to try "zeroing out" some elements in your css to see if that helps. Something like:
div, object {
margin:0px;
padding:0px;
border:none;
outline:none;
}
Related
I’ve got a tricky issue going on that I can’t seem to figure out. It’s a lot of different files so let’s start without any code or file docs added.
So I’ve got a SVG image with a lot of square paths all over it. I placed an Square image over one of the square paths in Inkscape. Then I embedded the SVG file into HTML, where I think added a link to that path w/ image. I was having no issues adding the links or anything and it was working just fine, but now it seems as if the image is canceling out the link. Before the link worked just fine but when the image loads over the square it acts as if it’s covering the link. Before the image is fully loaded into the browser the link works and is accessible. But once the image loads on top of that path with the link it covers it and doesn’t work anymore.
Is this common and am I dumb? Seems like I’m just missing something here. Need to basically add the image somehow without it covering the linked path underneath.
Please help!!!
You have probably already found the answer. In SVG all elements are drawn on top of all previous (so the order of the elements in the file matters).
If one element completely covers the other below him then it will essentially block its interactive events. The solution is to notify CSS engine to drop through any pointer events for this element (or elements with same style) using
.nopointer { pointer-events: none }
in the section of the SVG or in the wrapped HTML CSS style section.
For the links to work for SVG elements - since you can add a link attribute to SVG elements as well, e.g. if you would have SVG IMAGE elements overlaid on your rectangles - don't forget to add the XLink namespace in the SVG root element declaration.
First of all, let me preface this by saying I am NOT trying to apply additional CSS to the contents of an iframe from the parent document. I am having issues with a perfectly working document that when displayed in an iframe, the styling breaks. I only say this because whenever I google this issue that's all I get.
I have an HTML document that works and displays perfectly fine when viewed in a browser by itself, however I need to show this content in an iframe. The issue is that somehow, it seems like it's randomly picking and choosing which CSS properties get applied.
For example, if you check the fiddle linked below and inspect one of the list items in the iframe, you can see that the li tags have a border-bottom set. However, if you look at the .service ul li selector in the code, you'll see that there is actually a border-left and border-right there as well which are being ignored. This is only one of the many weird things happening. If you inspect around the document you'll see more instances where this happens.
I've never seen anything like this and it makes no sense at all. I can literally see elements in the inspector where some CSS properties from the same selector are working, and some are ignored. This document displays without issue outside of an iframe.
fiddle
BTW the code is loaded from a data string rather than a URL because it's rendered from an ejs template and it is not served on a public route, nor do I want it to be. However this should be irrelevant.
There is a conflict with the hash "#" symbol in your css. Switching your hex color to red fixes the issue in your fiddle. You will have to come up with another way to add the color without introducing unwanted characters inside your iframe html code that is inside an attribute.
I am using google speed insight for improve my site.I have problem in fixing "Eliminate Render blocking CSS".I have moved my CSS to Footer.But,still i having this error.Anyone can help to get rid of the issue?
Please move your CSS to the <head></head> or otherwise to the top portion of the document, not the footer. CSS is processed first and without being able to process CSS, certain items like backgrounds will not load.
Without having the CSS at the top, your browser will first render raw HTML markup (unstyled) and only after hitting the bottom of the document will it finally learn that styles or an external stylesheet exists.
Basically, in IE11, when you try to print preview (or print, for that matter) this page (and a few others on this site), the page never renders in the preview pane and the number of pages climbs up infinitely: http://www.greatjakes.com/recent-work/
This bug can also be found on pages like these:
http://www.greatjakes.com/news/
http://www.greatjakes.com/news/kegler-brown-website-honored-as-one-of-the-top-sites-of-2014/
http://www.greatjakes.com/blog/the-disappearing-homepage-traffic-is-down-17-on-homepages-of-law-firm-websites/
I've only been able to experience it in IE11. IE8 is fine.
It is not JS-related. If you remove the JS from the page, it still occurs.
If you remove the CSS entirely, it goes away, but that is missing the point.
If you remove (using in-browser developer tools) the HTML elements within the #content-inner > .page block one by one, you'll find that the page actually prints properly when you reduce the number of elements down to about 5 (3 in some pages).
Other than that, I have no idea what is going on! Any help would be appreciated.
We managed to narrow the issue down to a single CSS rule:
#footer {
display: inline-block;
}
We solved the problem by changing "inline-block" to just "inline" within the print-only CSS - but that won't help others fix their own problem because the bug probably manifests itself based on a number of random circumstances. It seems the key was to narrow down the cause. To do this, I simply deleted chunks of CSS until the page actually rendered in print preview. Once I deleted the chunk that was causing the problem, I restored everything and then worked within the critical chunk and deleted the CSS rule-by-rule until it worked. Once I figured out the exact line that was causing the bug, we changed the rule within the print-only CSS (no need to change how it looked in the standard CSS).
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.