Solved

div tag problem with iframe

Posted on 2014-04-09
6
305 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
  • 2
  • 2
  • 2
6 Comments
 
LVL 52

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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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 52

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

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.
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 …
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 …
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)

808 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