CODEWITHSUNDEEP
htmlcss
flips
flips

Reputation: 318

css visual difference between ids and classes

This is incredibly strange but check out the following html and css. This works just fine as long as I leave table and tableWrapper as elements with ids defined for them

if I try to make them classes (changing the # to . in css) and changing id to class on the html elements then the circle classes are no longer contained within tableWrapper (they extend beyond its borders). I am really flabbergasted as I never thought whether somethign was an id or class could have an impact on layout yet I am seeing this happen on both IE10 and google chrome v25.

I am not looking for a solution to this specific problem. I am looking for understanding and hopefully some link to some w3c doc explaining why it occurs and what expectations I can have around this.

                <html>
                <head>
                <style>
                    .circle{
                        background-color:red;
                        border-radius:50%;
                        height:90%;
                        width:100%;
                        colore:white;
                        top:7%;
                        position:absolute;

                        left:0px;

                    }
                    .innerCircle{
                        border-radius:50%;
                    background-color:white;
                        position:absolute;
                        top:12%;
                        z-index:2;
                        left:5%;
                        height:80%;
                        width:90%;

                    }
                    #navBar{
                    background-color:black;
                    color:white;
                    width:100%;
                    height:7%;
                    }
                    #table{
                        height:550px;
                        border:solid 1px black                                                                                                              ;
                        width:500px;
                        position:absolute;
                        top:0px;
                    }
                    #tableWrapper{
                        height:90%;
                        width:100%;
                    }

                </style>
                </head>

                <body>
                    <div id="table">


                        <div id="navBar">
                            Room info
                        </div>
                        <div id="tableWrapper">

                            <div class="circle">

                            </div>
                            <div class="innerCircle">

                            </div>
                        </div>

                    </div>
                    <input type="text" id="xval" style="float:right" />

                    <input type="text" id="yval" style="float:right" />
                </body>
            </html>

Upvotes: 1

Views: 131

Answers (2)

pwdst
pwdst

Reputation: 13735

Changing an ID to a class will affect specificity of selectors, see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/. Simply put an ID is a more specific selector than a class as it is unique on the page. If an element can be selected with multiple rules then the most specific will be applied, otherwise if all have equal specificity then the "cascade order" (essentially the order in which the rules are declared) matters. Rules appearing further down in the stylesheet override rules higher up with the same specificity.

There is a great specificity calculator at http://specificity.keegan.st/ which will help you understand which selectors will win out in any given situation.

There may also be naming collisions with classes of the same name.

To really see what is going on I'd strongly recommend you use the Developer Tools in the browser of your choice - personally I'd recommend Chrome Developer Tools, but Firefox has a pretty good set, both native and using the popular Firebug extension. Right clicking on an element and selecting "Inspect Element" will (in most browsers) allow you to see all matching selectors, the rules that have been applied, and those that have been overridden.

Upvotes: 0

HAL9256
HAL9256

Reputation: 13453

I wonder if it could be because of specificity and how ID's are treated different from Classes. i.e. ID's have a higher specificity than classes. If your container is a class and your element is an ID, then the element with an ID overrides any settings that may be set at the class level.

Here's a link to some more information http://css-tricks.com/specifics-on-css-specificity/

Upvotes: 2

Related Questions