Jump to content

<iframe> is making me lose font styles


Recommended Posts

Hello internet.

 

I am using <iframe> (with <button>) to switch between different web pages - embedded in the center - of my home page on my site. Everything seems to be OK until I click the button and then I lose some of my font styles on both the home page and the embedded page iframe brings up.

Some things to point out:

 

1. I am calling an external .css and .js files like this:

<link rel="stylesheet" type="text/css" href="/myfile.css">

<script src="myfile.js" type="text/javascript"></script>

2. I set up the <button> like this:

<button type="button" class="a1" onclick="changesel1()"><div class="menuc1"><font class="ftag1"><b>Home</b></font></div></button>

3. The <iframe> code looks like this:

<iframe id="blocks" frameborder="0" img src="http://www.mysite.com/home.html" style="background-color:black" class="iframe1">

4. I am calling google font styles like this:

<link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet' type='text/css'>

 

Once I click on the button I lose the font class=”ftag1” font style…. What could be the issues here?

Edited by confused and dazed
Link to post
Share on other sites

I don't think block elements (div) would work well inside a button, its mainly uses text or images meaning inline such span, b, strong, em, and why have you been grave robbing and digging up the font element, leave it buried and use none deprecated elements instead as mentioned.

 

and i know img is definitely not an attribute of an iframe.

 

validate your pages, and it would help to show the actual page source, so we can identify that you correctly used reference to js, css in correct order, and placement.

Link to post
Share on other sites

I have no idea why I have the img within the frame element... strange. F'd up really.

 

So how do I validate my pages as you suggest?

 

I have been using <div> elements because I like to control where the font is placed. I have not figured out how to control the placement (margin-top/left/right) of font within an element so I use the <div> element around my font to place it wherever I want. What is a better method?

 

Link to post
Share on other sites

Validation: http://validator.w3.org

 

Maybe...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/myfile.css"><link href='http://fonts.googlea...?family=Trocchi' rel='stylesheet' type='text/css'><style>.a1{font-weight: bold;}.menuc1{}.ftag1{font-family:"Times New Roman", Times, serif;font-size: 12pt;}.iframe1{background-color: black;border: none;}</style><script src="myfile.js" type="text/javascript"></script><script>window.onload = init;function init() {document.getElementById('btn_home').onclick = changesel1;}</script></head><body><button class="a1 menuc1 ftag1" id="btn_home">Home</button><iframe class="iframe1" id="blocks" src="http://www.mysite.com/home.html"></iframe></body></html>
Edited by davej
Link to post
Share on other sites

Maybe my question was not written well enough.

 

I use a first level <div> element to contain images, text, etc... I use a second level <div> element within the first level <div> element to enclose my text (text which is enclosed within the second level <div> element) so I can place it anywhere I want within the first level <div> element. Is there a better method for Text placement than what I have done?

 

Link to post
Share on other sites

I just tried loading a button with images and divs and it worked, but I doubt it is necessary to simply place text.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Crazy Big Button</title><style>#btn1{height: 200px;width: 200px;text-align: center;font-weight: bold;font:italic bold 12px/30px Georgia, serif;font-size: 18pt;}img{width: 120px;height: 100px;}</style><script>window.onload = init;function init(){document.getElementById('btn1').onclick = bclick;}function bclick(){alert('click!');}</script></head><body><button id="btn1"><div><div><img src="http://img.thesun.co.uk/aidemitlum/archive/01699/cat6_1699764a.jpg"/></div>Button Title</div></button></body></html>
Edited by davej
Link to post
Share on other sites

O.K. so I cleaned up my code a bit and I am still having the same issue.

What I am seeing is once I click on any of the buttons AND STAY HOVER'D OVER THE MENU BAR WHILE MOVING THROUGH THE MENU SELCTION the font gets all squirly and changes out of the font I selected. Once I move off the menu bar most of the font corrects itself but its not until I move over that specific text that remains messed up will THAT font correct itself. Whats going on? Here is my code:

