One of the pages on my website is pretty tall. It's under 200KB in size, but it's a series of tables that takes a lot of vertical space. After about 40 screenfuls (about 1/4 of the total scrolling height of the webpage), it just stops drawing: everything above that looks fine, and everything below that is plain white background -- except the footer (in a different div, I guess), which shows up fine at the very bottom.
I've asked around the office, and other people have seen this before, but don't know what causes it. We certainly have other pages here that are just as tall, and have no problem. I've seen pages render fine which are much longer. It's not a complex document at all -- some nested divs, some tables (4 or 5 columns, a couple hundred rows each), some CSS.
The page renders great in both IE7 and Chrome. Only Firefox 3 does this.
Any clues as to what's causing this? Or a workaround? I don't even know what to google for here.
EDIT: I've seen this on another, completely unrelated page. In both cases, it cuts off at about 33000 px from the top -- ha. I know FF3 can have divs and tables longer than that. Anybody know what they might be using a 16-bit size/coordinate for?
Sounds like this may be related to Firefox Bug 215055 or Firefox Bug 333994. Check these out. If it is indeed related, you can always attach your testcase to one of these bugs and add your comments to the bug.
I also recommend, like zodeus does, trying a nightly build or a beta of 3.1. If it's fixed there, that doesn't mean you force your customers to upgrade, but at least you know it's fixed in a future build and you can campaign for Mozilla.org to bring the fix back to a more current build where you might get people to upgrade.
Try downloading the Fire Fox 3.1 Beta or Nightly Build. They have reworked a lot of their internals. If it works there then I would say it's a reported and fixed FF3.0 bug.
This bug filed in Bugzilla may be related...
Related
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
An image is worth 1024 words, right? so I tried to post some images but I don't have enough reputation, so it's going to be a little more difficult to describe with words, but I hope that someone can help me.
The thing is that I have a table that shows misaligned only under Windows, no matter if using IE8, Firefox or Chrome. Under Linux the table shows fine in Firefox and Chrome. So, I used the IE8's development tools and find out that the margins are set to 0, and if I disable the margins the table shows almost fine (top margin gets some value) but the right margin now shows aligned. Then if I apply margins again the top margin gets set to 0 and the right margin stays fine, and the table shows as it is meant to.
The weirdest part of all is that it works fine under Windows and Linux for other clients of the application, but for one particular client it just does not. The code does not depend on the client.
Edited:
The code is not something I'm writing, It's already written, like ages ago, and I have to fix some parts. It's a very large and complex application, with sensible data, so I have to obscure some of the code and the images, sorry for that, but now I've isolated the problem.
You can download the code and test it locally. You'll find out that the table shows misplaced only under Windows in any browser.
In order for you to understand what exactly the issue is, I'm posting 2 links. One of them is a code that shows fine, the other one has the issue. Both of them should work fine since it's the same application. I hope this is more clarifying. Look at the misaligned table, go to the development tools in IE and watch the margin values, then watch what happens when the margins are disabled and enabled again.
https://docs.google.com/file/d/0Bxz1pQbINNQKbDRHYXFxUFk1aFU/edit
https://docs.google.com/open?id=0Bxz1pQbINNQKYi1icEM4dFlGeW8
I had to remove the previous link to the images because I can upload only 2 links due to my privileges, but now you have the code, so it wasn't going to be that useful anyway. Maybe you might want to see the pics:
Well... The problem was nothing else that the dots in some ip numbers!
It was difficult to spot because not all data had ip numbers.
The solution could be to change xxx.xxx.xxx.xxx for xxx-xxx-xxx-xxx or something like that.
I hope it's useful for someone else.
I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!
In our current project, we have one particular page where, when viewed in IE7 or IE8, fonts seem .1 or .2 em larger than they should be. Having inspected the code and css, I cannot see where this is coming from. This issue affects ONLY ONE PAGE which is to all intents and purposes exactly the same as many others in the site, which display as expected.
Some things I have ruled out:
Text-size settings (it's not that, set to medium, and anyway if so why one page only)
DPI settings (same reason as above)
Browser zooming (it's set to 100% - the problem scales with the zoom setting, btw)
Browser-specific CSS (no browser specific rules are applied to the elements in question)
Stray font-size setting code in the markup (I've been through and eliminated this)
Voodoo (okay I haven't ruled this out - as my frustration increases I'm starting to think it might be this though)
The page displays as expected in Firefox. This is not a live site yet so unfortunately I can't point you at the URL.
Has anyone come across something similar and, if so, what was it?
Many thanks,
G
Without showing us or replicating it at least, asking is pretty much near useless but I suspect it's probably just a tag that wasn't closed on an element with an above average font size.
I'd recommend validating the HTML. If it's good, then it's hard to say without looking at the code/page.
Could you please show me a website (preferably, a forum) that has perfect liquid layout (that does not break at all if the browser window gets resized)? Would be nice to see...
Once again, where on the web can I see a website that doesn't become a mess when squeezed down and doesn't cap its own width when enlarged?
Have you ever been concerned about that? Or a fat lot you care? 'Cause I see that popular websites (even portals, I am not going to name any) have this problem (as I consider it to be).
Well, I'd like to see what your code would be for an avatar on the left and some user's info on the right. Please see this picture to figure out what I mean: savepic.ru/780576.png
The main reason why this is broken in many places is that it's broken at the fundamental level: CSS doesn't really support fluid layouts, there are still corner cases even when you start using tables for layout. On top of that, every browser and every version of every browser does CSS a little bit different.
The net result is that even highly paid web designers can't get it right (or someone would have come up with a solution by now and every would be using that).
The only hope is that browser developers finally agree to make their products compliant to the Acid3 test. But as I write this, my Firefox 3.5.1 gets only 92%. WebKit (Safari and Google Chrome) and Opera go the full 100% (see this article).
I personally have given up on this and I won't revisit this topic until IE 7 drops below 5% in the popular usage charts which will probably take five to ten years (IE 6 is dead as a log but still gets 12%).
Smashing Magazine have a couple of posts on fluid layouts. Try searching around there to find good examples and explanations.
One of my favourite from their examples is Vivabit.
Personally I haven't been to concerned about it yet, but I probably should, with the rise of netbooks and mobile browsers. I still believe you should serve a different layout to mobile browsers, though, but it's interesting to look at possibilities of serving the same to all browsers.
Well, Slashdot has a completely fluid middle column (down to some minimum which is pretty small) with fixed-width columns to left and right. As far as I can see it doesn't cap its width (tested on my 1900x1200 monitor).
It's not a forum on the main page, but the comments to articles are kind of like it. It doesn't have the avatar example you're looking for though :(