Only Lower Half Of The Border Is Shown


Tags: jquery,css,html5,css3,hover

Problem :

CSS

.socialmedia 
{
    border: solid 10px transparent;
}

.socialmedia.hover 
{ 
    border-color: WHITE; 
}

HTML

<div id="mediashelter" >
<a href="http://www.facebook.com" id="fbid" class="socialmedia" target="_blank">
<img src="lol.jpg"></a>  
</div>

Source

http://truestar.sdf.org/check/lol.html

How can I make the entire border to appear? At the moment I just see the lower part of the border



Solution :

Add display:inline-block as follows:

.socialmedia 
{
    border: solid 10px transparent;
    display:inline-block;
}

    CSS Howto..

    How to make a number of breaks in CSS? [closed]

    How to control the expandability of textarea from width perspective

    How do I get these two columns to have the same height at all times - CSS?

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    How do you structure css files for a web project?

    How Do I Trigger My jQuery Event?

    how to use namespaces in css?

    How to call css into div class inner div class? [closed]

    How to add threshhold onclick() jQuery?

    How to slide a div out

    How to use same css for separate media query conditions

    How do i center an HTML DIV with logo on the left?

    How to add css files to a custom module in Odoo 8?

    How can I get this CSS to display properly in IE8?

    how to apply css to a specific element of a table?

    How do you overlay two divs and make them the same height?

    How to revise the css transitions with a delay

    How to switch tabs and change css class on click using Angular2?

    How to do multiple class selectors in Stylus CSS pre-processor

    How to deal with different screen resolutions in CSS?

    Jquery not showing select element. No errors in console

    How to keep the aspect ratio of the image in css?

    How to have different transistions for background-image and text in a div using CSS

    How to make a CSS transform affect the flow of other elements

    How do I make part of a style element a function? (IE: color:$random instead of color:red)

    How do I prevent my dropdown from closing when clicking inside it?

    Cannot figure out how to center multiple links in a navigation bar using CSS

    How to split page in half using CSS?

    Why css3 slideshow does not work

    How to Add external Javascript and CSS for CakePhp