Consider this CSS:
.tbl-div > h1 {
border-bottom: 1px solid black;
display: block;
font-size: 25px;
margin: 10px -15px 30px -10px;
padding: 0 0 0 40px;
}
.tbl-div > h1 > span {
color: #006ec7;
display: block;
font-size: 14px;
}
This styling is used for a simple output div. When implemented, the HTML structure would be as follows:
<div class="tbl-div">
<h1>*title*<br><span>*subtitle*</span></h1>
*content goes here*
</div>
The aim of the header section is to have a large main text followed by a smaller subtitle in blue font. However, when this code is placed inside an iframe, the formatting doesn't work properly. The CSS properties seem to be ignored and the text appears oversized at 25px.
This issue only occurs within an iframe and exclusively with these specific CSS properties. No other browser experiences this problem. What could be causing this behavior?