1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Does XenForo autofix broken CSS?

Discussion in 'Styling and Customization Questions' started by Luxus, Jun 27, 2012.

  1. Luxus

    Luxus Well-Known Member

    The reason I'm asking this is because I tested IE only hacks, but XenForo "fixed" them so that they worked with all other browsers.

    I used several IE 8 hacks, for instance

    height: 200px\9;

    This should work for all IE versions only according to multiple sources. I have tested this hack on MyBB and XenForo. While with MyBB this hack worked as it should for IE only, with XenForo it worked for all browsers. After investigating the CSS in firebug I saw that XenForo has fixed this CSS to

    height: 200px;

    without the \9.

    Does that mean that IE hacks are not possible with XenForo?

    PS: I'm talking about hacks, not browser conditionals.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Where exactly are you entering that value? I can't reproduce the problem.
  3. Luxus

    Luxus Well-Known Member

    Before I got the tip from Yorick in this thread I prepared a CSS solution for collapsing and expanding subforums with the transition attribute applied to height.

    This is the code I was using:
    /** START -- CSS3 Collapse function for selected subforums. Replace X with node ID -- START **/
    .nodeX .forum_view .pageContent > fieldset {
        transition: max-height 2s ease 0s;
        -moz-transition: max-height 2s ease 0s;
        -webkit-transition: max-height 2s ease 0s;
        -o-transition: max-height 2s ease 0s;
        max-height: 0px;
        max-height: 350px\9; /** IE hack because transition doesn't work with IE **/
    .nodeX .forum_view .pageContent > fieldset:hover {
        max-height: 350px;
    .nodeX .forum_view .titleBar:hover + fieldset {
        max-height: 350px;
    /** END -- CSS3 Collapse function for selected subforums. Replace X with node ID -- END **/
    The expected result would be hidden subforums for all major browsers except IE. With IE all subforums should be visible all the time, because IE doesn't support the transition attribute. However max-height: 0px has been overwritten/ignored and XenForo applied max-height: 350px instead.

    Weird enough, I have just tested this with the global color attribute and it worked as expected.
  4. Chris D

    Chris D XenForo Developer Staff Member

    I still think browser conditionals are the best way for this.

    <!--[if IE]>
    <xen:require css="IE.css" />

    IE.css could contain all of your IE specific changes.

    You could either call that in PAGE_CONTAINER (so it's available in every page) or paste that code into any template that specifically requires IE specific changes.
  5. Luxus

    Luxus Well-Known Member

    Yeah, I could have done that, but I was lazy so I chose a quick dirty css hack :p. Also if this is some sort of a bug, I would not have discovered it without using css hacks. Thanks to the toggleme add-on for me this is all history though.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I don't have this problem with your code. The max-height: 350px\9; remains as is in the rendered CSS.
    Luxus likes this.
  7. Erik

    Erik Well-Known Member

    This is the source of the problem. Luxus, Firebug does not actually display the CSS exactly as it is written in the source. Rather, it (or technically, the browser) parses the CSS and then Firebug re-writes CSS from the browser's model of it.

    As a result, Firebug will not show malformed/incorrect CSS syntax. Either it will show nothing for that particular attribute, or it will show what the browser interprets the attribute's value to be.

    max-height: 350px\9;
    is not valid CSS, but in this case Firefox is simply interpreting it as "350px", dropping the \9 since it doesn't know how to handle it.

    As a result, Firebug shows
    max-height: 350px;
    in the Element Inspector.

    Even clicking to go to the line in the CSS file where that rule occurs will not show the actual CSS source. Check the raw CSS source in your browser and you will see that the max-height:350px\9; is there as it should be.

    Luxus and jmurrayhead like this.
  8. Luxus

    Luxus Well-Known Member

    Thanks for the good explanation :) But, why has the first max-height been overwritten by a hack that is supposed to work on IE only?
  9. Erik

    Erik Well-Known Member

    Because Firefox is interpreting max-height: 350px\9; as max-height: 350px; so to the browser it looks like this:

    max-height: 0px;
    max-height: 350px;
    According to CSS rules, since these are within the same selector, the later one takes precedence and overrides the previous one.

    You will likely need to put the max-height: 350px in an IE conditional.

    I'm not familiar with this specific CSS hack but it looks like it isn't working as you expected it to because other browsers are interpreting it, not just ignoring it.
    Luxus likes this.
  10. Luxus

    Luxus Well-Known Member

    I guess there is a reason why people call browser css hacks bad coding and unreliable. I will make sure to avoid them in the future and use browser conditionals if necessary. Thank you again :)

Share This Page