1 reply [Last post]
glonner22
glonner22's picture
Offline
newbie
Last seen: 5 years 5 days ago
Timezone: GMT-5
Joined: 2015-10-13
Posts: 1
Points: 2

New to the forums *waves* but appreciating the amount of enthusiasm here. I did a search and couldn't find a similar topic for a couple of pages of results, so I'm assuming it hasn't been brought up in a while.

How it should work: I have a webpage with embedded iframes in them, essentially acting like frames without making the entire webpage formatted by them. One frame (links) holds the links, and the other (display) holds the content of said links. Essentially, I'm organizing a bunch of recipes into an indexed method.

<html>
<head>
<LINK href="http://www.pahmoten.com/sitesrc/main.css" rel="stylesheet" type="text/css">
<title>Pahmoten's Kitchen</title>
</head>
<body background="http://www.pahmoten.com/sitesrc/Dark-Wood-Background.jpg">
<center>
<font size=7><B>Pahmoten's Kitchen</font></B>
</center>
<p>
<left>
One of Pahmoten's strong points is food--cooking, baking, mixing, crafting, and appreciating it. Here are a list of our recipes that you may have tasted over the years at our various events, abodes, and other encounters. If there's one missing, please don't hesitate to inquire with the webmaster, to see if it'll be added or request it from the maker.
</left>
<p>
<center>
<img src="http://www.pahmoten.com/sitesrc/GoldDecoBar.gif">
<p>
<table border=0 cellpadding=15 bgcolor=#800000>
<td align=center>
<B><font size=5><a href="http://www.pahmoten.com/kitchen/entrees.htm" target=links>Entrees</a> | 
<B><font size=5><a href="http://www.pahmoten.com/kitchen/sides.htm" target=links>Sides</a> | 
<B><font size=5><a href="http://www.pahmoten.com/kitchen/desserts.htm" target=links>Desserts</a> | 
<B><font size=5><a href="http://www.pahmoten.com/kitchen/drinks.htm" target=links>Drinks</a> | 
<B><font size=5><a href="http://www.pahmoten.com/kitchen/sauces.htm" target=links>Sauces</a>
</table>
<p>
<iframe name="links" src="/kitchen/start.htm" width=20% height=400></iframe>
<iframe name="display" src="/kitchen/start.htm" width=60% height=400></iframe>
<p>
<img src="http://www.pahmoten.com/sitesrc/GoldDecoBar.gif">
</body>
</html>

The iframes act differently between Chrome & IE. Haven't tested Firefox yet.

Chrome: I click on links from the "links" iframe, and content appears in "display" as expected. However, the coloring is default HTML, with black text, blue links, purple visited links, and Times New Roman font. Not what I've set in the CSS file. Here's the css sheet that affects all "links" and "display" content (kitchenmenu.css):

<!--
A:link {text-decoration: none; color: #eec900} 
A:visited {text-decoration: none; color: #ac7f24}
A:hover {text-decoration: underline; color: #ffffff}
 
BODY 
{
font-family: Garamond;
color: white;
background-attachment: fixed}
 
-->

One of the "links" pages:

<html>
<head>
<LINK href="http://www.pahmoten.com/sitesrc/kitchenmenu.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=#b20000>
<left>
<list>
<li><a href="http://www.pahmoten.com/kitchen/kolacky.htm" target=display>Kolacky</a>
<li><a href="http://www.pahmoten.com/kitchen/caramelapplemuffins.htm" target=display>Caramel Apple Muffins</a>
<li><a href="http://www.pahmoten.com/kitchen/.htm" target=display> </a>
<li><a href="http://www.pahmoten.com/kitchen/.htm" target=display> </a>
<li><a href="http://www.pahmoten.com/kitchen/.htm" target=display> </a>
<li><a href="http://www.pahmoten.com/kitchen/.htm" target=display> </a>
</list>
</body>

One of the "display pages:

<html>
<head>
<LINK href="http://www.pahmoten.com/sitesrc/kitchenmenu.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=#b20000>
<left>
<font size=6>Caramel Apple Muffins</font>
<br>
<font size=5>from Kohaku</font>
<p>
<B>History</B>  First shared at Here There Be Dragons 2014.
<p>
<list>
<li>2 c All purpose flour
<li>3/4 c sugar
<li>2 t Baking Powder
<li>1/2 t Baking Soda
<li>dash of salt (or around 1/2 teaspoon) 
<li>1 T ground cinnamon
<li>1 egg
<li>1 c milk
<li>touch over 1/3 c melted butter
<li>1 T vanilla extract
<li>1 c peeled and chopped Granny Smith Apples
<li>3/4 to 1 c caramels (Kraft Caramel Bits from the baking aisle works nicely)
<li>optional caramel dipping sauce
<p>
<li>Mix wet ingredients together in a bowl as well as your cinnamon. Make sure your butter is only room temperature so it doesn't cook your egg. 
<li>Mix dry ingredients together and slowly integrate into the wet bowl. 
<li>Fold in apple and caramel at the end. 
<li>Bake at 350 Degrees F for about 20-25 minutes. Check with a toothpick to make sure it's done. 
</list>
</body>

Some answers I've seen say that Chrome won't display iframes properly and generally use cached settings. Can anyone confirm? If so, I'm gonna need to research another method of displaying these files Sad Any help is greatly appreciated!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 12 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Obsolete markup

Your markup is ~17 years out of date. Not that that is necessarily breaking things. What does break things is your markup triggering quirks mode. That causes each browser to act differently.

I see no compelling reason for using iframes. Code the recipes and indices directly into their appropriate page. Iframes were used for importing pages that were not your own, e.g. ads. If the pages are your own, there is no good reason t import them.

You have syntax errors (not including imported files). These can cause breakage, depending on the particular browser's error handling.

I suggest you start over using valid markup and good, if not best, practice.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.