not showing inside

Question

In chrome the  is not showing. The fiddle for the whole website is here

If I remove  or set the  before the  all the CSS need for it to look fine is removed.

HTML for one of the parts involved

<p class="text-box">Du mister beskyttelsen ved å gjøre en av disse tingene</p>
            <b><p class="text-box">Som Traitor</p></b>
        <p class="text-box"
   <span class="co">Skyte med våpen
            <br>Prop kill</br>
            <br>Goomba stomp</br>
            <br>Dra ut et traitor våpen</br>
            <br>Eller hvis for mange spillere er proven</br>
  </span></p>

CSS

    .co {
    font-family: 'Consolas', 'monospace';
    padding: 2px;
    display: inline-block;
    background-color: rgb(64,64,64);
    color: white;
    font-size: 12px;
    border-radius: 2px;
    }

    .box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    }

.box-wrap p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: justify;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}

I'm stuck in my ways and I don't know what to do

First you should try simply running your code through the w3 validator, http://validator.w3.org/ — Caimen, Apr 18 '14 at 17:47
@Caimen don't get me wrong, this question is silly and I agree he could have put a small amount of effort into fixing it, but I wouldn't jump to W3C to hunt for a problem :P — Ian Clark, Apr 18 '14 at 17:48
Tip: On your fiddle you can import jquery under the "Frameworks and extensions" option in the upper right hand corner instead of pasting it into the javascript section. — Brandon Johnson, Apr 18 '14 at 17:48
@adrichman It's at the end of the HTML code, as I said in my main post the CSS is gone if I set the before — user3549699, Apr 18 '14 at 17:50
@user3549699 No, you're missing the point. you have `
` note the missing `>` — Kevin B, Apr 18 '14 at 17:51

Adjit · Accepted Answer · 2014-04-18T19:12:16.610

2

You need to fix all of the  tags so that they close and it should work... I also cleaned up your fiddle so that you don't have unnecessary code in it...

http://jsfiddle.net/Gu7gC/2/

<p class="text-box"> <--- This is what you need to fix
   <span class="co">Skyte med våpen
            Prop kill<br/>
            Goomba stomp<br/>
            Dra ut et traitor våpen<br/>
            Eller hvis for mange spillere er proven<br/>
  </span>
</p>

edited Apr 18 '14 at 19:12

answered Apr 18 '14 at 17:49

Adjit

10,134
12
53
98

This worked, and I was stupid enough to think that I needed . Thank you for doing this. – user3549699 Apr 18 '14 at 18:03
-1 br is an empty tag. It does not have an end tag. Please check this http://www.w3schools.com/tags/tag_br.asp – Rupam Datta Apr 18 '14 at 18:20
@RupamDatta copy and paste error... why didn't you edit it? wasn't answering anything in regards to the `
` tag – Adjit Apr 18 '14 at 19:12
@RupamDatta, please [avoid referencing w3schools](http://w3fools.com). The Mozilla Developer Network (MDN) is a much better resource: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br – ChrisGPT was on strike Apr 18 '14 at 19:31
@Chris, well the point I made was not to use start and end tag for br tag since br tag is an empty or singleton tag. I referred w3schools because even they say the correct use of br tag. Otherwise, there are many other references which I could make. In stackoverflow itself there are questions asked and solved on proper usage of br tag. refer: http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br – Rupam Datta Apr 19 '14 at 03:13
@RupamDatta, I understand the point you were making. But w3schools is a poor resource and we should avoid it when possible. – ChrisGPT was on strike Apr 19 '14 at 03:14
@Chris I understand that. I personally don't go there. I googled and w3schools was the first choice so I put the link. Thanks for raising this point. – Rupam Datta Apr 19 '14 at 03:16

score 0 · Answer 2 · answered Apr 18 '14 at 17:56

0

The fiddle contains some serious errors, a lot of tags are not closed properly, if you look through the code you will see some code marked in red, these are not closed properly and are most likely causing your problem.

answered Apr 18 '14 at 17:56

Slugge

180
1
11

"a lot" http://hyperboleandahalf.blogspot.com/2010/04/alot-is-better-than-you-at-everything.html – MiniRagnarok Apr 18 '14 at 17:57

score 0 · Answer 3 · answered Apr 18 '14 at 18:02

you are missing closing of

 Skyte med våpen Prop kill Goomba stomp Dra ut et traitor våpen Eller hvis for mange spillere er proven 

and be sure that all tags have their closings.

span is just like a content holder as div. So it is better to use span to hold p tag rather than using span inside p tag.

Rupam Datta · Answer 4 · 2014-04-18T18:18:36.957

Incorrect DOM is the cause of you problem. Please correct that first. Following is an example.

<p class="text-box">
     Du mister beskyttelsen ved å gjøre en av disse tingene
</p>
<p class="text-box">Som Traitor</p>
<p class="text-box">
    <span class="co">
        Skyte med våpen
        Prop kill<br />
        Goomba stomp<br />
        Dra ut et traitor våpen<br />
        Eller hvis for mange spillere er proven<br />
    </span>
</p>

I feel you have to check about HTML tags and the usage. For instance, br tag is a singleton tag. i.e., it does not have start ( ) and end() tags as you have used. Its  

The other instance is 'span' is an inline element and 'p' is a block element. Semantically correct html cannot have a block element inside an inline element. Similarly, you cannot put 'p' element inside 'b' element.

I'd ask you to go through the HTML first and I expect all your problems will automatically be solved.

Appreciate your time. Thanks!

FIDDLE

not showing inside

4 Answers4