I'm working on a grid where I'm using output_style = false for elements containing content. Those elements are made into squares using a simple javascript function. While the grid works as intended, I find that in Safari and Chrome, the width of some of the elements is off by a pixel until I resize the browser. If I resize back to the original size, it still works. This is not the case in Firefox, where it works perfectly when the page is loaded. Is this a known bug, and is there anyway around it?
Solved using $(window).resize(), which is called 1 second after the page has completed loading. Does the trick.
Related
I am working with SVG the first time and came across this problem:
I am using some SVGs for icons and everything works fine - except for one icon that renders incorrectly in Firefox on Windows. Firefox on OS X however renders it just fine.
Here is an anonymized version of the header I am placing SVG icons in:
http://files.uiux.de/140618_header/
That problem persists regardless if I use the Sprite utilized in the above example or if I use separate files for each icon.
Here are two screenshots of the render-issue I am experiencing. The problem is that little 'dent' on the lower end of that earphone:
We've saved those SVGs in Illustrator and used SVG 1.1 as export-setting.
Can someone point out what the problem seems to be here?
I'm not seeing that error in the sample header when I look at it with my version of FF (30).
It looks to me as if the artifact/'dent' you are seeing is caused by the left-most column of pixels of the envelope icon next to the phone in the sprite sheet. You can tell if you zoom up the image.
What I do, to make sure things like this don't happen, is to not put icons hard up next to each other in the spritesheet. Leave a few pixels gap between them.
I have a weird problem. I have a script that loads images into the SVG, and then user can manually update they order by clicking on them: the clicked image goes up in the SVG tree.
The problem is that in Chrome all images blink when their order in the tree is changing. However, Firefox and Safari work with no blinking. Moreover, I have a copy of this script on the other domain and it doesn't blink there too.
Is it possible that the blinking is caused by some domain-related issue? In both cases images are on the same domain as the page. I use Chrome 18.
You can call suspendRedraw() method on any element in SVG when you need to make complex manipulations or when you encounter bugs like you are describing. And when you're done with manipulations call unsuspendRedraw() on the same element to let browser rerender the image. I would call the methods on the parent element of your images.
I have a webpage that calls up a fancybox contact form. it works perfectly in Internet Expolorer .... perfect padding .. perfectly centered .. no problem.
In Firefox, however, the same form when called up has scrollbars both horizontally and vertically. Any size adjustment to the window produces the same result. Even if you remove ALL content ... its the same result.
Being relatively new I have search and found no solution to the problem and have tried EVERY available answer listed on the internet. what am I missing? You can view a test page to see what I mean at http://www.e-scapez.com/test/test.html.
I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.
In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.