Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

div tag problem with iframe

Posted on 2014-04-09
6
Medium Priority
?
331 Views
Last Modified: 2014-04-09
Could someone, please, explain how I should do it in the embedded file below to get div id="meny" to appear visibly on top of the div="sala" or better on top of the iframe. Have tried z-index, but doesn't work. How should I do it?

avky-sl.php
0
Comment
Question by:lericson
[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
  • 2
  • 2
  • 2
6 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39989298
Please render your code and let's see the html.  Better yet, just provide a link to your test page.
0
 

Author Comment

by:lericson
ID: 39989310
0
 

Author Comment

by:lericson
ID: 39989517
The browser I've tested with so far that could render the iframe correctly, at least dislay it, is MS IE 11.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 400 total points
ID: 39989602
No offense, but there are so many errors here I don't know where to begin. Let's start with some basic HTML about lists. There are three types of lists: unordered <ul>, ordered <ol>, and description <dl>. With unordered and ordered lists, the only element that can be inserted as the first generation of child elements is the list item <li> tag. You cannot insert a div <div> tag between the <ul> and <li> tags. You can, however, insert a div tag inside a list item. So, this is acceptable:
<ul>
	<li>
		<div>...</div>
	</li>
	<li>
		<div>...</div>
	</li>
	<li>
		<div>...</div>
	</li>
</ul>

Open in new window

This is not:
<ul>
	<div>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</div>
</ul>

Open in new window

Next, CSS positioning is for those rare situations where you want to place an element in a particular spot on the page other than its natural location. If you try to absolutely position every element, you need to start with a bottle full of pain reliever because you're going to have one massive headache from frustration.

HTML is designed and intended to flow into the browser window like helium balloons into an inverted box. The first element goes to the top left corner, the next element goes directly beneath it and all that follows will go directly beneath the element that precedes it. It's OK to have boxes of more balloons that float in below the element that precedes it. If you will let that happen, you'll find things much easier.

When you want elements to line up side by side, use float. Avoid using position if at all possible.

You have an extra </div> at the end of line 185 that's pushing the "sala" div below the "behallare" div. If you remove that and all the positioning styles, you will be a lot closer to your desired result.

And finally, use the W3C HTML Validator to expose your errors so you can correct them. Browsers are very forgiving but often times their forgiveness is rendered differently from one browser to the other.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39989619
One more thing: the larger z-index goes on top of the smaller z-index. So a negative z-index will go under a zero z-index or an element without a z-index.
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 1600 total points
ID: 39989641
yea, I was just playing with your code and it needs to be cleaned up before you start getting into z-index.

However, the pdf did not render in the iframe on chrome.  I found this method worked for both html and xhtml  http://jsbin.com/tefibuya/1/edit
  <iframe src="http://docs.google.com/gview?url=http://skaj.se/medlemmar/lokstall/avky_sl.pdf&embedded=true" style="width:935px; height:1300px;" frameborder="0"></iframe>

Open in new window

0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

722 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