cat16 cat16 - 1 month ago 6
CSS Question

unwanted line with link between divs

I'm using html and css to make 3 boxes act as links, equally spaced apart. For some reason when I got the divs to be equally spaced, a line was created between all three, acting as a link to the div left of the line.

Why is the line there?

here is the code: (with some stuff taken out)



.divider{
text-align: center;
}
.image{
float:left;
}
#javatut, #frgames, #scratchtut{
display: inline-block;
zoom: 2.0;
background-color: #c0c0c0;
text-align: center;
padding: 10px;
width: 20%;
}
#javatut {
border: 2px solid #ff8300;
}
#frgames {
border: 2px solid #0000ff;
}
#scratchtut {
border: 2px solid #ff8300;
}
#container {
text-align: justify;
}
.stretch {
width: 100%;
display: inline-block;
}

<div id="container">
<a href="url">
<div id="javatut">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="frgames">
<!-- stuff in here -->
</div>
</a>
<a href="url">
<div id="scratchtut">
<!-- stuff in here -->
</div>
</a>
<span class="stretch"></span>
</div>




Answer

This line is caused by the browsers default styling of links as underlined. Just set text-decoration: none; on your links and the line will be invisible.

a {
  text-decoration: none;
}
.divider {
  text-align: center;
}
.image {
  float: left;
}
#javatut,
#frgames,
#scratchtut {
  display: inline-block;
  zoom: 2.0;
  background-color: #c0c0c0;
  text-align: center;
  padding: 10px;
  width: 20%;
}
#javatut {
  border: 2px solid #ff8300;
}
#frgames {
  border: 2px solid #0000ff;
}
#scratchtut {
  border: 2px solid #ff8300;
}
#container {
  text-align: justify;
}
.stretch {
  width: 100%;
  display: inline-block;
}
<div id="container">
  <a href="url">
    <div id="javatut">
      <!-- stuff in here -->
    </div>
  </a>
  <a href="url">
    <div id="frgames">
      <!-- stuff in here -->
    </div>
  </a>
  <a href="url">
    <div id="scratchtut">
      <!-- stuff in here -->
    </div>
  </a>
  <span class="stretch"></span>
</div>

Comments