Question

While trying to troubleshoot a problem I’m having with a project, I noticed that there was a random ‘/’ appearing in my css file. Upon removing it, it actually made part of the border disappear in Firefox, and even more of it disappear in Chrome… I’ve stripped down the code to the bare essentials trying to figure out the problem, and still can’t figure it out. I’ve narrowed the root of the problem down to the ‘items’ class in my css, but don’t understand what’s wrong with it, as when I validate just that class it doesn’t throw any errors.

Here is how it is displaying with the slash removed:
http://jsfiddle.net/NrYws/2/

And here it is with the slash in the place it was before I removed it, and how it displays properly (in both FF and Chrome)…
http://jsfiddle.net/NrYws/3/

Moving the slash to a different spot in the file (i.e. above the outerContainer class) results in the bad display. When I remove the ‘items’ class altogether, it works fine:
http://jsfiddle.net/NrYws/4/

I know it seems like the items class isn’t necessary right now, but its just because I have stripped everything down to the bones to try to fix this, and is needed for the actual project.

Any ideas as to what’s going on here? I’m sure its something painfully obvious that I’m just over-looking….

Thanks!

Answer 1

It works as if it deleted the first paragraph .items. Remove it and it displays correctly.

Removing solely overflow: hidden in .items works as you want it to work, I believe.

Though if overflow: hidden is required for whatever you’re doing, we’re going to need more that just this code to propose you a fix that works as you expect it to work.