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
Related
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.
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
I am having a real hard time developing for Internet Explorer.
Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.
Some of the things not working correctly in IE9 on this page...
The navigation bar, the links are stuck at the top in IE instead of vertically centered
The navigation bar does not have the box shadow applied in IE
The sidebar and content boxes do not have either the shadow or beveled corners in IE
The Tag boxes do not have the round edges in IE
In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.
The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.
That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.
IE9 snapshot
Chrome snapshot
I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.
UPDATE
I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image
I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/
If it works in jsfiddle but not on your site, I wonder if you are using a doctype or if there is anything placed before the doctype which would put IE into quirks mode.
I've checked other questions on here but I haven't found anything that will help me.
Since FireFox 4 was released I've been having an issue with the menu on my website.
www.ffxivinfo.com
As you can see, the menu is supposed to fit along the little graphic buttons so that each link is on the "button". In Chrome, IE8 (not checked 9) and FireFox 3.5 this looked perfect. However since FireFox 4 it has been displaying wrong.
It looks like it's a padding issue but I can't figure out where it is coming from. I have even removed the padding between each link so that they are close together (0 padding) yet the menu still stretches further to the right in FireFox 4+ than in other browsers.
I use the auto generated menus available at purecssmenu.com and I modified it to fit my own website.
Here is a link to just the nav code, I use a PHP include to insert it.
http://www.ffxivinfo.com/nav.php
And here is a link to the CSS for it.
http://www.ffxivinfo.com/navstyle.css
Basically I need the navigation to look the same in all browsers so that it fits into the graphic "buttons". I'm tempted to just scrap the current design and go with a simple gradient background and leave the menu wider in FireFox 4+ than other browsers but that's a bit defeatist.
Any help would be much appreciated. This is the first time a coding problem has sent me to a forum asking for help but I just can't figure this one out.
I believe the problem is not in your margins but due to the differences in text rendering between the browsers. In this case, Firefox is rendering the text slightly wider.
If I might suggest an alternative, rather than using an image background and hoping for pixel-perfect rendering (which is pretty unlikely given the diversity of browsers and operating systems out there) try styling the links themselves with background-color and border-radius.
I don't see the problem in FF6. However, I see you specify your font size in pt. pt is for print, not the web. Try changing that to px and see if that fixes your situation.
I might ignore the Firefox 4 issue.
FF is now on version 6.
Your issue does not appear in FF3.5 (the most widely used FF) or FF6, both of which have more browser share than FF4.
http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
Followup 2
Here's a link to a demo page.
As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page
i prefer using http://www.curvycorners.net/
I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position.
Applying the rule "display: inline" to the element seemed to stop the issue.
"Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.
It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on
refresh. But if you remove the rule, it still looks okay on refresh, until you
close and reopen the browser window - then the jumping reappears.
Hope that helps someone.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?