I am working on creating a website with a background that transitions with a fade. I have an issue with display when viewing with Firefox. The site loads fine and cycles through the images, when the point comes for it to return to the first image it resizes to a tiny pic in the top left corner. This does not happen on any other browsers, and it does not happen with all of the images in the cycle. If I refresh the page the problem is fixed and the sizing issue goes. I have tried from other computers and the problem is consistent. A version of the site can be seen http://www.rhys-williams.webspace.virginmedia.com/ Any help with this issue would be a big help thanks.
SOLVED
I have resolved this problem. The issue is caused by the cycle changing quicker than the image loads. I added a second to the display time and it now displays fine :)
Remove div from this line -> so your code will look like:
<div id="slideshowContainer" class="slideshow">
I guess that firefox was confused because of it.
Edit: Also, there are few unclosed tags (html errors), but i think this was the main reason of problems. Also, document has no valid declaration... fix these things, and then try... i have tested locally, with base href, and all works fine?
Hm -> please try to remove this, too: next: '.slideshow'
next option should have selector for next button, if i remember well...
Related
On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
I'm a newbie and I have tried hard to get out a page.
After many trail and error this page finally looks "ok" though some of the part I don't know how I get it "right"
But when my page is opened in Firefox its bloody twisted! the table jumped out of boundary.
here is the format in chrome and IE(which is right)
and this is the format in firefox
the table shift out of the container and shift up.
I've search about use css reset but I dun't know how to do it,(what should I add to where)
or I should edit my html or css?which part of css I need to edit?
thanks in advance！
I have solved this by put all shifted table into a container to fix them.
and it works! thanks guys for helping me.
I came across a weird bug with jsfiddle. The layout I get when I visit the site is completely broken. This bug happened when I dragged the vertical resize bar while my second display disconnected. See this the result:
There is probably a way I can get this fixed from the inspector by resizing it manually, locating left panels and changing their width manually and than playing with the vertical resize bar; I'l keep investigating.
Where are the layout positions stored?
Before asking this question, I tried to reset my cookies, I had a look into local storage and session storage (they were both empty). I know it's a local issue because jsfiddle is too awesome to break like that, it's not because of the code in the fiddle, I opened the fiddle in private navigation and worked like a charm.
Edit: I fixed my issue by deleting .column.left, #handler_vertical appeared, I moved it and now data is fixed, but I still don't know where this is stored ;)
I had this same issue and worked out that it was after I reduced the size of my browser window, I'd accidentally moved the vertical bar left, which caused this to 'disappear', so when I resized the window to full, no vertical bar!
To fix, I searched the inspector element for 'handler_vertical', and around this were column left and column right, with widths set inline. Simply remove these inline widths and it's back to normal.
Strange that some js is still adding itself even after clearing cache and cookies!!
I accidentally deleted an HTML node in Chrome's inspector, which broke JSfiddle's layout.
When I reloaded the page, I was surprised to see the layout was still broken.
I cleared my cache and made a hard reload, but JSfiddle's layout was still broken!
The solution came out recently : I changed Chrome's theme... and it fixed JSfiddle.
Sometimes you just don't want to understand.
I know this was solved a while ago, but I just wanted to add that the FAQ acknoledges this and pasting Layout.setWindowSizes(null)into the browser console fixes the layout.
Source: http://doc.jsfiddle.net/faq.html
Same just happened to me, reloading the site had no effect but deleting last cached elements made it
I've been wrecking myself trying to figure out what is going on with this big of html. It renders correctly in latest Firefox, Safari and on chrome canary, but normal chrome renders these weird lines and I have no idea why.
I've create a JS fiddle with an excerpt of my code, it's part of a much larger project, but I'm seeing the rendering issue in the fiddle as well as in my app. I've attached a screen shot of what I'm seeing in the fiddle for reference.
Fiddle
Bug screenshot:
The red middle line shouldn't be there as well as the line to the left of "close". This is just one example, as I mouse over the modal I get lines appearing all over the place.
It makes for a less than stellar question as it's difficult to replicate. Resizing the browser helps to show the error. My fiddle has quite a bit of html and css. I don't expect anyone to actually comb through it and fix the issue. I just want to be thorough in presenting the problem.
I've tried looking online but I haven't been able to find anyone reporting the same issue as far as I can tell.
If anyone has any ideas on what may be causing this, how to fix it or point me to a relevant link/SO question I'd be very grateful.
Things I've ruled out/investigated:
- not caused by something else on the page, as I extracted it into jsfiddle and it's still hapenneing. I also removed the body content using the console in my app and it didn't make a difference.
- I dont think the gradients or transitions are causing it, as removing them didn't seem to have an effect
- possibly/probably related to absolute positioning? When I removed the position absolute on the main wrapper element I didn't see this occuring.
- I read that applying a z-index to these elements might help, but it did nothing for these issues.
TL,DR: Why does google chrome, but not canary or safari, show rendering errors on absolutely positioned elements with liberal use of css3 gradients, shadows and transitions?
When I remove the '-webkit-transform: scale(0.95)' on #vfs_uploader and the '-webkit-transform: scale(1)' on #vfs_uploader.visible, it displays fine: http://jsfiddle.net/cjc343/fzqPT/2/
I don't know how this affects Safari or if it has other implications in Chrome, but it does not appear to otherwise affect the layout in the example.