4 replies [Last post]
Nietzsche1988
Nietzsche1988's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT-4
Joined: 2014-07-10
Posts: 3
Points: 6

I'm having trouble just doing some base coding to get the layout of my page to work correctly in Chrome. It displays fine in IE so I ended up taking each iFrame out separately and they can load individually in Chrome, but the moment I add multiple iFrames is when the display gets all wonky. I tried searching forums for specific issues translating iFrames to work with Chrome but none of the posts seem to match up with my issue, which makes me think I'm missing something basic, but I can't seem to figure it out!

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
BODY { background-color: #ffffff;}
A:LINK { color: #0000ff; 
	text-decoration: none; }
A:VISITED { color: #ff0000; 
	text-decoration: none;
	font-weight: bold; }
A:ACTIVE { color: #ffffff; }
A:HOVER { color: #DB120B;
	background-color: #ffffff;
	font-weight: bold;
	text-decoration: underline }
H1 { font-size: 24pt;
        font-weight: bold;
        color: #66ccff;
        font-style: italic;
        text-align: left; }
P { font-size: 10pt;
	color: #000000;
	text-align: left;
	text-font: verdana; }
.NAVIGATE { font-size: 14pt;
	color: #000000;
	text-align: left;
	text-font: verdana;
	font-weight: bold; }
</STYLE>
</HEAD>
 
<BODY>
 
<IFRAME ID="NAVIGATION" 
	NAME="NAVIGATION" 
	SRC=""
	STYLE="border-top:6px ridge #DB120B; 
	border-bottom:6px ridge #DB120B;
	border-left:2px ridge #DB120B;
	border-right:2px ridge #DB120B;
	position:absolute; 
	left: 0px;
	WIDTH="200"
	HEIGHT="400"   
 
</IFRAME>
 
<IFRAME ID="CONTENT" 
	NAME="CONTENT" 
	SRC=""
	STYLE="border:10px ridge #DB120B;
	border-bottom:10px ridge #DB120B;
	border-left:3px ridge #DB120B;
	border-right:3px ridge #DB120B; 
	position:absolute; 
	right: 0px;
	WIDTH="750" 
	HEIGHT="600"
 
</IFRAME>
 
<IFRAME ID="SUBCONTENT"
	NAME="SUBCONTENT"
	SRC=""
	STYLE="border:6px ridge #DB120B
	border-bottom:6px ridge #DB120B;
	border-left:2px ridge #DB120B;
	border-right:2px ridge #DB120B;
	position: absolute;
	bottom: 0px;
	right: 230px;
	WIDTH"550"
	HEIGHT="150"
 
</IFRAME>
 
</BODY>
</HTML>

Nietzsche1988
Nietzsche1988's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT-4
Joined: 2014-07-10
Posts: 3
Points: 6

Just to give more details in

Just to give more details in IE we have one iframe in the top-left (Navigation), one in the top-right (Content), and the third below the top-right (Subcontent). In Chrome the moment I use two or more iframes only the Navigation iframe will properly display, the content iframe seems to vanish entirely, and the subcontent iframe is aligned right at the bottom and it looks like the attributes, such as the borders, aren't in line with the Navigation one.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Some thoughts

You don't have a document type declaration (DTD), which triggers quirks mode in browsers. This may or may not cause problems, depending on the browser.

Probably not an issue here, but is poor form, is the use of uppercase element tags and attributes. Uppercase element tags and attributes are invalid in xhtml.

You have syntax errors which could each cause your error. See http://validator.w3.org/#validate_by_input. Always validate your markup and correct syntax errors before attempting to debug.

In this case, you have failed to close the double quotes on every set of style attribute values.

Why ever would you ever use iframes in the first place? It's for importing alien documents into your page which is better done with the object element. In the co-first place, why would you use absolute positioning to define your layout. It has its place, but more usually it is the least good worst method you could choose.

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.

Nietzsche1988
Nietzsche1988's picture
Offline
newbie
Last seen: 7 years 20 weeks ago
Timezone: GMT-4
Joined: 2014-07-10
Posts: 3
Points: 6

Thank you so much for your

Thank you so much for your help! This really helped to push me in the right direction. Just to give background I've clearly never done any of this professionally or even really on an amateur level. The most experience I have had is making active desktops with an iframe or two, a table of hyperlinks, and maybe a drop down menu for old jobs back on XP and prior to tabbed browsing (which pretty much eliminated the need for what I was doing) when I was in High School and I've only ever done anything in notepad and just looking through what I do visually to try and fix my errors, so that website you linked was really, really great for me.

From what I was reading online I wasn't sure if the object element was something I should really pursue as the point of the page is to have a navigation panel on the left which links articles (word documents that I converted to html) to open up in the larger iframe off to the right and the bottom iframe was to load with some quick hit text in regards to the article. Do you feel it would still be more beneficial for me to move away from the iframes though?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yes

Quote:

Do you feel it would still be more beneficial for me to move away from the iframes though?

Absolutely. From your description, there is no sane use for the iframe.

You should also research server side includes for your re-used menus, headers and footers. If you haven't already, install the Apache web server, PHP and MySQL or other database management system on your development computer.

It would be a Good Thing to work through some tutorials that teach best practice in order to overcome the obsolete teachings form school. Try htmldog.com, they''re very good instructional sets.

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.