Solved

iframe dynamic sizing problem

Posted on 2013-05-24
10
279 Views
Last Modified: 2013-06-06
Folks, you can view my problem here my issue is this, inside the red area on the left (this I need to dynamically take up all width and height, it appears fine width wise just the height is a problem ) inside this area is an iFrame. When you choose a document from that first chapter it links to a pdf which I need to take up the red area..

Can ANYONE shed any light on my problem why its not working ? I can see the wood for the trees anymore ??

Thanks for reading

PS.. I inherited this site so I am aware I would have done this totally different if Id designed from scratch..
0
Comment
Question by:mrmad1966
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +1
10 Comments
 
LVL 9

Expert Comment

by:TvMpt
ID: 39193597
<iframe id="myFrame" style="visibility: visible; width: 100%; height: 100%;" src="LinkedDocuments/Operational.pdf">

seems to work fine...
0
 
LVL 1

Author Comment

by:mrmad1966
ID: 39194172
Not for me !
0
 
LVL 9

Expert Comment

by:TvMpt
ID: 39194179
Im using firefox. In wich browser are you testing?
0
Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

 
LVL 1

Author Comment

by:mrmad1966
ID: 39194264
Chrome & IE.. Sadly its IE our organisation uses :-(
0
 
LVL 1

Author Comment

by:mrmad1966
ID: 39194348
If I change the units to px instead of % it works... Why can I not use % and how could I  ?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39194513
Design issues are not your biggest problem.  The page needs to be validated.  There are structural errors an mis-tagging around the iframe element.  the fact that you have the iframe inside a table very much limits what you can do with it.  If you tweak the design to move the iframe out of the table then you will have an independent element that will allow more precise control.

Finally you are using an obsolete doctype and rendering to the HTML4 specification introduces issues with percentage heights, especially when there are dynamic effects involved.

Cd&
0
 
LVL 1

Author Comment

by:mrmad1966
ID: 39194529
Thanks for that... This it seems was originally auto generated code from some software program.. I think Im leaning towards starting from scratch..
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 39194949
If it was me.  I would re-write.  It is not a complex layout, and the 20th century code has basically seen better days. The big advantage of a re-write is you will have something more robust and easier to maintain going forward.

Cd&
0
 
LVL 1

Author Comment

by:mrmad1966
ID: 39195014
food for thought, thank you
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39196243
Your main problem is bodyColumn td it's set to 75% that means your iframe 100% is 75% of that td.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question