Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pseudo open/close quote marks mess up on browser resize (slideshow) Reply To: Pseudo open/close quote marks mess up on browser resize (slideshow)

#241446
bearhead
Participant

Yeah it seems pretty weird to me… I wonder if giving blockquote > p:after and blockquote > p:before completely separate styles might fix the problem… the issue sort of seems like its because of some strange conflict between the styles for blockquote > p:after:

blockquote > p:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}

and

blockquote > p:before, blockquote > p:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;

edit:
Not sure what the issue is exactly, but adding overflow:hidden to
blockquote > p:before, blockquote > p:after seems to fix the problem in chrome.