Recently, a visitor complained about some DIV overlaying the page content.
A popup that actually only should display when the mouse hovers over its container:
<td class="ref" id="myContainer">
<div>link text</div>
<div style="position:absolute;width:200px;background-color:white">
<?php include 'div-content.php'; ?>
</div>
<style type="text/css">#XcatContainer > div { display: none } #XcatContainer > div:first-child, #XcatContainer:hover > div { display: block }</style>
</td>
works like a charm in all my browsers on Windows 10 and Linux including IE11. However, it does NOT work in IE11 on Windows 7 (and IE 6 on Vista).
Now I´m considering a browser switch to disable the popup in those browsers. I could use [!if IE]; but I guess I need JS or PHP to only add that on older Windows.
Or could some reformatting make it work?
You'll indeed need PHP to filter out the OS from the UserAgent.
There's more info in this answer by Funk Forty Niner.
Related
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
Has anyone noticed a change to the rendering in the latest Chrome on Windows (22.0.1229.94 m)?
On page
http://worldwide.espacenet.com/
we had until recently (and have in IE8/9, FX16/17, Safari 5)
and in Chrome (22.0.1229.94 m):
The CSS starts with YUI Reset CSS version: 2.5.1
Here is the relevant html
<div class="epoBar epoBarAction">
<div class="secondary">
<div class="epoBarItem">
Clear
</div>
<div class="epoBarItem epoBarItemForm">
<div class="formElement">
<span class="inputsubmit">
<input type="submit" class="submit" name="Submit" value="Search">
</span>
</div>
</div>
</div>
</div>
Weird behaviour: If I inspect element and toggle the float:left below twice, the buttons align as they should
div.epoBar div.epoBarItem {
float: left;
min-height: 1.67em;
padding-bottom: 0.42em;
}
Also if I add width:150px to the div with class="secondary", it also aligns.
Is there anything obviously weird or is there a known new bug I have missed in Chrome?
Hope someone will be so kind and inspect the page
Font rendering
Google chrome renders fonts differently to other browsers on windows to allow it to install without needing admin privileges. A pain, I know, but they outweigh ease of install over needing admin rights for antialiasing. That said, the font may be overflowing the width of the container you are putting it in, and should fixable by adding a larger width to the container, or removing it entirely. Also using ems rather than px will give different font sizes across browsers.
I have a web app built in asp.net/vb. The scripts on the site only work properly with IE. Is there a way to force the user to use IE all of the time on the site?
You should not. Are you really willing to ignore 75% of the traffic? or are you paid by microsoft and have got a really cool website idea? Any ways, you can do that by using javascript and detecting the browser and if its not IE then do not show anything(Make you main div "display:none"). Here is an example http://www.w3schools.com/js/js_browser.asp to detect browser. Yet again these approaches are used for customizing styling for browsers and not for what you want it to.
function detectIE()
{
var isIE=navigator.userAgent.toString().indexOf("IE") != -1
if(isIE)
{
document.getElementById("main").style.display="block";
}
else
alert("This website can only be accessed using Internet Explorer");
}
<body onload="detectIE">
<div id="main" style="display:none;">
//Everything inside this div
</div>
</body>
Another approach is by using conditionals
<!--[if gte IE 6]>
<div id="main" style="display:none;">
//Everything inside this div
</div>
<![endif]-->
Remember, it's not a 100% solution, browsers can change there user agent strings and present themselves as IE or javascript can be turned off. You should consider adding support for other browsers rather than ignoring them completely.