Quantcast
Channel: Tiffany B. Brown » Browsers
Viewing all articles
Browse latest Browse all 20

Range controls and padding in IE10+

$
0
0

While working on a video player for a forthcoming book, I noticed a peculiar spacing issue with <input type=”range”> that affected the layout of this player.

Internet Explorer does something a little weird that no other browser does: it throws several pixels of padding along the top and bottom of the range element by default (Figure 1).

Padding around  in Internet Explorer 10.Padding around <input type="range"> in Internet Explorer 10.

There’s so much padding that you don’t actually need to touch the range element in order to change its value — just bring your mouse or finger within a 20 pixel (or so) vicinity. The fix is easy, of course. Just use CSS to change padding ex: padding: 0;.


Viewing all articles
Browse latest Browse all 20

Trending Articles