So I'm attempting to create a profile cover like the one shown below:
This is what my code looks like:
<div class="show_cover">
<%= image_tag @show.cover(:show_cover) %>
<!-- Mouseover Options-->
<% if current_user == @host %>
<div class="options">
<%= link_to "Edit #{@show.name} Show", edit_show_path, class: "btn btn-embossed btn-danger btn-mini" %>
<% end %>
</div>
<div class="show_cover_info">
<div class="pull-left">
<b><%= link_to @show.name, @show %></b><br>
<small>The Best Show all over the Net</small>
</div>
<div class="pull-right">
<%= link_to root_path,
class: "btn btn-embossed btn-mini btn-social-facebook" do %>
<i class="icon-facebook"></i> | Facebook
<% end %>
<%= link_to root_path,
class: "btn btn-embossed btn-mini btn-social-twitter" do %>
<i class="icon-twitter"></i> | Twitter
<% end %>
</div>
</div>
</div>
And here's the CSS for it:
.show_cover {
position: relative;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.options {
position:absolute;
top:10px;
left:10px;
display:none;
}
.show_cover:hover
.options {
display:block;
}
.show_cover_info {
padding: 10px;
font-size: 16px;
}
.show_cover_info small {
position: relative;
font-size: 12px;
font-weight: normal;
word-wrap: break-word;
color: #888;
}
However, I am only getting this result:
The Issue:
The border radius is not wrapping around the title and social buttons correctly. There seems to be a line between them that shouldn't be there. What am I missing in my code?