Hello, I’m trying to make a div with a border width of 9px and a border color of bright red and within that div another group of slightly smaller divs with a border width of 1px and a border color of grey to hold my social buttons such as Google +, Facebook like etc. I am having trouble with coding the div however to have the border color.
My HTML is
<div class="socialdiv">
<p class="follow">Follow EntirePersonal Injury</p>
<div class="socialitem" align="left"> <a href="http://plus.google.com/112315720353742179078" target="_blank">Entire Injury</a> on <img src="images/google-plus.jpg" width="26" height="26" alt="Google +"> <!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/112315720353742179078" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<div class="socialitem" align="left"> <a href="http://" target="_blank">
</a></div>
<div class="socialitem" align="left"><div class="fb-like" data-href="http://www.facebook.com/pages/Entire-Personal-Injury/255467684578775" data-width="240" data-show-faces="true" data-send="true"></div></div>
<div class="socialitem"><a href="https://twitter.com/entireinjurylaw" class="twitter-follow-button" data-show-count="false">Follow @entireinjurylaw</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>
<div class="socialitem" align="left"> <!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" width="300" href="https://plus.google.com/112315720353742179078"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
</div>
My CSS is:
}
.socialdiv{
width:265px;
padding:6px;
border-width:9px;
margin:6px;
border-color: #F00;
}
.socialitem{
width:255px;
padding:1px;
border-width:1px;
border-color: #666;
margin:1px;
}
.follow {
font-weight: bold;
}
Which results in the box on entirepersonalinjury.com/index2.html - no borders for either div.
Could someone point out if I am making a mistake.
Thanks very much in advance
Gordon.