Peculiar Reverse Cascading in CSS

Question

I've got a situation where my CSS is applying styles that don't apply to the object being styled. Here is exact code from my site.css file...

.rules aside {  
    width: 270px;  
    right: 0px; 
    top: 0px; 
    float: left;
}

.rules aside h3 { 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #2A2A2A; 

    padding-bottom: 6px; 
    padding-top: 11px; 

    margin-bottom: 0px; 

    color: #F0E29A; 
    font-size: 14px; 
    letter-spacing: -0.5px; 
    text-transform: uppercase; 
}

Now here is some HTML that utilizes it...

<article class="content rules">
   <section>
   // ...
   </section>
   <aside>
     Some Content
   </aside>
</article>

And here is the CSS markup that Chrome's Inspector shows for the <aside> element..

.rules aside {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 11px;
margin-bottom: 0px;
color: #F0E29A;
font-size: 14px;
letter-spacing: -0.5px;
text-transform: uppercase;
width: 270px;
right: 0px;
top: 0px;
float: left;
}

This doesn't make any sense. Only an <h3> element should be styled from the .rules aside h3 selector. Yet it is cascading down into the root <aside> element. I have other instances of this happening as well. This is happening in Google Chrome (latest version)

Including screenshots for proof. enter image description here

thirtydot edit:

jsfiddle.net/2hnLx - running this exact same code from an .html file on my machine yields the problem results, but running it from jsFiddle yields the expected results. – Stacey

The code from the jsFiddle:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>jsFiddle Example</title> 
    <style type="text/css"> 
        article, section, aside, header, nav { display: block; }

        #container { 
            margin: 0px auto; 
            width: 960px; 
            position: relative;
        }
        section { 
            float: left;
            width: 685px; 
            left: 0px; 

            background-color: #ccc;
        }
        section h2 {
            padding: 10px;
        }
        section h3 { 
            font-size: 32px; 
            color: #ffcc00; 
            font-weight: bold; 
            padding: 10px; 
            border-bottom-width: 2px; 
            border-bottom-style: solid; 
            border-bottom-color: #2A2A2A; 
            margin-bottom: 18px; 
            margin-left: 10px;
            margin-right: 10px;
        }

        .rules aside {  
            width: 270px;  
            right: 0px; 
            top: 0px; 
            float: left;

            background-color: #000;
        }

        aside h3 { 
            border-bottom-width: 2px; 
            border-bottom-style: solid; 
            border-bottom-color: #2A2A2A; 

            padding-bottom: 6px; 
            padding-top: 11px; 

            margin-bottom: 0px; 

            color: #F0E29A; 
            font-size: 14px; 
            letter-spacing: -0.5px; 
            text-transform: uppercase; 

            background-color: #fff;
        }
    </style> 
</head> 
<body> 
    <div id="container"> 
        <article> 
            <section> 
                <p>Section Text</p> 
            </section> 
            <aside> 
                <p>Aside Text</p> 
            </aside> 
        </article> 
    </div> 
</body> 
</html>

