Ignored z-index with IFrame. Drop down menu hidden. - asp.net

In Internet Explorer only (Works fine in Chrome and Firefox), it always puts a PDF displayed in an iFrame over top of any other objects on the page. I have a horizontal menu above that has drop down menus that become hidden behind.
I have tried forcing the site in IE9 mode, z-index on all items and parent items, adding wmode = to transparent or opaque.
This only happens when a pdf is loaded in the iframe. If a webpage is loaded, the menu appears over top as it should.
CSS:
iframe
{
position: relative;
z-index: 0;
}
#Standings_Container
{
float:left;
text-align: center;
width: 100%;
z-index: 0;
position: relative;
}
#nav .Menu_Child {
display:none;
position:absolute;
left:0;
top:26px;
height:auto;
float:left;
width:174px;
overflow:hidden;
z-index: 10000;
}
HTML:
<div class="Menu_Child">
<ul>
<li>Applications</li>
<hr class="Menu_Child_HR" />
<li>Schedules</li>
<hr class="Menu_Child_HR" />
<li>Standings</li>
<hr class="Menu_Child_HR" />
<li>Rules</li>
<hr class="Menu_Child_HR" />
<li>Sponsors</li>
<hr class="Menu_Child_HR" />
<li>Gym/Field Directions</li>
<hr class="Menu_Child_HR" />
<li>Register Online</li>
</ul>
</div>
<div id="Standings_Container">
<iframe style="margin-top:8px;" scrolling="yes" width="850" height="600" src="[PDF URL]"></iframe>
</div>

I have come across this so many times, and unfortunately, it seems to be a limitation of the way IE (specifically the Adobe Windows PDF plug-in) renders the PDF. It basically generated it last, over every other element on the page.
Whereas Flash embedded objects could overcome this using the wmode="transparent", this is not the same with the PDF plugin. I will try to play around with the windowless or windowed parameter, but I am certain I already tried this.
Unfortunately for myself, and others, shifting the PDF lower and/or widening the gap below the navigation is not an option.
Seems to me, but I could be wrong, that Adobe need to revisit the way IE handles PDF or Microsoft to use a different rendering engine.
fabio

After a week of trying different solutions and fixes, i couldnt find anything that would work for my specific situation. Instead i just made the vertical spacing on my sub menus much shorter and pushed the pdf in the iframe further down on the page so the drop down menus never overlap.

Related

No proper solution for IE clickability over background image

I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)

How to use an SVG logo in a web application?

My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.
It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css.
<a href="#Url.Action("Index", "Home")" id="Home">
<img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>
#logo {
height: 3em;
width: 9em;
margin: 0.3em 1.5em 0.3em 0.2em;
}
Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is
<div id="logo">
<a href="#Url.Action("Index", "Home")" id="Home">
<object height="100%" width="100%"
data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
</object>
</a>
</div>
This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.
Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.
I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.
#logo {
width: 25%;
}
Try changing the percentage and adjusting the result window size in the JSFiddle Demo
I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.

div gets extra padding only in Chrome and only on home page

we've got an issue that only effects Chrome, Firefox and IE are fine.
the only page affected in Chrome is the home page, index.html... all other pages use the exact same header html and CSS. If we click a link on the home page to go to an interior page, the page works fine, then we click back to the home page and it looks fine... but if we refresh the home page, its messed up again.
here's the url
http://www.logilityconnectionseurope.com
the element that gets pushed down is a big div that holds an image and some text on the right side, the div CSS is as follows
.dateLogoTopDiv {
float:right;
text-align:right;
margin-top: 15px;
}
HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
as I said, works fine in Firefox and IE and works in Chrome on every page except the index
any help would be appreciated
Run your page through the HTML Validator and fix all errors. Without valid HTML, browsers don't know for sure what you intended to display and you'll have cross-browser rendering inconsistency. In this case, Webkit browsers (Chrome & Safari).
http://validator.w3.org/
EDIT:
OP's site previously contained malformed HTML including open tags and misplaced tags. OP's site has since been fixed, rendering the code at the URL posted in the question obsolete.
EDIT 2:
I'm seeing the OP's issues in Chrome. I cannot explain why the issue was occurring or why it was intermittent. However, I fixed it by adding the following...
Additional CSS:
.header {
overflow: auto;
}
.header > img {
float: left;
}
Existing HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
This takes the two main header elements and floats them left & right respectively. The right one was already floating to the right. overflow: auto; is a trick to force the header to expand to contain it's floated elements. Since both are floated, they are outside the regular content flow and would not normally cause the header to expand.

IE 7 Displays Hidden and Display None Elements

I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;

How to fix some issues with printing very basic HTML

I have some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart

Resources