I'm using Polymer and paper buttons from it to make my something like website material. After I load webcomponents, it looks exacly how it should in firefox only, and in chrome/ium it's to high. (all newest versions)
Chrome - win8.1 (shot using Browserstack, but chromium under linux looks like this too.
Firefox 30 - win8.1
I don't have access to IE, and in browserstack it seems that it misses loading of webcomponents to time when screenshot is took.
Source code: http://pastebin.com/impPE91t
You must explicitly specify that body is unresolved on initial load (until Polymer took care about) to prevent FOUC issues.
So, instead of
<body>
use should use:
<body unresolved>
UPD And instead of
<style>
use should use:
<style shim-shadowdom>
Live preview: http://plnkr.co/edit/rXdcULMrxkVidn9ZXYfr?p=preview
Hope it helps.
Related
Im having a few issues with IE and firefox css
go to http://www.chriscaplan.com/KEW/
have a look in chrome that is displaying correctly
then have a look in IE or firefox it doing some weird stuff.
is there something im doing wrong ?
can any one help???
You have 2 style sheets working against each other:
skeleton.css
style.css
Replace the skeleton.css with the latest version and run it in IE and you will see. I switched your version with the latest and it started to work on IE.
Your method for clearing floats is not working.
If I were you, I would take some time to look at multiple examples on live websites of how people have put together their sites' headers. Right now the structure and styles on your header don't seem to follow normal design patterns. And by normal, I mean common, well tested, typical for a reason, etc
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.
Users report to be using either Chrome or Safari on Windows, so this may be an issue with webkit.
Here are a three screenshots that have been taken of this occurring on https://squareup.com:
The pricing page on our current site:
Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with #font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.
It may be something related to the character encoding. Try explicitly specifying the encoding by putting this in the <head> of the page:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
it's a bit of a stab in the dark, but have you considered re-generating the #fontface files, just in case there's some form of corruption which only surfaces when viewed in certain WebKit browser versions?
If you have one, try running a TTF through the FontSquirrel fontface generator:
http://www.fontsquirrel.com/fontface/generator
Maybe its the custom fonts acting up? When I view your site in firefox it says its in Helvetica Neue but in Chrome it says ag1, agb
I don't have a surefire answer for you, but it looks like you're using the Modernizr class and looking at your html node in Chrome it has the js fontface class applied to it, which suggests custom font-face problems.
they probably have clear type turned off. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx
It seems to me that the texts in question have text-shadow applied to them. This is pretty bleeding-edge, experimental, demanding, unreliable stuff, for little if any visual value (eg white shadows on a white background).
There is a simple answer to this - your css code is representated prior to your server side processing. I bet your using some type of css php or repository for serving up your style/css/markup/jquery or external source for that page.
I'd suggest you put in some wait states and checks for post process or check your ajax/xajax methods. :)
I hope that helps.
I had same issue and figured out that the problem was with font-face. Among the multiple font source files second preference was for "svg", changed to truetype solved the issue.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html