Solved

div tag problem with iframe

Posted on 2014-04-09
6
321 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 100 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 400 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

626 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