Search code examples
cssgoogle-chromeyui

YUI-3 Grids && Google Chrome: Overlapping text


I'm not a UI guy, but I am forced having to do some CSS for a side project. I'm currently using YUI-3 files; grids, reset, and fonts, all of which are v3.9.1.

The issue that I am having is that my h2 tag text is overlapping an accent box with a set width, and it only appears to happen in Chrome. It renders fine in Firefox, Safari, and IE9. Anyone know of any issues?

Here is how it looks on Chrome: http://grab.by/lwEM

Here is how it looks on Firefox: http://grab.by/lwEY

Notice the count, 26 is hovering over the left accent in Chrome, but the accent has a fixed width of 6px.

-- Update --

Thinking the issue may reside in my custom css, I moved a code snippet out to test, and sure enough, even as basic as it is, with Chrome, there is a gap on the right side, which may explain why my text is overlapping. It looks like it is being caused by the YUI reset.css.

Code snippet: http://cssdesk.com/4ctMs


Solution

  • Gah... was browsing the YUI Css libs and saw the notice: 'Note: The file "grids.css" is deprecated, use "cssgrids.css" instead.' Not sure when they altered it, but when I made the change the page rendered as expected.

    On a side note, I used to use Base + Reset, but it appears the devs released YUI Normalize, which has a different approach to normalizing across browsers, definitely going to check it out as well.