Text in rounded corners and hover not working
<!DOCTYPE html>
<html>
<head>
<style>
.round{
-moz-border-radius:50%; /* for Firefox */
-webkit-border-radius:50%; /* for Webkit-Browsers */
border-radius:50%; /* regular */
opacity:1; /* Transparent Background 50% */
background:#eee;
padding:40px;
height:70px;
width:70px;
text-align: center;
alignment-adjust: middle;
vertical-align:middle;
text-decoration: none;
color:#000;
}
.round:hover{
-moz-border-radius:50%; /* for Firefox */
-webkit-border-radius:50%; /* for Webkit-Browsers */
border-radius:50%; /* regular */
opacity:1; /* Transparent Background 50% */
background:#000;
padding:40px;
height:70px;
width:70px;
text-align: center;
alignment-adjust: middle;
vertical-align:middle;
text-decoration: none;
color:#fff;
}
</style>
</head>
<body>
<a href="#"><div class="round"><img src="favicon.png" align="center"><br
/>Power and Electricity</div></a>
<a href="#"><div class="round"><img src="favicon.png" align="center"><br
/>Power and Electricity</div></a>
<a href="#"><div class="round"><img src="favicon.png" align="center"><br
/>Power and Electricity</div></a>
<a href="#"><div class="round"><img src="favicon.png" align="center"><br
/>Power and Electricity</div></a>
</body>
</html>
and goes my questions: 1. Why is the text decoration not working? 2. The
text changes color on hover but not the underline! Why? 3. All the div
appears in vertical one after another. How do i place it horizontally
across the screen and auto have it come to second row at the end of the
screen? 4. Is this the best practice? Which browsers will this not work
on? I tried on all the latest version of safari, chrome and firefox. Not
sure if it will work on IE8
No comments:
Post a Comment