Using parent styles in an iframe

  • caspersgrin
  • Born
  • Born
  • caspersgrin
  • Posts: 2

Post 3+ Months Ago

Hi,

In my ruthless efforts at separating process from presentation, I've come across a problem that baffles me. I'm using a frameset with just a left-hand and a right-hand frame. The document in the right-hand frame includes an iframe. The iframe is populated with the output from a servlet well after load time. The output of the servlet is simply a body text surrounded by html tags. I have also embeed the text is a <div class="resultsText">...</div> tag set specifying a style defined in the parent document. It seems that the div tag is being ignored (i.e., doesn't recognize the style). How can I get the iframe to recognize a style defined in the parent document?

Thanks,

Rob Tanner
Linfield College
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

well, the way you do things I really don't like frames with more frames inside them ... but anyway ... how about putting a <link> to your stylesheet inside the iframe code ... ?
  • caspersgrin
  • Born
  • Born
  • caspersgrin
  • Posts: 2

Post 3+ Months Ago

righteous_trespasser wrote:
well, the way you do things I really don't like frames with more frames inside them ... but anyway ... how about putting a <link> to your stylesheet inside the iframe code ... ?


That's what I ended up doing, but it's not what I consider an elegant solution. I have somewhere around 3 dozen web applications for internal data management and I use about half a dozen styles for a consistent look and feel, and those are on a separate sheet that gets loaded in at run time. But every application also has a number of styles unique to a particular page and those I include on the page. And that's the easiest way for me to keep the pages organized. Doing a second separate style sheet loaded in with a <link> violates a schema that I really want to be consistent with. But I guess if the technology won't work any other way, I haven't got much of a choice.

-- Rob
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

that's the only way I could think of ... but then again, I never use frames or iframes for that matter ... I don't find them very elegant or at all ... so maybe someone else knows of another way ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

righteous_trespasser wrote:
that's the only way I could think of ... but then again, I never use frames or iframes for that matter ... I don't find them very elegant or at all ... so maybe someone else knows of another way ...

I do... drop frames and use PHP includes... do the same thing and you can make it look like frames too.. using the following CODES

design.css
CSS Code: [ Select ]
body {
 margin: 0;
 padding: 0;
}
.container {
 margin-left: auto;
 margin-right: auto;
 width: 800px;
}
.box1 {
 float: left;
 width: 200px;
 height: 700px;
 background-color: #999999;
 color: #FFFFFF;
}
.box2 {
 float: left;
 width: 600px;
 height: 700px;
 overflow: auto;
 background-color: #CECECE;
}
.box3 {
 width: 800px;
 text-align: center;
 background-color: #666666;
}
  1. body {
  2.  margin: 0;
  3.  padding: 0;
  4. }
  5. .container {
  6.  margin-left: auto;
  7.  margin-right: auto;
  8.  width: 800px;
  9. }
  10. .box1 {
  11.  float: left;
  12.  width: 200px;
  13.  height: 700px;
  14.  background-color: #999999;
  15.  color: #FFFFFF;
  16. }
  17. .box2 {
  18.  float: left;
  19.  width: 600px;
  20.  height: 700px;
  21.  overflow: auto;
  22.  background-color: #CECECE;
  23. }
  24. .box3 {
  25.  width: 800px;
  26.  text-align: center;
  27.  background-color: #666666;
  28. }

index.php
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Site Preferences</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="box1">
<?php
include('dir/file.html');
?>
</div>
<div class="box2">
<?php
include('dir/file2.html');
?>
</div>
<div class="box3">
<p>Copyright &copy; <a href="somesite.tld">some site</a> 2007-2008</p>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Site Preferences</title>
  5. <link href="design.css" rel="stylesheet" type="text/css" />
  6. </head>
  7. <body>
  8. <div class="container">
  9. <div class="box1">
  10. <?php
  11. include('dir/file.html');
  12. ?>
  13. </div>
  14. <div class="box2">
  15. <?php
  16. include('dir/file2.html');
  17. ?>
  18. </div>
  19. <div class="box3">
  20. <p>Copyright &copy; <a href="somesite.tld">some site</a> 2007-2008</p>
  21. </div>
  22. </div>
  23. </body>
  24. </html>

file.html
HTML Code: [ Select ]
<div class="content">
<p>blahblahblah</p>
</div>
  1. <div class="content">
  2. <p>blahblahblah</p>
  3. </div>

file2.html
HTML Code: [ Select ]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend metus. Morbi quam dui, sodales at, lobortis quis, porttitor id, justo. Maecenas purus ante, consequat quis, mollis auctor, adipiscing porta, nunc. Mauris eu tortor vitae quam dictum rutrum. Etiam consectetuer. Aenean et justo sit amet elit aliquet interdum. Etiam lorem ante, laoreet sed, pretium ut, elementum ut, nunc. Sed rutrum, metus vel elementum lobortis, nibh felis rutrum magna, quis auctor enim lacus eu nulla. Cras quis metus. Curabitur consequat libero nec magna. Mauris tincidunt mauris ultrices urna. Duis et diam. Aliquam ante. Morbi odio. Mauris eu diam at metus tincidunt consectetuer. Vestibulum sit amet enim sit amet nulla sagittis mollis.</p>
 
<p>Sed et odio. Aenean purus. Etiam elementum, enim nec sodales rhoncus, metus mi feugiat libero, vel dignissim lectus augue sit amet dolor. Nullam libero. Duis vel nunc ornare lectus imperdiet laoreet. Cras scelerisque elit a nisl. Nunc sapien turpis, sagittis non, accumsan in, posuere sodales, neque. Praesent a quam at mauris blandit aliquam. Aenean posuere magna eu tortor. Sed imperdiet auctor nibh. In blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 
<p>Fusce non est ut erat mollis volutpat. Duis id neque et lacus scelerisque laoreet. Aenean consectetuer iaculis odio. Mauris lacinia pulvinar neque. Pellentesque ultrices. Nunc nulla nunc, pulvinar nec, pulvinar quis, feugiat et, dui. Sed urna magna, rhoncus et, tincidunt ac, fermentum ut, magna. Suspendisse est diam, elementum sed, adipiscing et, auctor et, nulla. Cras commodo dui vel sem. Nam vitae est.</p>
 
<p>Integer dui erat, egestas sit amet, rutrum quis, luctus fringilla, risus. Nullam interdum. Donec venenatis rhoncus ipsum. Curabitur lectus. Nullam purus nibh, hendrerit vitae, euismod et, semper nec, sapien. Quisque dolor. Mauris convallis orci ac felis. Duis elit arcu, ultrices quis, congue ac, volutpat id, orci. Sed vehicula, lorem eget ultrices dignissim, diam eros molestie lorem, quis egestas velit tellus id tellus. Pellentesque malesuada sollicitudin velit. Maecenas adipiscing tincidunt dui. Cras massa. Nulla facilisi. Pellentesque nec dui vitae elit venenatis convallis. In ut nulla at elit egestas feugiat. Sed sed dui id quam interdum laoreet.</p>
 
<p>Maecenas porttitor. Aliquam erat volutpat. Vestibulum pharetra. Sed sit amet mi sit amet nulla semper sagittis. Maecenas vitae nulla vitae erat egestas vulputate. Sed hendrerit. In et massa. Mauris lectus velit, adipiscing non, luctus quis, ullamcorper a, nulla. Etiam posuere orci ut tortor interdum lacinia. Phasellus feugiat ligula ac neque ultrices commodo. Vivamus vitae magna vel eros ultricies rhoncus. Sed consectetuer luctus orci. Nulla rutrum volutpat dui. Nam fringilla eros laoreet diam tristique interdum. Curabitur ligula. Nam placerat nulla ut eros. Nunc tellus.</p>
 
<p>Donec purus. Donec sodales vestibulum ligula. Pellentesque bibendum tortor eget nisl. Cras nec mi ac ligula sodales mollis. Quisque pretium. Aenean nibh lacus, aliquam ut, sagittis sodales, fermentum id, nibh. Cras fermentum scelerisque magna. Quisque nunc dolor, condimentum nec, venenatis sit amet, pretium id, nisl. Nam bibendum auctor dolor. Sed quis magna eu sapien pharetra iaculis. Phasellus magna. Ut accumsan mattis augue. Ut non est. Fusce ligula nulla, tincidunt id, dapibus vitae, tempor vel, nisi. Nullam blandit diam eget dui. Mauris sollicitudin tincidunt mi. Praesent dictum fermentum odio. Quisque enim lorem, rhoncus sit amet, porta in, semper non, ante. Morbi eget justo ac quam dapibus aliquam.</p>
 
<p>Etiam sit amet eros. Ut posuere sollicitudin turpis. Donec cursus. Nullam tristique. Ut in urna blandit quam euismod eleifend. Mauris euismod augue eu augue. Nam vehicula nulla quis sapien. Curabitur mattis pharetra orci. Suspendisse pede velit, ultricies id, luctus non, malesuada et, libero. Sed ut quam eget felis venenatis consequat. Praesent at magna. Morbi odio. Mauris a ante. Integer consectetuer sapien eget odio. Sed dapibus nibh molestie augue. Proin eget nisl.</p>
 
<p>Phasellus venenatis. Sed at eros. Nullam convallis iaculis arcu. Duis justo nisl, consectetuer eget, venenatis eget, euismod eu, arcu. Curabitur nec lectus non enim imperdiet convallis. Sed ornare. Suspendisse potenti. come sociis natoque penatibus et magnis this parturient montes, nascetur ridiculus mus. Fusce tristique. Integer sagittis consectetuer nunc. Ut tempor luctus velit. Aliquam vehicula.</p>
 
<p>Aliquam facilisis nulla at est. Pellentesque quis pede. Nullam porttitor nisi eu odio. Cras sed leo ac sem congue tempus. Proin mauris. Fusce mattis, libero eget mollis elementum, risus quam placerat mi, eu viverra nisl mi in pede. Nulla urna orci, vehicula eu, bibendum at, vulputate eu, sem. Aenean id elit. Donec id ipsum ac sem gravida sodales. Aenean lobortis. Nam lacinia mi et nunc. Nulla facilisi. Morbi molestie scelerisque quam. Praesent dapibus erat at diam. Mauris in lorem a est tempus porttitor. Integer vel tellus. Sed condimentum rhoncus dui. Sed aliquam ligula quis risus.</p>
 
<p>Phasellus tincidunt odio in mauris. Mauris sit amet nunc in turpis posuere rutrum. Nunc tincidunt sapien ut justo. Mauris at ante eu augue bibendum consequat. Suspendisse nibh. Aenean semper, ante nec blandit dapibus, lorem lectus adipiscing elit, at congue tortor leo sit amet velit. In pellentesque, libero malesuada tincidunt interdum, pede nulla consectetuer felis, ut cursus nibh risus sed magna. Praesent eu ligula et erat euismod tempor. Aenean nibh tellus, pulvinar in, iaculis at, pulvinar non, magna. Mauris purus diam, bibendum in, semper a, lobortis non, est. Mauris felis arcu, placerat eu, faucibus sed, aliquet non, lorem. Vivamus volutpat. Aenean aliquet libero at nunc. Donec mollis elit at enim. Aliquam molestie congue est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia. Donec ultricies. Nam blandit, odio sed scelerisque aliquet, tellus erat elementum nisl, eget ornare neque nulla vitae est.</p>
  1. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend metus. Morbi quam dui, sodales at, lobortis quis, porttitor id, justo. Maecenas purus ante, consequat quis, mollis auctor, adipiscing porta, nunc. Mauris eu tortor vitae quam dictum rutrum. Etiam consectetuer. Aenean et justo sit amet elit aliquet interdum. Etiam lorem ante, laoreet sed, pretium ut, elementum ut, nunc. Sed rutrum, metus vel elementum lobortis, nibh felis rutrum magna, quis auctor enim lacus eu nulla. Cras quis metus. Curabitur consequat libero nec magna. Mauris tincidunt mauris ultrices urna. Duis et diam. Aliquam ante. Morbi odio. Mauris eu diam at metus tincidunt consectetuer. Vestibulum sit amet enim sit amet nulla sagittis mollis.</p>
  2.  
  3. <p>Sed et odio. Aenean purus. Etiam elementum, enim nec sodales rhoncus, metus mi feugiat libero, vel dignissim lectus augue sit amet dolor. Nullam libero. Duis vel nunc ornare lectus imperdiet laoreet. Cras scelerisque elit a nisl. Nunc sapien turpis, sagittis non, accumsan in, posuere sodales, neque. Praesent a quam at mauris blandit aliquam. Aenean posuere magna eu tortor. Sed imperdiet auctor nibh. In blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  4.  
  5. <p>Fusce non est ut erat mollis volutpat. Duis id neque et lacus scelerisque laoreet. Aenean consectetuer iaculis odio. Mauris lacinia pulvinar neque. Pellentesque ultrices. Nunc nulla nunc, pulvinar nec, pulvinar quis, feugiat et, dui. Sed urna magna, rhoncus et, tincidunt ac, fermentum ut, magna. Suspendisse est diam, elementum sed, adipiscing et, auctor et, nulla. Cras commodo dui vel sem. Nam vitae est.</p>
  6.  
  7. <p>Integer dui erat, egestas sit amet, rutrum quis, luctus fringilla, risus. Nullam interdum. Donec venenatis rhoncus ipsum. Curabitur lectus. Nullam purus nibh, hendrerit vitae, euismod et, semper nec, sapien. Quisque dolor. Mauris convallis orci ac felis. Duis elit arcu, ultrices quis, congue ac, volutpat id, orci. Sed vehicula, lorem eget ultrices dignissim, diam eros molestie lorem, quis egestas velit tellus id tellus. Pellentesque malesuada sollicitudin velit. Maecenas adipiscing tincidunt dui. Cras massa. Nulla facilisi. Pellentesque nec dui vitae elit venenatis convallis. In ut nulla at elit egestas feugiat. Sed sed dui id quam interdum laoreet.</p>
  8.  
  9. <p>Maecenas porttitor. Aliquam erat volutpat. Vestibulum pharetra. Sed sit amet mi sit amet nulla semper sagittis. Maecenas vitae nulla vitae erat egestas vulputate. Sed hendrerit. In et massa. Mauris lectus velit, adipiscing non, luctus quis, ullamcorper a, nulla. Etiam posuere orci ut tortor interdum lacinia. Phasellus feugiat ligula ac neque ultrices commodo. Vivamus vitae magna vel eros ultricies rhoncus. Sed consectetuer luctus orci. Nulla rutrum volutpat dui. Nam fringilla eros laoreet diam tristique interdum. Curabitur ligula. Nam placerat nulla ut eros. Nunc tellus.</p>
  10.  
  11. <p>Donec purus. Donec sodales vestibulum ligula. Pellentesque bibendum tortor eget nisl. Cras nec mi ac ligula sodales mollis. Quisque pretium. Aenean nibh lacus, aliquam ut, sagittis sodales, fermentum id, nibh. Cras fermentum scelerisque magna. Quisque nunc dolor, condimentum nec, venenatis sit amet, pretium id, nisl. Nam bibendum auctor dolor. Sed quis magna eu sapien pharetra iaculis. Phasellus magna. Ut accumsan mattis augue. Ut non est. Fusce ligula nulla, tincidunt id, dapibus vitae, tempor vel, nisi. Nullam blandit diam eget dui. Mauris sollicitudin tincidunt mi. Praesent dictum fermentum odio. Quisque enim lorem, rhoncus sit amet, porta in, semper non, ante. Morbi eget justo ac quam dapibus aliquam.</p>
  12.  
  13. <p>Etiam sit amet eros. Ut posuere sollicitudin turpis. Donec cursus. Nullam tristique. Ut in urna blandit quam euismod eleifend. Mauris euismod augue eu augue. Nam vehicula nulla quis sapien. Curabitur mattis pharetra orci. Suspendisse pede velit, ultricies id, luctus non, malesuada et, libero. Sed ut quam eget felis venenatis consequat. Praesent at magna. Morbi odio. Mauris a ante. Integer consectetuer sapien eget odio. Sed dapibus nibh molestie augue. Proin eget nisl.</p>
  14.  
  15. <p>Phasellus venenatis. Sed at eros. Nullam convallis iaculis arcu. Duis justo nisl, consectetuer eget, venenatis eget, euismod eu, arcu. Curabitur nec lectus non enim imperdiet convallis. Sed ornare. Suspendisse potenti. come sociis natoque penatibus et magnis this parturient montes, nascetur ridiculus mus. Fusce tristique. Integer sagittis consectetuer nunc. Ut tempor luctus velit. Aliquam vehicula.</p>
  16.  
  17. <p>Aliquam facilisis nulla at est. Pellentesque quis pede. Nullam porttitor nisi eu odio. Cras sed leo ac sem congue tempus. Proin mauris. Fusce mattis, libero eget mollis elementum, risus quam placerat mi, eu viverra nisl mi in pede. Nulla urna orci, vehicula eu, bibendum at, vulputate eu, sem. Aenean id elit. Donec id ipsum ac sem gravida sodales. Aenean lobortis. Nam lacinia mi et nunc. Nulla facilisi. Morbi molestie scelerisque quam. Praesent dapibus erat at diam. Mauris in lorem a est tempus porttitor. Integer vel tellus. Sed condimentum rhoncus dui. Sed aliquam ligula quis risus.</p>
  18.  
  19. <p>Phasellus tincidunt odio in mauris. Mauris sit amet nunc in turpis posuere rutrum. Nunc tincidunt sapien ut justo. Mauris at ante eu augue bibendum consequat. Suspendisse nibh. Aenean semper, ante nec blandit dapibus, lorem lectus adipiscing elit, at congue tortor leo sit amet velit. In pellentesque, libero malesuada tincidunt interdum, pede nulla consectetuer felis, ut cursus nibh risus sed magna. Praesent eu ligula et erat euismod tempor. Aenean nibh tellus, pulvinar in, iaculis at, pulvinar non, magna. Mauris purus diam, bibendum in, semper a, lobortis non, est. Mauris felis arcu, placerat eu, faucibus sed, aliquet non, lorem. Vivamus volutpat. Aenean aliquet libero at nunc. Donec mollis elit at enim. Aliquam molestie congue est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia. Donec ultricies. Nam blandit, odio sed scelerisque aliquet, tellus erat elementum nisl, eget ornare neque nulla vitae est.</p>

This should help :)
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Maybe you could use the universal selector:

This code will target anything nested in your resultsText div:
Code: [ Select ]
.resultsText * {
/*your style*/
}
  1. .resultsText * {
  2. /*your style*/
  3. }


You could try that ;)

@Bogey
file2.php should be file2.html or it won't be included ;)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Fabinator wrote:
@Bogey
file2.php should be file2.html or it won't be included ;)

Yeah, your right... oops! I'll fix that

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.