Solved

extra space below iframe

Posted on 2016-08-29
9
70 Views
Last Modified: 2016-09-21
Hi..i have a problem with iframe where there is extra space under iframe. I try to remove it by adjusting the height but the content inside the iframe become shorter.
Here is my code:
<div style="border:1.5px solid #000;">            
 <div id="contentframe" style="position:relative; top: 0px; left: -380px;">
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>
</div>

i really hope somebody can help me to fix it. Thank you
0
Comment
Question by:Nur Amirah Roslan
[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
  • 3
9 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41774485
That code is obviously just a snippet - can you show us the full listing (preferably a link) and a screen shot to show us what we should be looking for.
1
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41774487
What are you trying to achieve with this line
<div id="contentframe" style="position:relative; top: 0px; left: -380px;">

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41774490
Pasting this into jsfiddle just gives a blank box. Can you provide a live example?
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

Author Comment

by:Nur Amirah Roslan
ID: 41775650
<div id="contentframe" style="position:relative; top: 0px; left: -380px;"> :i used this to control the position of my iframe
Capture1.PNG
0
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41775759
<iframe src="http://10.101.130.79/weathermap.html" frameborder="0" scrolling="no" width="1380" height="845" style="transform: scale(0.5);"></iframe>

Open in new window

Specifically

style="transform: scale(0.5);"

In other words you are saying - make this half the size I asked for - why are you doing that?

Take that out for starters.
0
 

Author Comment

by:Nur Amirah Roslan
ID: 41779173
thanks for your respond...at first,  i have to embed the whole website into the iframe and i set the width and height (width="1380" height="845") for that purpose but unluckily it produce the bigger size and i need to resize it  so that it fit the border size. That's why i used style="transform: scale(0.5);" and the website become smaller and left the white space. I want to know how to remove the extra space.

here is my jsfiddle:
https://jsfiddle.net/wcu2hzjx/2/
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41779273
Yes but you are contradicting yourself in the code - first you are saying I want the width to be 1380 then you are saying make the width half that - does not make sense.

If you want your iframe to fit width wise make the width 100%

If you are going to style your iframe you must do it as an element not a class - in your css you had

.iframe
Instead of
iframe

Your <div> tags where unmatched.
You had styling in your iframe to move left.

Here is a start https://jsfiddle.net/nxxv9410/
1
 

Author Comment

by:Nur Amirah Roslan
ID: 41780919
Thank you for your help sir...it help me alot
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41801120
Do you still require assistance on this?
If not you can close the question by selecting the answer that best fits your requirements and close the question.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

763 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