IE9 CSS problem

[danofweaver]

My Disqus comments system looks terrible in IE (I'm using IE 9 - to
test IE - not through choice!)

eg this page...
http://www.joglab.com/mnemonic/?topic=Planets&cat=sciencetech

Disqus help suggested it might be a CSS conflict with my own CSS but I
can't find the problem.

I've tried changing the div line height css for the Disqus div and the
div which holds it
<div style="width:650px; HERE">
<div id="disqus_thread" AND HERE ></div>
<script type="text/javascript">
var disqus_shortname....

Fine in Chrome and FF but screwed in IE. Any advice much appreciated,
I expect it's just something I've overlooked.

[Anton Kovalyov]

Hey,

Thanks. I'll check that on Monday. In the meanwhile could you confirm that it looks fine on other websites, for example on our blog? http://blog.disqus.com/

Thanks,
Anton

> --
> --
> http://groups.google.com/group/disqus-dev?hl=en

[Jeff C]

Can you provide a screen shot of how it looks in IE? Please save the
file onto your server and send a link.

- J e f f  C o n k l i n -
- http://www.getoutsidenj.com

> --
> --
> http://groups.google.com/group/disqus-dev?hl=en

[Hasanat Kazmi]

Hi,
I am facing same problem, have a look at in IE 9
http://hasanatkazmi.appspot.com/python-unicode.
Any help please?

On Feb 12, 9:45 am, Anton Kovalyov <an...@disqus.com> wrote:
> Hey,
>

> Thanks. I'll check that on Monday. In the meanwhile could you confirm that it looks fine on other websites, for example on our blog?http://blog.disqus.com/

>
> Thanks,
> Anton
>
> On Feb 10, 2012, at 2:33 PM, danofweaver wrote:
>
>
>
>
>
>
>
>
>
> > My Disqus comments system looks terrible inIE(I'm usingIE9 - to

> > testIE- not through choice!)

>
> > eg this page...
> >http://www.joglab.com/mnemonic/?topic=Planets&cat=sciencetech
>
> > Disqus help suggested it might be a CSS conflict with my own CSS but I
> > can't find the problem.
>
> > I've tried changing the div line height css for the Disqus div and the
> > div which holds it
> > <div style="width:650px;  HERE">
> > <div id="disqus_thread" AND HERE ></div>
> > <script type="text/javascript">
> > var disqus_shortname....
>

> > Fine in Chrome and FF but screwed inIE. Any advice much appreciated,

[danofweaver]

Anton: http://blog.disqus.com/ is fine in Chrome and IE.

Jeff C: Screenshot now at http://www.joglab.com/testing/screwed.png

Hasanatkazmi: yes, I'm seing a similar issue on your page in IE.

As I said- it may be a CSS conflict but I can't pinpoint it.

Screenshot of problem is at http://www.joglab.com/testing/screwed.png
for example problem page at:
http://www.joglab.com/mnemonic/?topic=Rainbow&cat=sciencetech

[danofweaver]

Still unsolved. Anyone any ideas?

On Feb 13, 8:16 am, danofweaver <danofwea...@googlemail.com> wrote:
> Anton:http://blog.disqus.com/is fine in Chrome and IE.
>
> Jeff C: Screenshot now athttp://www.joglab.com/testing/screwed.png

>
> Hasanatkazmi: yes, I'm seing a similar issue on your page in IE.
>
> As I said- it may be a CSS conflict but I can't pinpoint it.
>

> Screenshot of problem is athttp://www.joglab.com/testing/screwed.png

[Gabriel Fouasnon]

@danofweaver
The problem with these sites in IE 9 is that they are rendering in
Quirks mode. Open the developer tools (F12) in IE 9, open the
"Document Mode" menu drop down, switch to IE 9 Standards mode, and
then it should look fine.

My suspicion is that it has to do with the box-sizing CSS rule. In
Quirks mode, IE uses box-sizing: border-box; in standards mode, it
uses box-sizing: content-box. If you have to use IE 9 a lot, maybe
you'll want to override this behavior in a personal stylesheet. If you
wanted to target Disqus, try #disqus_thread * { box-sizing: content-
box }.

Hope that helps,
Gabriel

On Feb 16, 1:35 am, danofweaver <danofwea...@googlemail.com> wrote:
> Still unsolved. Anyone any ideas?
>
> On Feb 13, 8:16 am, danofweaver <danofwea...@googlemail.com> wrote:
>
>
>
>
>
>
>

> > Anton:http://blog.disqus.com/isfine in Chrome and IE.

[danofweaver]

Thanks @Gabriel : You're right- if I change IE9 Quirks into
'IE9standards' mode as you
describe the Disqus thread appears perfectly in IE9 standards though
incorrectly in IE Standards 8 and 7.
To cater for users who use IE how can I set the Disqus thread to be
most friendly
to the IE browsers? What is their default setting in terms of Quirks,
standards etc?

On Feb 16, 7:23 pm, Gabriel Fouasnon <g...@disqus.com> wrote:
> @danofweaver
> The problem with these sites in IE 9 is that they are rendering in
> Quirks mode. Open the developer tools (F12) in IE 9, open the
> "Document Mode" menu drop down, switch to IE 9 Standards mode, and
> then it should look fine.
>
> My suspicion is that it has to do with the box-sizing CSS rule. In
> Quirks mode, IE uses box-sizing: border-box; in standards mode, it
> uses box-sizing: content-box. If you have to use IE 9 a lot, maybe
> you'll want to override this behavior in a personal stylesheet. If you
> wanted to target Disqus, try #disqus_thread * { box-sizing: content-
> box }.
>
> Hope that helps,
> Gabriel
>
> On Feb 16, 1:35 am, danofweaver <danofwea...@googlemail.com> wrote:
>
>
>
>
>
>
>
> > Still unsolved. Anyone any ideas?
>
> > On Feb 13, 8:16 am, danofweaver <danofwea...@googlemail.com> wrote:
>

> > > Anton:http://blog.disqus.com/isfinein Chrome and IE.

[Gabriel Fouasnon]

@danofweaver
I *believe* (but I am not sure) that if you make the doctype
declaration at the top of your HTML file (before the first <html> tag)
<!DOCTYPE html>, it will cause all modern browsers to render the page
in standards mode. However, this may have other consequences for your
page, so you will have to make sure that in fixing one thing you don't
break something else. (If general, though, it's a good idea to develop
for standards mode.) Sorry I don't know more off the top of my head. I
would suggest Googling if you need to know more about this.

Good luck,
Gabriel

> > > > Anton:http://blog.disqus.com/isfineinChrome and IE.

[danofweaver]

Thanks @Gabriel. I'll try this.

Dan