-2

I use a same-domain iframe to load some page elements.

Despite a 'link rel' to my main css, font size is smaller in the iframe.

A simple work-around is to add a class/div to the iframe content, and target it with additional css increasing font size.

I'm wondering what causes the issue.

gulliver
  • 127
  • 6
  • We cannot help without you posting the (reduced) code as relevant here. That would be a guessing game. – arkascha Jul 01 '17 at 07:38
  • _Most likely_ your css rule does not get applied. Reason might be the selector you implemented for controlling the font size. Does it _really_ match the _document_ or only containers within? Check using your browsers console. – arkascha Jul 01 '17 at 07:38
  • can you show us the code – Amaan Iqbal Jul 01 '17 at 08:24
  • @arkascha... thanks. Selecting just the relevant css isn't easy. Clearly some of it is applied to the iframe content... for example, the h3 font-family - although it displays smaller than outside of the iframe. My h3 rule isn't restricted to specific divs/classes, so I'm puzzled. Using iframes very sparingly, there's no specific iframe rules apart from the one mentioned in my original post - added to wrap the iframe content so that I can target it specifically. I don't pretend to be an expert here, and hence wondered if there's some issue where iframes don't always apply css. – gulliver Jul 01 '17 at 13:59
  • @Amaan Iqbal... thanks. Please see my preceding comment about css. – gulliver Jul 01 '17 at 14:00
  • "_Selecting just the relevant css isn't easy._" Why that? All you need is a right click to examine the element, then look up the markup tree until you reach the iframes document element. – arkascha Jul 01 '17 at 14:20
  • Note that a `h3` tag by itself makes attempt to define the base font size, it works relative, _unless_ you specify a precise size which you certainly did not. So the question is what general font sizes are set for the two documents: the one inside and the one outside the iframe. – arkascha Jul 01 '17 at 14:21

1 Answers1

0

You can try giving id to the iframe and give font-size certain value followed by !important

eg.

font-size:60px   !important;
Amaan Iqbal
  • 761
  • 2
  • 9
  • 25
  • thanks. As mentioned in my original post, the iframe has an id, and by wrapping the iframe content (not the frame) in another div I can specifically target it for correction without applying '!'. – gulliver Jul 01 '17 at 14:03
  • Wouldn't it make more sense to find out the cause if the issue instead of nailing a work around over it by brute force? – arkascha Jul 01 '17 at 14:22
  • @arkascha... agreed, and I can see no reason for the issue... the iframe applies some of the css, and there appear to be no conflicting rules/specificity. – gulliver Jul 01 '17 at 15:08
  • @gulliver This is not about conflicting rules. It is about rules not getting applied obviously. I recommend you add the relevant parts of that css file to the question. – arkascha Jul 01 '17 at 15:18
  • Refer [this](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) once – Amaan Iqbal Jul 01 '17 at 16:07