Why browser sometimes render site bad and sometimes good? (without change browser, no dynamic data only refresh)

Question

I have website, usually all looks fine but sometimes one div is on the wrong place... For now, I thought reason is AJAX (when document.ready load welcome text), but now that script is disabled and problem still exist.

For now, I have noticed that only on latest Firefox. Anyone else had similar problem? Is it fault of free hosting (and maybe some packet is lost...?) (tested on http://60free.ovh.org and http://www.000webhost.com/)

EDIT: I am talking about only ONE browsers and 2 diffrent results of rendering. I know it is very strange...

EDIT2: Look at this screenshot: First bad: http://img682.imageshack.us/img682/866/bad.png, and good one, after only refresh page, (I don't use any server side lang) http://img20.imageshack.us/img20/3992/goodtp.png

EDIT3: In web-developer addons i have checked disable cache

EDIT4: Here is page http://www.mariuszklinger.eu/

Answer 1

No, it's not a problem of free hosting. Browsers simply render things differently, that's the way it works. You have to learn the quirks of the different browsers, and learn to deal with them.

You probably shouldn't be touching AJAX or even JS until you learn how you have a solid understanding of HTML and CSS.

---

Edit: Your clarifications completely change the nature of this question. In that case, it sounds like a caching issue. I'd try clearing your browser cache first. If that doesn't work, it could be some server-side caching? Are you waiting for the page to fully load? Stuff sometimes gets moved around as the page continues to load, if it hangs before its done, something like this might occur. Otherwise, I'm not really sure.

If none of that works, change the design :p Looks like you're relying on pixel-perfect measurements, and that right div is getting pushed down when it doesn't have enough room. If you can avoid scenarios like this, your page will be a little more robust to subtle changes.

---

On second thought, it could be a side-effect of free hosting (but not because of "lost packets"). Does your host inject any ads or scripts into your page?

Answer 2

Div's are often different in FF and IE, I had the problem very often and need many many time to spent on this.

Thinks that can help you:

• IE and FF have both a DEV-Toolbar, within that you can see very much information about DIV-Conatainers

• One thing that make my div's bad is the float, height and width - when you forget one of these in another div, your "problem"-div maybe is wrong because of that

Give us your div and your CSS and we can find out more

---

I see some very interesting thing in Opera: When the page loaded, you menu on the left site is for a single moment completly open (all ~10 links). Can it be, that in FF the place for this links will be calculated once, that is bigger than the menu-div allowed and causes the "About"-frame to be foolish?! (Only an Idea) –

Answer 3

The problem is that browsers do not follow CSS standards. Certain browsers like Firefox, Chrome and Safari are pretty close to being standard compliant. Others such as Internet Explorer are not at all standard compliant.

The only option you have is to try different things until it works for every browsers. Could you give us a sample of your HTML and CSS so we can help you with that?

Answer 4

Looking at your screenshots I believe the most likely reason is a difference in the default margin of divs in IE and FF.

When dealing with firefox problems, use Firebug to edit the CSS live and see the changes when you do them.

Try setting div {margin:0;padding:0;} for a minute to see if that changes things for the better.

Answer 5

Firefox does a pretty good job with HTML and CSS 2.1 rendering (see the Acid2 test) so (no offense here) I'd rather incriminate your CSS.

Answer 6

The reason most browsers render pages differently comes down to their rendering engine. For example, we have WebKit in Safari and Gecko in Mozilla. Both of these rendering engines expect and handle things differently based on how they where built.

However in your situation, it seems like your browser is getting confused with the cache and the server side content. Like others stated, trying clearing your cache for starters, then dig into the Source Code if that doesn't help.

Answer 7

Check the font size set in each copy of Firefox. If margins or widths of DIVs are in ems, then these are relative to the font size set in the browser. Try decreasing the FF font size when the DIV renders strangely, it should snap back into place, assuming this is what's going wrong.

Answer 8

It sounds like a caching problem. Perhaps you were attempting to maximize the width used along with floated elements.

Sometimes this kind of thing can happen when you change a css file and your browser doesn't think to re-download it because the filename hasn't changed and the filesize hasn't changed enough to make your browser re-download it.

More information on how to clear your cache can be found http://kb.iu.edu/data/ahic.html

Answer 9

Firefox has what is known as the Slashdot CSS bug. What can sometimes happen is the browser demands the size of something before its dynamic content is fully loaded for pre-rendering. In that case it renders based on what it has. Not too bad but here's the kicker: When the content is fully loaded the browser does not recalculate the value causing occasional terrible rendering that cannot be replicated locally.

EDIT: here's another description: http://sourceforge.net/tracker/index.php?func=detail&aid=2808234&group_id=4421&atid=104421

Answer 10

Did you change the width of the browser window between loads? The positioning of floated elements could have been affected if you did.