div doesn't act on firefox/ie like on chrome

Question

Could anybody tell me please why does this loading image displays fine in Chrome but not in Internet Explorer or Firefox? It should just float normally over the page but Firefox and IE seems to put it at the start of the page.

Website: http://thc-racing.ucoz.com/

HTML:

<div id="preload">Loading page... <img src="/design/loading.gif" /></div>

CSS:

div#preload {
    position: absolute;
    bottom: 40px;
    right: 50px;
    background-image: url('http://thc-racing.ucoz.com/design/loading-bg.png');
    padding: 8px;
    border-radius: 5px;
    border-style: solid;
    border-color: #d7d7d7;
    border-width: 1px;
    font-weight: bold;
    align: right;
}

Thanks

Not sure, but the loading image displays in all those three browsers just the same (in the top left corner) — putvande, Aug 21 '13 at 18:01
`align: right` is not valid CSS. Do you mean `text-align: right`? — nullability, Aug 21 '13 at 18:02
I think this is happening because your `div` is before the opening `html` tag. You should place it within the `body` tag. There seem to be a lot of problems in your website. You have more HTML that is not inside the `html` / `body` tag. That is causing problems. — putvande, Aug 21 '13 at 18:03
putvande same result everywhere i put it, doesn't have the exppected result — Skan So, Aug 21 '13 at 18:15
Where does it need to go? Vertically and horizontally centered? — putvande, Aug 21 '13 at 18:17
putvande, here is a screenshot with how it should look like http://thc-racing.ucoz.com/problem_ss.jpg — Skan So, Aug 21 '13 at 18:20
Well, I would start by putting the HTML in the body tag. If you do that it should work. — putvande, Aug 21 '13 at 18:24
putvande same result, works in chrome, it doesn't in ff/ie, you can check it now, it is in body — Skan So, Aug 21 '13 at 18:33
looks like i found the problem (i guess), the css does not provide the necesary code for the div, in chrome it does but not in ff/ic, adding the css with style="" works everywhere. anybody knows why isn't it reading the css code? — Skan So, Aug 21 '13 at 19:10

score 0 · Answer 1 · answered Aug 21 '13 at 20:49

The answer is the way (probably) firefox and internet explorer understand the div, I had to replace the div with table, because they failed to read the CSS propely, so here is the code:

HTML:

<table id="preload"><tbody><tr><td style="padding:8px;">Loading page... </td><td style="padding:8px;"><img src="/design/loading.gif" /></td></tr></tbody><table>

CSS:

#preload { border-collapse: separate !important; position:absolute; bottom:40px; right:50px; font-weight:bold; background-image:url('/design/loading-bg.png'); border-radius:5px; border-style: solid; border-color:#d7d7d7; border-width: 1px; border-spacing: 0; }

everything works perfect now, thanks everybody for help

div doesn't act on firefox/ie like on chrome

1 Answers1