asked on

Can I style embedded content within an HTML page?

I am displaying an HTML formatted report within a webpage using the following code:

<object data="server//report.html"> <embed src="server//report.html" width="100%" height="400"> </embed> Error: Embedded data could not be displayed. </object>
</div>

Open in new window

My question is, can I edit the loaded page styles somehow without having to edit the source content? I would like to simply change the color of the dropdown controls and header bars to match the page it is displayed in.

Thanks in advance!

TM

ASKER CERTIFIED SOLUTION

Russ Suter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mrslate1

ASKER

Thanks for your quick answer. The question becomes if a page is being loaded using the <object> WEB PAGE </object> where would I place the <link rel="stylesheet" href="css/report.css"> so it would cascade with the orininal embedded web page's style sheet?

Wherever I place the code, the newer code is not overwritten.

Here is the HTML. .Where would I place the style sheet link?

<!DOCTYPE html>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
      <title>ASK FAQ</title>
      <link rel="stylesheet" href="css/components.css">
      <link rel="stylesheet" href="css/responsee.css">
           
   </head>
   <body>
      <!-- TOP NAV WITH LOGO -->          
      <header class="margin">
         <div class="line">
            <nav>
               <div class="top-nav">
                  <p class="nav-text"></p>
                  <div class="logo">PAGE Logo</div>            
                            
                     <ul class="top-ul right">
                     <li>            
                        <a href="index.html">Home</a>            
                     </li>
                     <li>            
                        <a href="about.html">About</a>            
                     </li>
                     <li>            
                       
                     </li>
                     
                  </ul>
               </div>
                </nav>
         </div>
      </header>
      <!-- MAIN SECTION -->                  
             
                           
               <article>
                  <!-- text -->                 
                 <div class="header">
   	  <h1>Title</h1>
    	
    </div>
             <div class="embed_contain"> 

<!-- WHERE TO PLACE? <link rel="stylesheet" href="css/report.css"> -->

		   <!-- Embedded HTML page Start -->
         <object data="webpage_report.html" width="100%" height="400"> </object> <embed src="webpage_report.html" width="100%" height="400"> </embed> Error: Embedded data could not be displayed.  
     <!-- Embedded HTML page END -->           
               
</div>
 </article>
              
    
      <!-- FOOTER -->       
      <div class="line">
      
      <footer>
            <div>
             Footer
            </div>
        </footer>
      
       </div>
   </body>
</html>

Open in new window

Thanks again!

TM