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 Source
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>