• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

extra space below iframe

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
Nur
Asked:
Nur
  • 5
  • 3
1 Solution
 
Julian HansenCommented:
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
 
Julian HansenCommented:
What are you trying to achieve with this line
<div id="contentframe" style="position:relative; top: 0px; left: -380px;">

Open in new window

0
 
Terry WoodsIT GuruCommented:
Pasting this into jsfiddle just gives a blank box. Can you provide a live example?
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
NurAuthor Commented:
<div id="contentframe" style="position:relative; top: 0px; left: -380px;"> :i used this to control the position of my iframe
Capture1.PNG
0
 
Julian HansenCommented:
<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
 
NurAuthor Commented:
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
 
Julian HansenCommented:
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
 
NurAuthor Commented:
Thank you for your help sir...it help me alot
0
 
Julian HansenCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now