Remove oval border-radius when 2 digit numbers show up


Tags: html,css,css3

Problem :

I'm trying to set a perfect circle and manage to do that when I have to show the numbers from 1 to 9 but it gets messed up when two digits are shown. I can't seem to figure a way out.

Here's the html:

<span>8</span>
<span>9</span>
<span>10</span>

The CSS:

span{
    float: left;
    font-size: 10px;
    position: relative;
    border: 1px solid #000;
    border-radius: 50%;
    padding:5px 10px;
    margin: 5px;
}

See how the border radius around 10 messes up and becomes an oval :(

Example: http://jsfiddle.net/aKmF6/21/



Solution :

You need to define height and width, try this:

span {
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
}

    CSS Howto..

    How to keep css style for only one element

    How to set the background image of an DIV in CSS?

    How can I align an image with css

    960 grid css : How do I change vertical padding between divs?

    How to set div height to fit the screen css

    How To Include CSS and jQuery in my wordpress plugin?

    How to select label tags that do not have a span inside them using css

    How to override a display:none property applied to parent element in specific child elements

    How to use cross domain dynamically generated CSS

    How to make Wrapper div contain only non-overflowing divs

    How to give viewers custom CSS option

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    HTML CSS how to adapt text on a Div's size [closed]

    How to find replacements of CSS 2.1 properties missing in CSS 3?

    How to change color of text based on the php condition [closed]

    How to make 3-Column layout with fluid center (fully utilize space), and variable-length on sidebars

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    How to pass to next line that cutted elements in a list?

    How to make SVG clip-path work correctly in Google Chrome?

    How to Limit the Div Exactly into the Screen Size

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to “crop” a rectangular image into a square with CSS?

    How to make attractive dropdown menu using css3? [closed]

    Sencha Touch how to load custom CSS , JS if user is using PC or Tablet or SmarthPhone?

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    How can I use True Type Collection (.ttc) in JavaFX?

    How to add font to a web page

    how to reposition label which sits on top of the checkbox

    How to make diagonal titles on html tables

    How to expand text to full DIV width