<!DOCTYPE html><html><head><script src="sub_br.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="/madsite2014.css"><link hr<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Marcellus+SC' rel='stylesheet' type='text/css'>type="text/javascript">function changesel1(){document.getElementById("blocks").src="";}function changesel2(){document.getElementById("blocks").src="";}function changesel3(){document.getElementById("blocks").src="";}function changesel4(){document.getElementById("blocks").src="";}function changesel5(){document.getElementById("blocks").src="";}function changesel6(){document.getElementById("blocks").src="";}function changesel7(){document.getElementById("blocks").src="";}</script></head><body><center><!-- Start Main Nav Bar --><div class="nav_bannerx"><div class="menu1"><button type="button" class="a1" onclick="changesel1()"><div class="menuc1"><strong>1</strong></div></button></div><div class="menu2"><button type="button" class="a2" onclick="changesel2()"><div class="menuc2"><strong>2</strong></div></button></div><div class="menu3"><button type="button" class="a3" onclick="changesel3()"><div class="menuc2"><strong>3</strong></div></button></div><div class="menu4"><button type="button" class="a4" onclick="changesel4()"><div class="menuc2"><strong>4</strong></div></button></div><div class="menu5"><button type="button" class="a5" onclick="changesel5()"><div class="menuc2"><strong>5</strong></div></button></div><div class="menu6"><button type="button" class="a6" onclick="changesel6()"><div class="menuc2"><strong>6</strong></div></button></div><div class="menu7"><button type="button" class="a7" onclick="changesel7()"><div class="menuc3"><strong>7</strong></div></button></div></div><!-- End Main Nav Bar --><div class="tag1"><span style="color:#000000; font-size:40pt; font-family:Marcellus SC">MySite</span><br><span style="color:#000000; font-size:14pt; font-family:Permanent Marker"<i>The best site ever</i></span></div><div class="tag2"><img src="hd3_1.jpg" width="529" height="320" style="margin-top: 0px;"/><iframe id="blocks" class="iframe1" frameborder="0" src="" ><p>Your browser does not support this function.</p></iframe></div><div class="tag3">2014</div></center></body></html>  HERE IS THE OFFLINE CSS FILE INFO .tag1{width:847px; height:99px; margin-top: 0px; background:transparent; border: 0px solid Black;}.tag2{width:847px; height:320px; margin-top: 0px; background:transparent; border: 0px solid Black;}.tag3{width:847px; height:46px; margin-top: 2px; background:transparent; border: 1px solid Black;color:#000000; font-size:34pt; font-family:Marcellus SC}.nav_bannerx{width:847px; height:37px; margin-top: 26px; background:transparent; border: 0px solid Black;}.menuc1{width:120px; height:20px; float: left; ; margin-top: 4px; background:transparent; border: 0px solid Black; }.menuc2{width:120px; height:20px; float: left; ; margin-top: 4px; background:transparent; border: 0px solid Black;}.menuc3{width:120px; height:20px; float: left; ; margin-top: 4px; background:transparent; border: 0px solid Black;}.menu1{Position:absolute; width:120px; height:36px; margin-left:0px; background: url(menu1.jpg);}.menu2{Position:absolute; width:120px; height:36px; margin-left:121px; background: url(menu2.jpg);}.menu3{Position:absolute; width:120px; height:36px; margin-left:242px; background: url(menu2.jpg);}.menu4{Position:absolute; width:120px; height:36px; margin-left:363px; background: url(menu2.jpg);}.menu5{Position:absolute; width:120px; height:36px; margin-left:484px; background: url(menu2.jpg);}.menu6{Position:absolute; width:120px; height:36px; margin-left:605px; background: url(menu2.jpg);}.menu7{Position:absolute; width:120px; height:36px; margin-left:726px; background: url(menu3.jpg);}.a1{width:120px; height:36px; background: url(menu1.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a1:hover{width:120px; height:36px; background: url(hmenu1_1.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a2{width:120px; height:36px; background: url(menu2.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a2:hover{width:120px; height:36px; background: url(hmenu2.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a3{width:120px; height:36px; background: url(menu2.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a3:hover{width:120px; height:36px; background: url(hmenu2.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a4{width:120px; height:36px; background: url(menu2.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a4:hover{width:120px; height:36px; background: url(hmenu2.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a5{width:120px; height:36px; background: url(menu2.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a5:hover{width:120px; height:36px; background: url(hmenu2.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a6{width:120px; height:36px; background: url(menu2.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a6:hover{width:120px; height:36px; background: url(hmenu2.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.a7{width:120px; height:36px; background: url(menu3.jpg); border:0px solid gray; color:#ffffff; font-size:9pt; font-family:arial;}.a7:hover{width:120px; height:36px; background: url(hmenu3.jpg); border:0px solid gray; color:#000000; font-size:9pt; font-family:arial;}.iframe1{position:absolute;  background-color:#000000; width:479px; height:267px; float:left; ; margin-top: 22px; border: 1px solid #003D3D;}.home1{width:465px; height:254px; float:left; ; margin-top: -2px; border: 1px solid #ffffff;}
Edited by confused and dazed
Link to post
Share on other sites

