0

I have the following css code:

blockquote {
    color:#bc6d10;
    font-family: 'FranklinGothicURW-Dem';
    font-style:normal;
    float:left;
    margin:0;
    font-size:1.5em;
    margin:20px 0 5px;}

blockquote p {
    font-size:1.4em;
    line-height:1em;
    float:left;
    width:88%;}

blockquote:before, q:before {
    content:"❞";
    font-size:6em;
    line-height:0.9em;
    float:left;
    width:12%;
}

It produces this ie Chrome:

enter image description here

And this in IE10:

enter image description here

I'm not that fluent in CSS, so I am having some trouble figuring out why. Does anyone know why?

ptf
  • 3,210
  • 8
  • 34
  • 67
  • can you pleaes provide the link where you are facing this problem? – Leo the lion Jul 10 '15 at 07:50
  • @Leothelion http://www.noradbloggen.no/2014/12/hva-er-egentlig-resultatorientering/ – ptf Jul 10 '15 at 07:55
  • i have tried and got the solution but for this you have to apply css for ie 10..just change the css of blockquote p and .entry-content blockquote for ie 10 only and it will work..:) if you need then i can provide code but i can't test it so if ok then let me know..ty – Leo the lion Jul 10 '15 at 08:20
  • 1
    If you want to you should create an answer so I can accept it if it works, and if you want to, add the code, then other people might see it if they need it. – ptf Jul 10 '15 at 08:28
  • ok, give me few min..m creating code and please test that and let me know if any error occurs..ty – Leo the lion Jul 10 '15 at 08:37

2 Answers2

3

Maybe try using rem units vs em. Something like:

blockquote:before, q:before {
  font-size: 6rem;
  line-height: 0.9em;
}

That way your sizes will be relative to the base font size and not parent size (which IE might be calculating differently than other browsers do).

It will render the same in Chrome and IE, but you'll probably have to tweak the sizes a bit.

Slavenko Miljic
  • 3,836
  • 2
  • 23
  • 36
  • no it wont work in ff..and even icon is not according to p..:( – Leo the lion Jul 10 '15 at 08:52
  • Are you sure, I've tested in FF, Chrome and IE, and in all three browsers I get the same result? Like I said you'll probably need to change values a bit to fit your needs/layout. – Slavenko Miljic Jul 10 '15 at 09:36
  • but then i have to change the value for chrome and as well as for ff too so won't be better to apply particular css for ie only? m not saying you are wrong but m talking about other browsers.. – Leo the lion Jul 10 '15 at 10:27
  • I ended up combining the answers, still needs a little tweaking though, but I needed to IE10 only style (or so I think). – ptf Jul 13 '15 at 12:58
0

As far as i got the point, you have to use some tweaks in css..

please test this code as m not able to test..

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.entry-content blockquote {font-size:20px;}
     blockquote::before, q::before 
     {
         margin-top:-53;
         margin-left:-20;
         font-size:6.6rem;
     }
}

and let me know if it is working or not..

Yes Slavenko's answer is better then me so you can combine both..just change the size but then don't forget to change the margin top as it must..line height is not working there..

sorry if it wont work as its not tested as i discussed with you before..

Updated I just changed the size and margin so please re test..

Leo the lion
  • 3,164
  • 2
  • 22
  • 40