Looks weird. The only thing that comes to mind is some crazy invisible control characters messing up the closing `}` of the first block, thus fusing the blocks. — Pekka, Feb 08 '11 at 21:20
@Ajweb: This happens in FireFox and Safari, as well. So I'm not entirely crazy? This is irregular behavior? — Ciel, Feb 08 '11 at 21:22
Just a hunch: have you set your `aside` to `display: block`? I feel like it might have something to do with using an HTML5 element and the browser treating it like an inline element. — coreyward, Feb 08 '11 at 21:25
A negative on `display: block` fixing it. Just tried it with the same results. What is more, I have `similar` code for the `
` element, and it works fine. Also, if I click on a root `
` element, it finds the appropriate style in all three browsers. — Ciel, Feb 08 '11 at 21:27
Okay, I have just done a confirm, this _is_ in chrome only. I was looking at the wrong thing in the other browsers. I have updated to the latest version of chrome, and it persists. It is also present everywhere, not just in the `
` like I had thought, it just wasn't showing as obviously in the other areas. — Ciel, Feb 08 '11 at 21:38
@Stacey: Can you recreate this on jsfiddle.net and send us a link so we can play around with it? — 700 Software, Feb 08 '11 at 21:41
@Stacey: Perhaps just edit your question with the entire HTML page you're using in your screenshot. It could possibly not happen on jsFiddle. — thirtydot, Feb 08 '11 at 21:56
No, I can't. Making it jsFiddle produces the proper results. But I've combed my code over and over and it runs fine everywhere but Chrome. I copied and pasted code verbatim into jsfiddle and it works fine in Chrome there, too. — Ciel, Feb 08 '11 at 22:00
I have given you 100% of the code that is on that specific page. The only things not given aren't related, and even commenting them out completely does not change the results. I can't really add it all into a single question. — Ciel, Feb 08 '11 at 22:00
http://jsfiddle.net/2hnLx/ - running this exact same code from an .html file on my machine yields the problem results, but running it from jsFiddle yields the expected results. — Ciel, Feb 08 '11 at 22:04
@Stacey: I guessed it might not happen on jsFiddle. I can't recreate your problem using your new code. It looks the same in Chrome (10.0.648.18) and Firefox. I'm going to edit your question with the code from jsFiddle. — thirtydot, Feb 08 '11 at 22:12
It only appears to be the debugger that is really problematic. The actual styles themselves do not seem to be getting applied, it just shows wrong in the debugger. — Ciel, Feb 08 '11 at 22:16
If the styles themselves are not being applied, then the issue is a bug with Google Chrome (or it's Dev. Tools). I would file a bug report to the Google Chrome team. — Moses, Feb 08 '11 at 22:27
Yes, I just submitted it as a bug, let's see how far that goes. Even IE9 beta shows it all properly. I've never noticed it until today, though. Even at that, it's very hard to reproduce. — Ciel, Feb 08 '11 at 22:32

Lordalcol · Answer 1 · 2011-02-09T13:49:01.130

2

I have tried this in Chrome 9. I am not able to reproduce the bug. Here there is my code (you can try it): http://dl.dropbox.com/u/20195191/StackOverflow/so_4945633.html

And this is a screenshot from Chrome. screenshot of css properties

edited Feb 09 '11 at 13:49

answered Feb 09 '11 at 13:41

Lordalcol

990
7
22

Nothing :) I made a page in jsfiddle, but it changes the source code. Then, I saw that the original post just has a link to jsfiddle. Now I changed my answer. – Lordalcol Feb 09 '11 at 13:50
I am by _no_ means an expert at HTML or CSS, but I am well versed enough to know that _something_ strange is going on here. I will keep trying to exactly reproduce this bug outside of my project, maybe that will let me trace down what in my own project is causing it. – Ciel Feb 09 '11 at 14:02
If you are able to reproduce it, please post a page in DropBox or something similar, so we can try it. – Lordalcol Feb 09 '11 at 14:07
I have reproduced the issue... sort of. My styles are fine, it only appears if I link styles using the `@import url('url');` code within a `.css` file. It doesn't seem to matter what the imported file has. – Ciel Feb 09 '11 at 15:23
I have confirmed the problem, and posted about it up above. – Ciel Feb 09 '11 at 16:21

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

Solved.
It was the BOM. Try to save site.css file as UTF-8 without BOM, and it will work.

Update
This is inherent: UTF-8 HTML and CSS files with BOM (and how to remove the BOM with Python)

edited May 23 '17 at 10:30

Community

1
1

answered Feb 09 '11 at 16:57

Lordalcol

990
7
22

Is there any way to tell Visual Studio to use this UTF-8 encoding for the files by default? – Ciel Feb 09 '11 at 18:55
Thank you. You were correct, and this was the problem. This can be solved by going to `File`->`Advanced Save Options` and selecting `UTF-8 (without signature)` as the Encoding. Still, I don't know who to be more frustrated at, Microsoft, for making this the default in Visual Studio and having no way to set a new default per document type, or Chrome, for not being able to handle what FireFox, IE, Safari, and Opera can just fine. I suppose seeing as how Chrome is free, I should probably alert Microsoft before I alert Google as a 'problem', but this is a pretty annoying problem to have. – Ciel Feb 11 '11 at 13:30
I greatly appreciate all of your help, as well, for actually _trying_ to figure it out, instead of brushing me aside with a crazy 'Hey, check your CSS, you probably just did it wrong'. I have to say it is kind of warming to come to a community, pose a problem, and have actual _debate_ about the cause instead of someone simply pointing their finger at me saying _'You made a mistake'_. Another reason why StackOverflow is the best website in the world, in my opinion, and should be even higher than facebook! =) – Ciel Feb 11 '11 at 13:32

Peculiar Reverse Cascading in CSS

` element, it finds the appropriate style in all three browsers.

2 Answers2