CSS Styles and IFRAMES problem...

makermet · 04-13-2005, 05:52 PM

When including an html source file in an IFRAME tag, it doesn't retain the CSS styles that it does if you view the source file separately.

It doesn't seem to take on the CSS Style of the current document either, nor can you tell is to use any particular styles as per the 'STYLE' attribute inside the tag (since it only refers to the actual border properties of the IFRAME).

Does anybody know a way aorund this...i.e. a way of making it work?!!! HELP!

Thanks in advance.

trishan · 04-13-2005, 10:46 PM

Is the webpage in the iframe your own or from another site?

Nitroshock · 04-14-2005, 06:16 PM

CSS styles don't carry over on frames.

My suggestion is to put all your CSS in one file, then reference that file from each of the HTML pages you want to use that style sheet.

Code:

So if your CSS file is named "layout.css", 
you would put something like this in your html files

<LINK REL="STYLESHEET" TYPE="text/css" HREF="layout.css">

You could also copy your CSS from one file to the other (keeping it inline) but then any changes require modifying multiple files.
????: NamePros.com http://www.namepros.com/web-design-discussion/82476-css-styles-and-iframes-problem.html

Hope this helps.
-Nitro

ScionStatic · 04-14-2005, 07:41 PM

Hello,

This is what you need to do. Open up the source file of your iframe. Now add the following between your closing title tag and the closing header tag.

<style type="text/css" media="screen">



</style>

So the top part of the webpage (this is the webpage that is used as the source for your iframe) would look like the following.

<html>
<head>
<title>The Use Of CSS With Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
????: NamePros.com http://www.namepros.com/showthread.php?t=82476

body {margin-left:15%;
margin-right15%;}

p {font-weight:bold;}

</style>
</head>

<body>

Now the CSS will be different of course, but that's how you need to have it (structure wise). That should fix everything!

God bless,
David

04-13-2005, 05:52 PM	THREAD STARTER #1 (permalink)
makermet New Member Join Date: Apr 2005 Posts: 3	CSS Styles and IFRAMES problem... When including an html source file in an IFRAME tag, it doesn't retain the CSS styles that it does if you view the source file separately. It doesn't seem to take on the CSS Style of the current document either, nor can you tell is to use any particular styles as per the 'STYLE' attribute inside the tag (since it only refers to the actual border properties of the IFRAME). Does anybody know a way aorund this...i.e. a way of making it work?!!! HELP! Thanks in advance.

04-13-2005, 10:46 PM	#2 (permalink)
trishan NamePros Regular Join Date: Nov 2003 Location: Melbourne Posts: 762	Is the webpage in the iframe your own or from another site? __________________ Online Marketing Melbourne \| JumperPunch \| FootyBook

04-14-2005, 06:16 PM	#3 (permalink)
Nitroshock NamePros Regular Join Date: Mar 2005 Posts: 503	CSS styles don't carry over on frames. My suggestion is to put all your CSS in one file, then reference that file from each of the HTML pages you want to use that style sheet. Code: So if your CSS file is named "layout.css", you would put something like this in your html files <LINK REL="STYLESHEET" TYPE="text/css" HREF="layout.css"> You could also copy your CSS from one file to the other (keeping it inline) but then any changes require modifying multiple files. ????: NamePros.com http://www.namepros.com/web-design-discussion/82476-css-styles-and-iframes-problem.html Hope this helps. -Nitro __________________ Bored? Play FREE Games

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

04-14-2005, 07:41 PM	#4 (permalink)
ScionStatic NamePros Regular Join Date: Apr 2005 Location: Florida Posts: 215	Hello, This is what you need to do. Open up the source file of your iframe. Now add the following between your closing title tag and the closing header tag. <style type="text/css" media="screen"> <!--Place all your CSS coding that was in the CSS file that you had linked to this page, in here--> </style> So the top part of the webpage (this is the webpage that is used as the source for your iframe) would look like the following. <html> <head> <title>The Use Of CSS With Text</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" media="screen"> ????: NamePros.com http://www.namepros.com/showthread.php?t=82476 body {margin-left:15%; margin-right15%;} p {font-weight:bold;} </style> </head> <body> Now the CSS will be different of course, but that's how you need to have it (structure wise). That should fix everything! God bless, David

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)