The box doesn't work (html/css)

Question

The box doesn't work (html/css)

360 Views Asked by Marked as Duplicate At 19 October 2024 at 16:31

So can anyone tell what's wrong with my code? So I'm trying to add a blue dashed 'block', but somewhy it doesn't get displayed (it seems like the font gets changed, but the box still doesn't appear). I had an similar problem before, but I don't know what's wrong this time. Am I missing a semicolon somewhere or just wrote something wrong?

When I launch the code in JSFiddle, it seems to work fine, but when I'm opening the SAME code with the .html file, everything still seems not to work (pic: https://i.stack.imgur.com/Kb0ty.png). I'm Anyone got ideas why (the css file is in right location)?

https://jsfiddle.net/j31dgz70/1/

#info {
  color: blue;
  background: silver;
}

.welcome {
  color: purple;
  font-size: 20px;
  background-color: aqua;
  text-shadow: 1px 1px silver;
}

#tab {
  background-color: blue;
}

code {
  font-family:"Comic Sans MS", cursive, sans-serif;
  display: inline-block;
  height: 20px;
  width: auto;
  padding: 2px;
  margin: 4px;
  background-color: #7FECFF;
  text-align: center;
}

.box {
  border: 1px dashed #540CE8;
}

<!DOCTYPE html>
<body>
  <p id="tab"><b>About page</b>

  </p>
  <article>
    <code class="box">
      Contact: <a href="mailto:[email protected]">Email me</a>
    </code>

    <a href="index.html"><br>Return to homepage.</a>

  </article>
</body>

Original Q&A

There are 4 best solutions below

**Tom Durkin** · Answer 1

The bordered box is showing fine here, however everything seems broken as its trying to fit inside 'code' which is only 40px wide.

If you remove the width it seems to render fine.

code {
  font-family: "Comic Sans MS", cursive, sans-serif;
  display: block;
  height: 20px;
  padding: 2px;
  margin: 4px;
  background-color: #7FECFF;
  text-align: center;
}

http://codepen.io/tomdurkin/pen/vOeLVb

**zombiecode** · Answer 2

This is how it comes out to me on fiddle: http://jsfiddle.net/jimmynewbs/j31dgz70/

see fiddle

The code you have specified as 40px wide, so the text is too big for that section.

I would suggest making the width larger, or removing the width and floating the element so that it will take the width of it's content...

**PavanAsTechie** · Answer 3

PavanAsTechie On 18 June 2015 at 14:13

Just add width: 160px; for responsive use width: 40% or any value according to screen

.box {
    width: 160px;
border: 1px dashed #540CE8;
}

Here is link JS FIDDLE

**Paulie_D** · Answer 4

It's the <br/> that is causing the problem.

It forces a line break but the height restricts what is visible.

Remove the break tag. If you want spacing, use margins or padding...that's what they are for.

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block height: 20px;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }

<code class="box">
Contact: <a href="mailto:[email protected]">Email me</a>
</code>

<code class="box">
    Contact: <a href="mailto:[email protected]">Email me<br/></a>
</code>

Alternate Options if you wanted the 'box' to have two lines

Option 1: Retain the break tag but move it. (Not optimal but ok)

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }

<code class="box">
    Contact: <br/><a href="mailto:[email protected]">Email me</a>
</code>

Option 2: Make the link a block

    code {
      font-family: "Comic Sans MS", cursive, sans-serif;
      display: inline-block;
      padding: 2px;
      margin: 4px;
      background-color: #7FECFF;
      text-align: center;
    }
    .box {
      border: 1px dashed #540CE8;
    }
    .box a {
      display: block;
    }

<code class="box">
    Contact: <a href="mailto:[email protected]">Email me</a>
</code>

The box doesn't work (html/css)

There are 4 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BLOCK

Trending Questions

Popular # Hahtags

Popular Questions