0

I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML

<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>

and the below style

#personName {
        display: block;
}

#moreInfo {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 32px Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    display: inline-block;
}

The problem is I also have this style

* {
    box-sizing: border-box;
}

which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161

2 Answers2

1

That's because box-sizing: border-box includes both the border and the padding in the height computations.

Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.

In your specific case, you can increase the height and width to the following to make it look like you want to:

width: 57px;
height: 57px;
Jesse
  • 3,522
  • 6
  • 25
  • 40
  • Thanks. Is there any wya to keep the box-sizing property and change my CSS so that my "i" icon will display properly? –  Feb 08 '18 at 16:22
  • Why don't you just remove the padding? https://jsfiddle.net/ds9sqr0y/1/ I don't know exactly how it should look but the padding seems unnecessary – Huangism Feb 08 '18 at 17:03
  • @Natalia you can simply increase the height to where it looks normal. In your case, a `width` and `height` of `57px` seem good. – Jesse Feb 08 '18 at 21:23
  • Thanks. Is there any way to somehow tell the circle to just surround the "i" without specifyhing hard-coded "height" and "width" attributes? LIke maybe say something like have a circle with a radius of 3px padding or something? –  Feb 08 '18 at 21:37
  • If you want a circle with a specific radius, you specify its `height` and `width`, that's how CSS works. – Jesse Feb 09 '18 at 07:56
0

As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.

#moreInfo {
    ...
    padding: 0;
    font: 30px Arial, sans-serif;
    ...
}
sassquad
  • 136
  • 1
  • 6
  • @Natalia this is where you put some effort in testing for cross browser. The answer says it was tested in chrome but it doesn't mean it won't work in other browsers. Test it in other browsers and adjust as you need to, but the issue has been pointed out, you should be able to figure it out from here – Huangism Feb 08 '18 at 21:42