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

div tag problem with iframe

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
Lennart Ericson
Asked:
Lennart Ericson
  • 2
  • 2
  • 2
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please render your code and let's see the html.  Better yet, just provide a link to your test page.
0
 
Lennart EricsonAmateurAuthor Commented:
0
 
Lennart EricsonAmateurAuthor Commented:
The browser I've tested with so far that could render the iframe correctly, at least dislay it, is MS IE 11.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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