CSS confusion. Exactly similar tag, exactly similar CSS, but not working properly

Question

I have some javascript that appends html to a div

There is an if loop, and it appends divs with exactly similar data, just difference is in the class name. So either this tag gets appended:

<div class="customer" id="0"><h2>Lorem Ipsum</h2><h3>testing</h3></div>

Or this is appended:

<div class="vehicle" id="0"><h2>Lorem Ipsum</h2><h3>testing</h3></div>

The CSS is:

For the customer classed div:

#results .customer{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .customer h2{
    font-size: 2.5em;
}
#results .customer h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

For the vehicles classed div:

#results .vehicle{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .vehicle h2{
    font-size: 2.5em;
}
#results .vehicle h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

Basically they both are the same. But only one works properly, i.e. whichever is positioned lower in the CSS file.

So here, when the vehicles classed div is appended, it displays correctly. but if the customer classed div is appended, it doesn't. The reverse would happen if i cut the cut the CSS for vehicle classed divs and paste it above the customer classed CSS.

I know CSS calculates the priority of CSS rules based on a method in which inline rules get max points, then internal styles, then external styles and in the external, 1000 points for id, 100 for tag...etc

Something like that, but when i have separate class names, then how can there be a conflict. What is happening?

Can you please create a fiddle? These styles has to work with both, `.vehicle` and `.customer` classes in HTML. — pavel, May 14 '15 at 06:45
@panther I tried, but since it's clear here, the fiddle works properly too. The Webapp i am working on was made by someone else and i am trying to edit it. I guess if someone can explain the principle behind this behaviour, i could figure something out. — notANerdDev, May 14 '15 at 06:47
One set of rules in the question doesn't affect the second set. Information you provided are fine, but HTML/CSS in question is correct and works. — pavel, May 14 '15 at 06:48
Are you appending `.customer` and `.vehicle` right after one another? — codyogden, May 14 '15 at 06:49
@JunaidAhmed That isn't what OP wants. The CSS in that fiddle doesn't even target the corresponding `div`s. — codyogden, May 14 '15 at 06:49
What is this #results doing in CSS its not in your HTML , is it required?. Because removing it might solve your problem or Adding id in HTML — divy3993, May 14 '15 at 06:51
CSS is correct, and so is everything if there exists a parent container with result id — Rusty, May 14 '15 at 06:52
I doubt you cannot use `id` twice in single page. so the problem is with `#id` — Kheema Pandey, May 14 '15 at 06:53
Issue is most likely due to the parent container with id "result" — Rusty, May 14 '15 at 06:53
@codyogden It's a live search, so one of the two gets appended. — notANerdDev, May 14 '15 at 06:53
@KheemaPandey You mean two separate tags might have the same id? — notANerdDev, May 14 '15 at 06:54
@user3324298 Does the layout breaks, or styles are not applied at all? — Rusty, May 14 '15 at 06:57
@Rusty - repeating an ID makes your DOM invalid, it is not merely "not recommended. Once your markup is invalid then the results of CSS and javascript targeting those elements is unpredictable. The results are _undefined_. Any time you are having strange problems like this, the _first_ thing to do is validate your DOM. — Stephen P, May 14 '15 at 06:59
@codyogden Nope. It completely ignore all styles. Yours is just positioned improperly. — notANerdDev, May 14 '15 at 07:00
@divy3993 removing #results from the CSS does not work. Problem persists. — notANerdDev, May 14 '15 at 07:01
@StephenP Got it :). It just can work in most browsers but will cause issues when we try to getElement in CSS and javascript — Rusty, May 14 '15 at 07:03
so, css for `#results .customer h3` and `#results .vehicle h3` are exactly the same. Pull those common pieces out to, say, `#results .item h3` and use multiple classes: `
...
Lorem
...` Doing this simplifies the style definitions, reduces the copy-paste repetition, and reduces the opportunities for errors. [DRY](http://programmer.97things.oreilly.com/wiki/index.php/Don%27t_Repeat_Yourself) = _Don't Repeat Yourself._ — Stephen P, May 14 '15 at 07:19
The identifier id must start with a Latin character and you are using a number — Dmitriy, May 14 '15 at 07:20
@Dmitriy Point noted. But since i am not using that selector, it should not affect the problem. In any case, i'll fix that. — notANerdDev, May 14 '15 at 07:28

score 0 · Answer 1 · answered May 14 '15 at 06:50

0

Check both class names are appended correctly inside the #results div

answered May 14 '15 at 06:50

Karthik N

515
2
9
22

They are and they have to be since they both do work separately, depending on whose CSS is at the bottom of the file. – notANerdDev May 14 '15 at 06:52

score 0 · Answer 2 · answered May 14 '15 at 06:52

0

Are your divs being appended inside a results container? I would suggest removing the #results from the css and see how that affects it. It could be how the JavaScript is appending rather than css. Would it be possible to show the JavaScript which does the appending, just to make sure?

Also, those css rules appear the same to me, is that just for this question or how it appears in the application? If that's how it is in the app., you could apply a second class to each div and just have one rule

answered May 14 '15 at 06:52

Steven Brookes

834
6
27

Yes. Its being appended into the `
`. And give me one minute, i'll try your suggestions and reply. – notANerdDev May 14 '15 at 06:57
Changing the Javascript to give a common class to the appended html and using that class name in the CSS makes it completely ignore the CSS. No rules are applied, in either of the divs. – notANerdDev May 14 '15 at 07:06
That seems odd. Undo that and remove #results from your css rules, see if that helps. I'll post a fiddle in a few minutes when I have access to a PC, if its not answered by then – Steven Brookes May 14 '15 at 07:10

score 0 · Answer 3 · answered May 14 '15 at 08:04

So my problem is gone.

In my CSS file, just above the CSS was a comment. Unfortunately i didn't follow the proper CSS comments syntax and typed an HTML comment. That was interfering with the immediate style under it.

<!--Lorem Ipsum-->
#results .vehicle {
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .vehicle h2{
    font-size: 2.5em;
}
#results .vehicle h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}
#results .customer{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .customer h2{
    font-size: 2.5em;
}
#results .customer h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

With that comment, only the bottom styles, i.e. #results .customer, #results .customer h2 and #results .customer h3, work.

But if i remove the comment,, or if i write it like this /*Lorem Ipsum*/, they all work.

I blame my IDE too, the colors profile made it appear that the comment wasn't interfering.

CSS confusion. Exactly similar tag, exactly similar CSS, but not working properly

Lorem

3 Answers3