search

fidoandfido / blackswan

Blackswan Stock Game
Other
2 stars 0 forks source link

Display Problems in IE 8 #20

Open sherhan opened 13 years ago

sherhan commented 13 years ago

Today I tried opening the BlackSwan pages in IE, and found that the page was being formatted incorrectly. In FireFox (which I normally use) the main page content is displayed in the center of the browser window and the header, body and footer components of the page are all aligned.

IE by comparison left aligns header, body and footer and puts the horizontal alignment out between these three elements. I have a feeling this has to do with the different CSS parsing defaults between the browsers, though the alignment for the main elements of the page are already explicitly defined.

Comments?

fidoandfido commented 13 years ago

I am unable install Internet Explorer on my linux box or iPhone - so cannot reproduce. I vote this is a non issue? :p

Just kidding; I imagine the CSS is all busted, and possibly the HTML as well. Not sure if it even originally worked in IE, I haven't used IE in ages. My understanding is that even between versions (generations) of IE (6, 7, and above) the rendering engines are quite different; I guess as some point the application will have to tested and fixed up for all reasonable browsers.

This is pretty much why web development is teh suxoors - solving the same problem again and again and again, but always slightly differently for the different browsers... Yay!

On the up side, if we fix it for one page then the fix will probably work for all of them. And with a low number of pages we can probably keep things under control.

sherhan commented 13 years ago

I found this link, which explains the problem.

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

IE apparently calculates the width as the sum of the width, border, padding and margin elements. Where as in Firefox and other WC3 compliant browsers padding, border and margin are added onto the width. Thats just one problem though, there are a whole bunch of other incompatibility issues (rendering, dynamic action i.e. onhover) based on the fact that Microsoft (for better or worse) do not seem to follow the WC3 CSS guidelines as do most other browsers.

One solution would be to use JavaScript to do a browser detect and then apply browser-appropriate stylings. The (simpler) alternative is to do nothing and caution any potential users of formatting issues if using IE.

fidoandfido commented 13 years ago

I like the second solution. Stoopid IE. Ultimately we will have to do the first though.

If we use jQuery (javascript library) or an equivalent, it will actually give us browser detection code for free and probably help in fixing up the CSS for us.

Neat link though!