Comments on: Lovin IE7 http://www.rjohnson.id.au/wordpress/2007/02/23/lovin-ie7/ Just another WordPress weblog Sat, 04 Feb 2012 23:29:38 +0000 http://wordpress.org/?v=2.6.2 By: Derek http://www.rjohnson.id.au/wordpress/2007/02/23/lovin-ie7/#comment-624 Derek Fri, 08 May 2009 03:08:49 +0000 http://www.rjohnson.id.au/wordpress/2007/02/23/lovin-ie7/#comment-624 I have found that the 3px margin error is still kicking in IE7. I tested the following in IE7 on a Vista machine and it works in FF but not in IE7... 3px gap between floater and extras. Do you get the same results? <html> <head> <title>IE Sucks so much!</title> <style type='text/css'> /* ** Markup free clearing ** Details: http://www.positioniseverything.net/easyclearing.html */ .clear-block:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear-block { display: inline-block; } /* Hides from IE-mac \*/ * html .clear-block { height: 1%; } .clear-block { display: block; } /* End hide from IE-mac */ .container { width: 400px; } div { margin: 0; padding: 0; } .floater { width: 60px; height: 165px; background: red; float: right; } .content { height: 60px; background: green; } .extras { width: 340px; background: tan; } </style> </head> <body> <div class='container clear-block'> <div class='floater'>If only IE didn't stink so much...</div> <div class='content'><p>This is the primary content. It is displayed beside the floater.</p></div> <div class='extras'><a href='/'>Link 1</a><a href='/'>Link 2</a><a href='/'>Link 3</a></div> </div> </body> </html> I have found that the 3px margin error is still kicking in IE7. I tested the following in IE7 on a Vista machine and it works in FF but not in IE7… 3px gap between floater and extras. Do you get the same results?

<html>
<head>
<title>IE Sucks so much!</title>
<style type=’text/css’>
/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clear-block {
height: 1%;
}
.clear-block {
display: block;
}
/* End hide from IE-mac */

.container {
width: 400px;
}

div {
margin: 0;
padding: 0;
}

.floater {
width: 60px;
height: 165px;
background: red;
float: right;
}
.content {
height: 60px;
background: green;
}
.extras {
width: 340px;
background: tan;
}

</style>
</head>
<body>
<div class=’container clear-block’>
<div class=’floater’>If only IE didn’t stink so much…</div>
<div class=’content’><p>This is the primary content. It is displayed beside the floater.</p></div>
<div class=’extras’><a href=’/'>Link 1</a><a href=’/'>Link 2</a><a href=’/'>Link 3</a></div>
</div>
</body>
</html>

]]> By: Derek http://www.rjohnson.id.au/wordpress/2007/02/23/lovin-ie7/#comment-623 Derek Fri, 08 May 2009 03:03:16 +0000 http://www.rjohnson.id.au/wordpress/2007/02/23/lovin-ie7/#comment-623 Take a look at the following html. In IE7 on my Vista machine the 3px problem is still there: IE Sucks so much! /* ** Markup free clearing ** Details: http://www.positioniseverything.net/easyclearing.html */ .clear-block:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear-block { display: inline-block; } /* Hides from IE-mac \*/ * html .clear-block { height: 1%; } .clear-block { display: block; } /* End hide from IE-mac */ .container { width: 400px; } div { margin: 0; padding: 0; } .floater { width: 60px; height: 165px; background: red; float: right; margin-left: -3px; } .content { height: 60px; background: green; } .extras { width: 340px; background: tan; } If only IE didn't stink so much... This is the primary content. It is displayed beside the floater. <a href='/' rel="nofollow">Link 1</a><a href='/' rel="nofollow">Link 2</a><a href='/' rel="nofollow">Link 3</a> Take a look at the following html. In IE7 on my Vista machine the 3px problem is still there:

IE Sucks so much!

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clear-block {
height: 1%;
}
.clear-block {
display: block;
}
/* End hide from IE-mac */

.container {
width: 400px;
}

div {
margin: 0;
padding: 0;
}

.floater {
width: 60px;
height: 165px;
background: red;
float: right;
margin-left: -3px;
}
.content {
height: 60px;
background: green;
}
.extras {
width: 340px;
background: tan;
}

If only IE didn’t stink so much…
This is the primary content. It is displayed beside the floater.
Link 1Link 2Link 3

]]>