When viewing http://adam.inbulgaria.org in Firefox, it displays as it should; in Chrome and Opera, however, the floated image containers misbehave. I'm sure this has to do with my use of experimental properties (rotation, transitions on hover), but what can I do to make it better?
To clarify, in Chrome 17.0.963.56 m, when hovering above the images, some empty space appears under them. In Opera 11.11, there's space to the right of the images, even when not hovering.
It shows up like it should in Chrome 17.0.963.56 on Mac. The only difference i can see is the font size + the horizontal bars look different.
Related
When trying to apply a "stripy" border-image to a text input field it breaks in Mozilla Firefox under certain parameters.
Take a look at this jsfiddle: http://jsfiddle.net/sxpL9zw1
As you can see the page renders a simple text field with a black stripy border around it. This fiddle actually works just fine in any browser I've tried.
However, things get really weird when I run the exact same markup on my host or on localhost: http://test.tonybogdanov.com/border-image-mozilla-issue/
Here's what I see when I open the URL with the latest Mozilla Firefox (35.0):
As you can see the left and right borders render properly, but the top and bottom ones are somehow "solid" looking. I've also tested this in IE10, Chrome, Opera and Safari on Windows and they all show the border just fine, except Firefox.
Furthermore, when I increase the border-width above 9px the issue disappears, which also happens when I remove the width property.
Any ideas what might be causing this or why can't I reproduce it in a jsfiddle?
P.S. I also tried this by drag-and-dropping the HTML file in Firefox (to rule out any host-related issues) and it still fails. Here's a zip to try it yourself: http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip
Welcome to one of the most counter-intuitive bits of CSS.
You can use this tool: http://border-image.com/ with your image and work out what the correct offsets and border sizes should be. (You can preview the border around the CSS text at the bottom)
Good luck
I have a site that works fine in Chrome, Firefox, IE7-11, android, iOS (both ipad and iphone) yet for some unknown reason all elements except the header and rotating banner are invisible in Safari and only Safari.
The elements are all present and when inspected the outlines of each individual elements appear.
If I disable CSS the elements all appear and are there.
As I scroll through the page, which for the post part is just blank white space occasionally some of the elements will reappear in a very glitchy way, perhaps just a thin vertical stripe of the element will be visible then it will disappear.
I can't make the site public at the moment, but here is a screenshot showing the issue:
Has anyone had something similar happen before in Safari, or have any suggestions?
It looks like the div is hidden.
Add z-index:1; to the div with tdp_row_fullwidth center-yes light-no class and the div shows up in safari for me.
What worked for me was the font-family that was being used was not loaded in Safari, once I changed it, the element "showed" up.
http://home.comcast.net/~maria.pettit/healthmutt/
It looks fine in the most common browsers (Chrome, Firefox, Safari & IE) and in Chrome on a GN, GS3 and an iPad it looks fine, but the main content text is oddly left-floating on the default Android browser (except for that one float-right image).
It creates about 25% white space on the right side of the content box on the default Android browser, and it doesn't make any sense at all. Also, why does that one image (Healthmutt05edit.png) float correctly? The text should be over there with it.
I've tried about everything to make it work. Any insight is greatly appreciated.
In my Android phone, if I zoom out the page it rearranges it self to what it's supposed to look like.
Also, I would recommend putting that text in a paragraph <p> or setting it's div to float:left. That way the text doesn't have to assume where it's supposed to go, instead you can tell it through css.
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input