I am working on this website formationMTL
The website looks great on all browsers exept IE.
Here's a snapshot from IE
I am new to this and don't know how to even tackle this issue. Any suggestions?
Note: IE version: 7.0.6002.18005
Thanks,
Hate to break it to you but, even though there are long, drawn-out solutions you could spend days testing and adding conditionals for in your code (and for you I mean, literally days non-stop), it would be much more logical to put this in your <head> and call it a day:
<!--[if IE lt 9]>
<script type="text/javascript">
var $buoop = {
vs: {
i: 8,
f: 5,
o: 12,
s: 5,
n: 9
}
};
$buoop.ol = window.onload;
window.onload = function () {
try {
if ($buoop.ol) $buoop.ol();
} catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "//browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
<![endif]-->
Browser-Update.org (even Hawaii.gov uses it)
Try using a reset.css that can reset the default browser CSS Behaviours before you apply your CSS, maybe it solve your problem, the reset.css can be found here: http://www.cssreset.com
Try adding a clearing element after the downncontent div
<div class="downcontent">...</div>
<div style="clear:left;"></div>
When working with floating elements, it is important to use a clearing element afterwards to help the browser render the elements in the correct order and placement. IE is certainly guilty of doing this incorrectly.
The problem is with the clearing. Do this:
CSS
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; // For IE 6/7 (trigger hasLayout)
clear: both;
display: block;
overflow: visible;
}
HTML
<div class="subcontain">
[...]
<div id="banner"></div>
<div class="clearfix">
<div class="downcontent"></div>
<div class="searchcourse"></div>
</div>
</div>
Unrelated, but might help you in the future. Replace this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
With this:
<!DOCTYPE html>
<html>
This will make your markup less likely to trigger Quirk Mode on IE.
Related
I'm trying to use CSS Containment(contain: layout), but it doesn't seems to work correctly on Chrome 62.
I want to know a proper way to use contain: layout or what is my misunderstanding.
Code is here:
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Containment</title>
<script src="main.js" defer></script>
</head>
<body>
<div id="container" style="contain: layout; height: 300px; width: 300px">
</div>
</body>
</html>
main.js:
const container = document.querySelector('#container');
setTimeout(() => {
const elem = document.createElement('div');
elem.textContent = 'content';
container.appendChild(elem);
}, 100);
I expect that the #container element is rendered as a layout root after appendChild(elem), but Chrome Dev Tool shows that the root is still the #document.
On the other hand, contain: layout size or contain: strict works correctly, which means #container becomes a layout root.
Other browsers don't support CSS Containment yet, so I can't identify it's Chrome-specific or on the spec.
If you have any ideas, please give me a hand.
I'm trying to build a custom HTML element. The problem is that I'm not able to apply styles to the Shadow DOM elements provided using external CSS. The code is working in Chrome but not in Firefox.
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
console.log('Element creation started...');
var inputTextElement = document.createElement('input');
inputTextElement.type = 'text';
inputTextElement.className = 'simpleElem';
// Shadow DOM root
var shadowRoot = this.createShadowRoot();
shadowRoot.appendChild(inputTextElement);
console.log('Element creation ended...');
};
var SimpleElement = document.registerElement('simple-element', { prototype: proto });
simple-element {
}
simple-element::shadow .simpleElem {
height: 30px;
margin: 0px;
padding: 0px;
width: 180px;
}
<!doctype html>
<html>
<head>
<title>HTML5 | Custom Elements</title>
<link type="text/css" rel="stylesheet" href="simple-elem.css">
<script type="text/javascript" src="simple-elem.js"></script>
</head>
<body>
<simple-element></simple-element>
</body>
</html>
Not able to figure out what is wrong with Firefox.
As noted by Gábor Imre, Shadow DOM is not enabled by default in Firefox because it is still under development. You can, however, use a polyfill to get pretty good Shadow DOM behavior in all browsers that don't support it.. If you do, you'll then need to use polyfill-next-selector to obtain the behavior you want.
Update: FF Shadow DOM support has arrived.
Firefox has no Shadow DOM support yet, see CanIUse.com. I recommend sticking to Chrome.
EDIT: FF Nightly has some support, it can be enabled manually.
While Shadow DOM in general has been supported in Firefox for a while now (invalidating the two other answers), with Firefox 72 you can now target custom/Shadow DOM elements via the part attribute and ::part() pseudo-element, respectively:
//this JS boilerplate adapted from MDN
let template = document.getElementById("simple-element");
globalThis.customElements.define(template.id, class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content);
}
});
simple-element::part(shadow) {
height: 30px;
margin: 0;
padding: 0;
width: 180px;
background: green;
}
<template id="simple-element">
<div part="shadow">Hi</div>
</template>
<simple-element></simple-element>
Obviously this code looks a lot different from what your question code looks like because the Shadow DOM spec/implementations have changed quite a lot since 2014.
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr{vertical-align: top;}
</style>
<script type="text/javascript">
function ready() {
s = '';
t = '';
for(var i=1; i<=450; ++i)
{
s += i + '\n';
t += i + '\r\n';
}
document.getElementById("numbers1").innerHTML = "<pre><code>"+s+"</code></pre>";
document.getElementById("numbers2").innerHTML = "<pre><code>"+t+"</code></pre>";
}
</script>
</head>
<body>
<table id="wrap"><tr>
<td id="numbers1"></td>
<td id="numbers2"></td>
</tr></table>
</body>
<script type="text/javascript">
ready();
</script>
</html>
In IE9, when rendered in IE9 Standards mode (the default for the above HTML) there is a blank line in the right column between numbers 428 and 429 (see pic)
This is only in IE, and only in full IE9 Standards mode.
Can anyone explain this very odd behavior? Why only at that line? If it was every line, I could understand that it was showing \r\n as 2 line breaks.
Here is the fiddle http://jsfiddle.net/K2SUU/
This must be some kind of IE9 rendering bug with the way you are setting the innerHTML. If I move the <pre><code> wrapper to the HTML and only use innerHTML to set the text, the problem disappears:
<table id="wrap"><tr>
<td><pre><code id="numbers1"></code></pre></td>
<td><pre><code id="numbers2"></code></pre></td>
</tr></table>
...
document.getElementById("numbers1").innerHTML = s;
document.getElementById("numbers2").innerHTML = t;
http://jsfiddle.net/K2SUU/1/
You are right, though, it does seem to be unexplainable. The comments on your question suggest it only happens in specific versions of IE9. Mine is 9.0.8112.16421 according to the About Internet Explorer dialog box.
I am making a website, but an element needs margin in Chrome and other browsers, but not in safari. So I want to add a css line to fix it, but I can't find any method to add css for safari 3+ only.
I believe this should work
Fiddle : http://jsfiddle.net/kHFjM/1/
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent .indexOf('safari')!=-1){
if(userAgent .indexOf('chrome') > -1){
//browser is chrome
}else if((userAgent .indexOf('opera') > -1)||(userAgent .indexOf('opr') > -1)){
//browser is opera
}else{
//browser is safari, add css
}
}
here is the link to detect the browser version
https://stackoverflow.com/a/5918791
jQuery integrated solution:
<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
$("body").addClass("safari");
}
});
</script>
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
Pure JS integrated solution:
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
<body>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.
But you could do this in PHP.
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
Replace safari.css with your own stylesheet. Credit to #theorise
In safari 9.0 (only, not > 9.0) you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me. Use this hack:
#supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}
The reason it is working is: Safari 9.0 and above have feature detection. So by detecting a feature which is exclusively for Safari you can detect Safari. overflow:-webkit-marquee and justify-content:inherit are exclusively for safari. Thats why we can detect safari with this simple CSS hack.
This worked for me for old and new safari browsers:
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance: none) {
/* Safari Only CSS here */
}
}
Instead of adding more code to fix your problem, since the default margins are different, you could try resetting all off the margins and paddings of surrounding elements to 0 first before changing it. That could solve your issue.
It's completely a personal preference, but I start all of my webpages with:
*{
margin:0;
padding:0;
}
I've never had any cross browser issues regarding margins or padding while doing this.
There is a question similar to this on the CSS-Tricks forum. But the answer is basically, nope.
You could attempt user-agent sniffing server side or with JavaScript and then add a class to the html (like for old IE versions in HTML5 BoilerPlate).
Hope this helps.
--beaten to it by the guys above and below!
I have tried almost all of the above-suggested solutions, but nothing is working around until I saw a piece of code in my says:
#-webkit-keyframes fadein {
//code here
}
And it did the job and applied the required CSS for:
Safari, Chrome and Opera > 12.1
Hope this can help someone.
I'm building a web page where i need to make different sections and i want the page to adjust height to the section that is beeing viewed in a certain moment.
Which is the best way to achieve this?
I was trying to do it with iframes and target opening
<a href="/example" target="myframe">
but i cant make the iframe adjust to the content beeing displayed.
Any help would be aprecciated!
Thanks in advance
What i want is a window to unfold from the bottom of the page whenever someone clicks on "more info".
I thought i could achieve it with an iframe
this works in all browsers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>auto iframe height adjust</title>
<style>
</style>
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
</head>
<body>
An iframe capable browser is
required to view this web site.
I found this solution and it solved my problem perfectly! It even has the option to rezise width.
<script type='text/javascript'>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}
if( ifDoc )
{
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
// ifRef.width = 1;
// ifRef.width = ifDoc.scrollWidth;
}
}
</script>
<iframe id = "myIframe" onload = "setIframeHeight( this.id )">
I found it here: http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height