I am trying to get the horizontal menu bar above the pdf which is in tag object I have tried multiple options( for IE Only), which i found over internet but none helped me.
Below is the code I have tried(which is also copied from one the websites example).
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf??wmode=transparent" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
Please let me know, where I am doing wrong, as I have used position:relative , z-index:999too.
Here is the fiddle link. http://jsfiddle.net/h2knhyb4/
Thanks In Advance.
This is a hack , as I am using extra iframes next to <ul>, but it works the way we need in all browsers(i.e FF, chrome, IE11).
I found this answer somewhere over net and dont have the link at present, so updated the code for future reference.
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE Dropdown Bug Fix | jonathanstegall.com</title>
<style type="text/css">
body {
text-align: center;
font: normal 76% Verdana, Arial, Helvetica, sans-serif;
padding: 1em;
line-height: 1.8em;
}
#wrapper {
width: 770px;
margin: 0 auto;
text-align: left;
border: 1px solid #ddd;
padding: 20px 10px;
}
#wrapper #header {
position: relative;
z-index: 2;
}
#wrapper #nav {
clear: both;
margin: 0 5px;
padding: 0 5px;
width: 750px;
height: 30px;
list-style: none;
border-top: 1px solid #335a86;
border-bottom: 1px solid #335a86;
text-align: center;
position: relative;
z-index: 2;
}
#wrapper #nav li {
float: left;
margin: 0;
padding: 0 0 5px 0;
border: 0;
position: relative;
}
#wrapper #nav li a {
margin: 0;
padding: 7px 15px;
display: block;
text-decoration: none;
font-size: 1.2em;
}
#wrapper #nav a:link, #wrapper #nav a:visited {
color: #888;
}
#wrapper #nav a:hover, #wrapper #nav a:focus {
color: #335a86;
}
#wrapper #nav li ul {
background-color: #ccc;
border: 0;
width: 150px;
height: auto;
list-style: none;
margin: 0;
padding: 5px 0 10px 0;
border: 0;
text-align: left;
position: absolute;
display: none;
}
#wrapper #nav li ul li {
float: none;
margin: 0;
line-height: 30px;
height: 30px;
}
#wrapper #nav li ul a {
padding: 7px 10px;
white-space: nowrap;
display: block;
}
#wrapper #nav li:hover ul {
display: block;
}
#wrapper #container {
padding: 10px;
position: relative;
}
#wrapper h1 {
position: absolute;
left: 10px;
top: 10px;
height: 60px;
line-height: 60px;
vertical-align: middle;
font-size: 2em;
background: #335a86;
color: #fff;
}
#wrapper #container p.intro {
margin-top: 60px;
}
#wrapper #container p {
margin: 1em 0;
}
#wrapper #container form {
padding: 1em 0;
}
#wrapper #container label, #wrapper #container select {
float: left;
display: block;
margin: 0 1em 0 0;
}
.cover
{
position:absolute;
z-index:-2;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>home</li>
<li>item one
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<li>sub item four</li>
<li>sub item five</li>
<li>sub item six</li>
</ul>
</li>
<li>item two
<ul>
<iframe src="about:blank" class="cover" />
<li>sub item one</li>
<li>sub item two</li>
</ul>
</li>
</ul>
</div>
<div id="container">
<h1>Hi. This is a positioned H1</h1>
<p class="intro">This page is just some friendly content to show you just how bad IE really is. You could replace the absolutely positioned H1 above with a <code><select> </select></code> as I do below, a Flash movie, or whatever you like.</p>
<form name="form" id="form">
<label>To indicate this:</label>
<select name="foo" id="foo">
<option value="IE is mean">IE is mean</option>
<option value="IE sucks">IE sucks</option>
<option value="Maybe IE8 will be okay">Maybe IE8 will be okay</option>
</select>
</form>
<object id="pdfshow" style="background-color:#FFFFFF;" data="1.pdf" type="application/pdf" width="99.5%" height="550">
</object>
</div>
</div>
</body>
</html>
The above hack does not appear to work - adding the .cover section to the style sheet and the iframe lines to the html code in the JSFiddle do not fix the problem - the drop down menus appear as blank boxes with no content in IE11?
Related
See https://jsfiddle.net/scott8035/gqn0t9a7/3/.
In this example, I have a section of a page content box displayed with a box shadow only on left & right sides. I achieve that effect by adding clip-path: inset(0 -10px); to the content box's CSS. So far, everything is good.
There is an element inside the content box. When you hover over it, a drop-down menu appears. However, the menu is also clipped by the clip-path from the parent content box instead of being displayed in its entirety.
How can I display the menu child element over the top of the clipped area so you can see the entire thing?
Note: I am somewhat hampered in how I can structure the HTML because I'm using a page builder, notably, the menu has to be a child element of the content box.
Here is the code in case the jsfiddle doesn't work:
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
Apply the trick to a pseudo element instead:
body {
background-color: green;
}
#content-box {
width: 50%;
margin: 40px auto;
padding: 40px;
background-color: white;
position:relative;
}
#content-box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0 0 10px #000000;
clip-path: inset(0 -10px);
pointer-events:none;
}
.hoverable {
border: 1px solid #bbb;
padding: 10px;
position: relative;
}
p {
background-color: #eee;
padding: 5px;
}
.hoverable:hover .menu {
display: block;
}
.menu {
display: none;
width: 35%;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
top: 172px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
border-bottom: 1px solid #555;
}
.menu ul li a {
display: block;
padding: 5px 10px;
color: white;
text-decoration: none;
}
.menu ul li:hover a {
background-color: #333;
color: red;
}
<body>
<div id="content-box">
<div class="hoverable">
<p>
Element 1
</p>
<p>
Element 2
</p>
<p>
Element 3
</p>
<div class="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
<li>Menu item 5</li>
</ul>
</div>
</div>
</div>
</body>
I've already added body margin and padding to 0. However, there is still white space above my navigation bar and beneath the image above it that I can't figure out how to remove.
*,
html,
body {
padding: 0;
margin: 0;
}
* {
font-family: Arial, sans-serif;
}
.nav {
width: 750px;
margin: 0 auto;
list-style: none;
}
.nav ul {
font-size: 0;
}
.nav li {
display: inline-block;
border-right: 1px solid black;
padding: 10px 30px 10px 30px;
font-size: 22px;
font-weight: 700;
}
.nav li:first-child {
border-left: 1px solid black;
}
.nav li:hover {
background-color: #00FFFF;
}
a {
text-decoration: none;
}
<img src="image.jpg" alt="image cannot be displayed" style="width: 100%; height:150px;" />
<div class="nav">
<ul>
<li>Home</li>
<li>Second Page</li>
<li>Third Page</li>
<li>Fourth Page</li>
</ul>
</div>
Either set display: block; on your image or wrap it in a div. The whitespace is essentially a single space showing up because of the img tag styles which default to display: inline.
img {
display: block; /*add this or set container's font-size to 0 */
}
body {
padding: 0;
margin: 0;
font-size: 0; /*add this, otherwise change the img to block*/
}
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
The left sidebar won't position itself on the left side of the main area. It seems to get stuck on the navigation link. It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. Then I want the text to wrap around the sidebar (works in the code I posted here).
I have tried using z-index on the navigation and sidebar. I have also tried using position:relative; and float:left; on the sidebar without result. The text should also wrap around the sidebar as it is in the example below. I managed to move the sidebar to the left using position:relative; but then the text won't wrap it.
HTML:
<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
<h1>TopBanner</h1>
</div>
<div class="header">
<h1>Header</h1>
<h2>underrubrik</h2>
</div>
<div class="navigation">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div id="main">
<div class="leftsidebar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
<div class="content">
<p>Content text here</p>
</div>
</body>
</html>
CSS
body {
margin: 0;
background: #fff;
}
/* BANNER */
.topbanner {
width: 980px;
height: 80px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
/* HEADER */
.header {
width: 980px;
height: 100px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
.header h1 {
margin: 0;
}
.header h2 {
margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
width: 980px;
margin: auto;
}
.navigation a {
text-decoration: none;
color: #000;
}
.navigation ul {
float: left;
margin: -10px 0 0 0;
list-style: none;
}
.navigation ul li {
display: inline;
padding: 0 10px 0 10px;
border: 1px solid;
background: #fff;
}
.navigation ul li:first-child {
border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
width: 980px;
margin: 0 auto;
border: 1px solid;
}
.leftsidebar {
width: 20%;
position: relative;
}
.leftsidebar ul {
margin: 0;
border: 1px solid;
list-style: none;
}
.leftsidebar ul li {
}
.content {
}
.content p {
font-family: sans-serif;
}
Set the following for .navigation ul styles
margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;
Add float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap.
http://jsfiddle.net/ocfjsqpp/3/
Try putting padding-left:0 in your ul container.
Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start.
Visit http://jsfiddle.net/4p6gdka9/ enter code here
I have the following page (which is reduced and modified from ASP.NET MVC default project):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
body
{
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #000;
border: none;
line-height: 2em;
}
/* TAB MENU
----------------------------------------------------------*/
#menu
{
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#menu *
{
margin: 0;
padding: 0;
}
#menu ul
{
list-style: none;
width: 12em;
float: left;
}
#menu li
{
position: relative;
background-color: #fff;
border: solid 1px #fff;
}
div#title
{
display: block;
float: left;
text-align: left;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
test</h1>
</div>
<br />
<div id="menu">
<ul>
<li>Menu1</li>
</ul>
<ul>
<li>Menu2</li>
</ul>
<ul>
<li>Menu3</li>
</ul>
<ul>
</ul>
</div>
</div>
</div>
</body>
</html>
When I view it in FireFox, the list in #menu div shows up aligned with the header above flush against the left edge of .page div.
However, in IE6, the list inside #menu is indented. I have a suspicion that it's margin-left: auto that's being inherited by the list element.
How do I fix it so that the list is flush up against the left edge of the #menu div?
Change your class to not include position: relative, but add this to the top:
body * {
position: relative;
}
Change your li class to this:
#menu li
{
background-color: #fff;
border: solid 1px #fff;
}
So bascally just get rid of the position decleration.