I am facing issues with resizing boxes. Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
text-align: center;
}
#bubble {
display: inline;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 5px;
width: 100px;
height: 100px;
position: relative;
border: solid;
border-width: 1px;
background-color: #999999;
font-name: arial;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="bubble">Box 6</div>
<br clear="all">
<div id="bubble">Box 5</div>
<div id="bubble">Box 5</div>
</div>
</body>
</html>
The issue I am facing is that despite specifying 100px x 100px size for the boxes in the style, Chrome displays them as 42px x 19px.
There might be a simple solution that I seem to have overlooked. -.-°
I appreciate any assistance provided. Thank you.