When I add a margin to .child in the following code IE8 ignores it. In modern browsers the same code is working as expected. What is causing this?
<html lang=“de“ xml:lang=“de“ xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=“Content-Type“ content=“text/html“; charset=“iso-8859-1“ />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
The problem is that you have not supplied a doctype which means that IE8 does not know what rendering mode to use and is therefore defaulting to quirks mode. Quirks mode is essential an old, non-standard layout engine used back when the web was young:
There are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications. In almost standards mode, there are only a very small number of quirks implemented.
Quirks Mode and Standards Mode (https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)
Browsers handle a lack of doctype in different ways and you should always ensure that you specify one at the beginning of you HTML to ensure consistent rendering of your page. At time of writing I would recommend the HTML5 doctype as it is short, clear and supported as far back as IE6.
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.parent {
margin: 5px;
border: 10px solid blue;
position: relative;
}
.child {
margin: 10px;
border: 10px solid red;
padding: 4px;
}
</style>
</head>
<body>
<div class="parent">
<p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD!
<span id="textOutput"></span>
</p>
</div>
</body>
</html>
It should also be noted that you need to use normal quotation marks not curly quotes for your attribute values and need a closing html tag.
Related
I'm trying to get hyphens working on text that has <span> elements inside for highlighting. This seems to break the hyphen algorithm. Is there any way to fix the behaviour so that hyphens are placed the same as without <span> elements?
I'm not asking about a workaround like
The Code (sandbox: https://codepen.io/anon/pen/ayzxpM):
.limit {
max-width: 50px;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
Using the lang attribute
Adding the lang attribute as Vadim Ovchinnikov suggested (<div class="limit" lang="en">) can lead better results on some platform/browser combinations. On Firefox 54, Windows 10 this is the result:
But even that seems buggy. The hyphen should be black in my opinon and the hyphen algorithm seems to miss the chance to make a line break between "fruit" and "tree", also completly ignoring the max-width that is set for the container.
Actually, it does work with spans, in a number of browsers. You just used a word that is not recognized. Here's an example with a normal English word, that works in IE (should also work in Edge) and FF on Win7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<title>Demo</title>
<style>
div {
max-width: 50px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
</style>
</head>
<body>
<div>
<p>Incomprehensibilities</p>
<p>Incom<span>pre</span>hensibilities</p>
</div>
</body>
</html>
It does not work in Chrome on Win, because that currently (June 2018) still does not support hyphens at all. It also does not work in any iOS browser. So you will have to use soft hyphens after all. But as you stated that you were curious about the mechanism, I thought it worthwhile to still post this answer.
Chrome has only partial support for hyphens property (only Mac and Android platforms), so you can't make it work on Windows.
I don't see any difference between span presence and absence in Firefox, IE and Edge (all on Windows) for this code.
To make it work there you'll need set lang for container and add vendor prefixes (for -ms-hyphens IE/Edge and -webkit-hyphens for Safari). Demo:
.limit {
max-width: 50px;
font-size: 20px;
/* Safari */
-webkit-hyphens: auto;
/* IE, Edge */
-ms-hyphens: auto;
hyphens: auto;
background-color: #eee;
}
span {
color: red;
}
<div class="limit" lang="en">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
To work in all browsers you may shouldn't use CSS hyphens property, just insert manually where you want hyphens.
.limit {
max-width: 50px;
font-size: 20px;
background-color: #eee;
}
span {
color: red;
}
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
hyphens: manual
togteher with
might work
see documentation here
https://css-tricks.com/almanac/properties/h/hyphenate/
this code on codepen seems to work
<div class="limit">
<p>
Appletreefruitthing
</p>
<p>
Apple<span>tree</span>fruitthing
</p>
</div>
CSS
.limit {
hyphens: manual;
}
I want to implement a hover effect with CSS for a html input button. (Changing border color on mouse over).
Actually technically no problem - and it is working - however I have issues with Internet Explorer 7 as well as IE8, because the effect is only working like 80% of the times there.
I also change the mousecursor on hover - which is working without problems - but changing the border (or the background-color) is working only most of the times. Sometimes I enter the button with the mouse and nothing happens.
Is thtere anyway to circumvent this behaviour - without using javascript or code-blowing wrapper elements?
See the following example code for details:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html id="document:html" lang="de">
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<style type="text/css">
input.linebutton {
border: 1px solid #BBB;
margin: 0 2px;
background-color: #EEE;
text-align: left;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 1px 3px 1px 23px;
width: 0; /* for IE only */
overflow: visible;
cursor:pointer;
height:22px;
}
input.linebutton:hover {
border: 1px solid #FF8C00;
background-color: #EEE;
outline: none;
}
input.linebutton:active, .linebutton:focus {
border: 1px solid #000000;
background-color: #EEE;
outline: none;
}
.linebutton[class] { /* IE ignores [class] */
width: auto;
}
</style>
</head>
<body >
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" />
</body>
</html>
Thanks in advance!
Digging graves up, but I had the same issue with IE7 and input:hover. When I changed the doctype to strict it was then support in IE7. No js needed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE7 support for hover
Not quite so elegant but maybe some jQuery?
jQuery("input.linebutton").hover(function() {
jQuery(this).addClass("HoverClassName");
}, function() {
jQuery(this).removeClass("HoverClassName");
});
Just replace your input[type=submit] by a button and you should be fine.
Your example modified would like like this:
<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>
Given the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.apartBox
{
padding:12px;
background: #FFFFFF;
border: solid 1px #6182A3;
}
.browser
{
background: #fff;
border: solid 1px #0055E3;
border-top: solid 12px #0055E3;
border-bottom: solid 4px #7A99C5;
padding:10px 10px 8px 14px;
color: #333;
font: 0.8em/1 arial;
margin: 8px 20px;
}
.callout
{
background: #EEF2F0;
border: solid 1px #9CC7C0;
padding:8px;
}
</style>
</head>
<BODY>
<div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative">
<div id="upSubPop">
<div class="callout" id="subDetails">
<div class="browser">
<span id="txtExample">Me afecta que digan que soy incapaz.</span>
</div>
</div>
</div>
</div>
</BODY></HTML>
The styles from the css .browser and .callout are not visible in IE6 unless I manually remove the position:relative style from subPopout. This div is generated automatically from a modal popup so I unfortunately can't touch this style. It displays fine in FF. If I select the .browser div with my mouse, it displays when I unselect it!
Why are these styles not visible in IE6
To be short, because it's IE6!
Can the box have a fixed height?
If yes, a possible solution would be to set a fixed size to upSubPop element. For example, if you add:
div#upSubPop{background:red;height:500px;}
to your stylesheet, the blue borders are displayed correctly in IE6.
Another workaround would be to set the height of <div class="browser" style="height:1px;" /> to 1 pixel. In this case, IE6 displays the element with appropriate height based on contents (so you will see the whole "Me afecta que digan que soy incapaz." message. The problem is that the real browsers as FF will then display everything incorrectly (to be more precise, the message will overlap the bottom border). So in this case, you can use conditional CSS to ensure that your message block is displayed as required both in real browsers and in IE6.
position:fixed that doesn't work for Internet explorer 6. I can't really understand the fixes found on google. I need it to work in IE6, IE7, IE8 & FireFox 3.0.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
The result isn't super-smooth, but it does work.
UPDATE
I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.
yes IE6 sucks. here's the hack...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
that basically tells IE6 to keep it absolutely positioned in the top left even as it scrolls.
this should go under the rest of your css for the element so it over-rides it in IE6.
here it is for your left bar...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
I just tested this on IETester's version of IE6 and it worked great and... No Jitter, Whoo!
Let say you have a element with a class of box for example...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Replace the opening <HTML> tag with conditional IE statements...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
and
<!--[if !IE]--> <html> <!--[endif]-->
Then like MatW & mitchbryson suggested use 'expression' to simulate position fixed.
Note: This code goes after the original element's styles in the CSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
The problem is that on any page scroll the element will jitter, this is one way to compensate...
Note: This code goes at the top off your CSS or after your styled 'HTML { }' in your CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
According to Thomas Aylott # SubtleGradient.com ,
"... This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!""
article link: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
For example, all together...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
Found this solution which I tweaked ( Basically the lines I changed was: $('#sidebar_left').css('top',document.documentElement.scrollTop); ):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo#gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
It jitters and looks bad, but work on all browsers including IE6.
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
It is possible to do it with CSS expression, but with some extra hack to get a smooth scrolling:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}
In this case, internet explorer doesn't seem to give the right amount of margin. It looks like it measures the margin from the top of the box and ignores the padding. Why is this? Is there a good workaround? Here's an example:
<!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">
<head>
<title></title>
<style type="text/css">
.messagebox
{
border: solid 2px black;
background: blue;
color: white;
padding: 10px; /* Problem only when padding set */
}
h1, h2, h3, h4
{
margin-top: 12px;
}
</style>
</head>
<body>
<div class="messagebox" style="width: 300px">
<h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4>
</div>
</body>
</html>
I'm working in IE7 and FF3. Thanks.
Welcome to the IE box model bug
You may try
body{
zoom:1;
}
I'm not sure if this will help, but it could be a quick fix if it does!
I don't have a specific answer but I have struggled with the differences between IE and FF as it relates to margins and padding.
You may need to explicitly put in the doc type tag. Especially strict mode. That should get them force them into the same layout model. From there on you are dealing with an art rather than a science.
Good luck.