Ok, we need to get this working well enough to be able to see your problem. All I see so far is;

 

MySite

The best site ever

 

(a large black rectangle on right side of screen)

 

2014 in a thin black footer rectangle

Link to post
Share on other sites

Oh I do see numbers 1 through 7 appear as a menu when I hover over them. You might want to copy this file into another folder so that you can see what we see when the other files are unavailable.

 

I created an image file named hd3_1.jpg that is 529 x 320 pixels, but this now pushes the iframe farther to the right on the page.

Edited by davej
Link to post
Share on other sites

I did just that and I noticed that the fonts do not change as you click the menu selections and hover over them. I think this is because the src does not direct the iframe to an actual webpage.

I took out the following code in my actual site and the font issue went away. It appears this issue has EVERYTHING to do with the iframe element and how it effects the page.

<div class="tag2"><img src="hd3_1.jpg" width="529" height="320" style="margin-top: 0px;"/><iframe id="blocks" class="iframe1" frameborder="0" src="" ><p>Your browser does not support this function.</p></iframe></div>

Link to post
Share on other sites

So......... I did a little playing around with the code and it appears that if I DONT call an external css file to style the menu buttons and iframe elements the fonts do not go all squirly on me. WHY IS THIS? I was told as long as I place the callout for the css external file at the beginning of the header this would NEVER be an issue.

Link to post
Share on other sites

You say you re-edited to correct your code, but the code is still a mucking fuddle.

 

<link hr<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Marcellus+SC' rel='stylesheet' type='text/css'>type="text/javascript">function changesel1(){document.getElementById("blocks").src="";}function changesel2(){document.getElementById("blocks").src="";}function changesel3(){document.getElementById("blocks").src="";}function changesel4(){document.getElementById("blocks").src="";}function changesel5(){document.getElementById("blocks").src="";}function changesel6(){document.getElementById("blocks").src="";}function changesel7(){document.getElementById("blocks").src="";}</script>

 

don't use capital letters for css for example Position, it should ALL be lowercase, better still don't use position: absolute AT ALL, it is more likely the cause of the layout problems.

Link to post
Share on other sites

Yeah, he tried to re-paste that link section and it is now a bit damaged.

 

Ideally we need to have a screenshot or mockup image that shows what it is supposed to look like.

 

There are far too many classes for such a simple page, and too much useless stuff in the classes.

Edited by davej
Link to post
Share on other sites

OK so you guys don’t like the code all that much. I get it. So here are some very specific things:

 

 

1. I use all the classes because I have not found another way to position the <div> elements the way I want to specifically see them (margin wise). A suggestion of a better way to position elements would be helpful.

 

2. I use position:absolute because I have <div> elements that need specific locations on the page so I use that to direct them right where I want to be. A suggestion of a better way to position <div> elements would be helpful.

 

3. The code does has a lot of useless stuff on it simply because I am anticipating needing some of those things in the future like boarder and I like the change fonts a lot. I can leave all the things out of the code in the future until I actually need them that’s not a big deal.

 

 

I am still going to try and reproduce the issue and transfer all the code. Answers to my questions above would be helpful.

 

*******

OK so I did a little more digging and it appears part of the issue may be a hosting problem. I put src equal to other sites (other domains) I have made and there was no issue - I also put espn.com and cnn.com in there and no problems what so ever. But, as soon as I made the src from the same domain as the new site I am making the issue came back. Should I create a new folder in the hosting account and place all the iframe webpages in that new folder? Why would this matter? Any ideas?

 

Edited by confused and dazed
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...