Strange IE7 bug

HTML & CSS
1

I have found a strange bug that only occurs in IE7.

First and foremost, my version of IE7 is the one I downloaded from Tredsoft. But I’ve also check this issue over at ipinfo.info/netrenderer/index.php.

This is the site I’m making, http://www.andrew-brundle.com/iso9001courses/

In IE6, IE8 and all other normal “normal” browsers, everything is fine. But in IE7 there is a problem with the way those DVD images display in the right column.

Basically, the first DVD image is chopped in half (ie, only the upper part is shown); the image below that is rendered correctly; the one below that is again chopped in half; and the one below that is rendered correctly.

Does anyone know why this happens?

Thanks in advance for any help.

2

… and here’s what I came up with

As with all my examples, the directory is unlocked for easy access to all the bits and pieces:
http://www.cutcodedown.com/for_others/andrew-bkk/

It took me longer than planned because I ended up writing a new fader script for it. The one you were using was rebuilding the DOM so much using innerHTML and making the browser check the cache so much it was driving lesser computers insane with the CPU use. I’m not as rabidly anti innerHTML as some other developers out there, but really changing the markup for every fade was pushing it. The script ended up growing to 1.6k from the original 1k, but that extra 600 bytes include ‘onload’ collision prevention, a smoother onload check and timer system. (yours was starting and aborting the timer 20 times per ‘is it loaded’ check. It also directly manipulates the IE FILTER instead of using their pre-built animations so the timing could be adjusted identical to the non-IE version. It’s also all self-contained in a object so the only addition to the top level namespace is the ‘slides’ variable.

Said variable has to be built as a self-extending object so that our timeouts can call it. This removes the ability to run more than one instance at once, but at least we get the namespace reduction.

HTML/CSS itself tested working 100% in IE 5.5, 6, 7, 8 & 9 beta, Opera 10.62, FF 2 and 3.53, and the latest flavors each of Safari and Chrome. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple -moz properties and of course the IE filter.

I documented all the places that needed haslayout triggers too.

The only ‘bug’ is that the script doesn’t work in IE5.5… which is ok, your original doesn’t either both throwing that wonderful “library not registered” bug. Big deal, it’s IE 5.5 - like we give a ****! (it’s just fun to have as much working there as possible for so little effort)

Luckily I already had a yourCurrencyConverter account pointing at that domain from another page I rewrote for someone – be sure if you copypasta my markup to swap out the ID code in the SCRIPT for that.

I did add a few .first classes, one extra div, and some other minor tweaks from my previously posted markup – it’s really nothing major just the normal stuff you often add once doing the layout.

The biggest changes are the throwing away of the heading sprite image as pointless bloat, some tweaking of the margins so the ones between the columns are even, and biggest of all changing as much of the content fonts to 80% instead of 12px as possible. Anything less than 14px is a miserable accessibility /FAIL/ for Large font/120dpi users, so that’s the smallest fixed size I used in the cases where I was forced to make px fonts – but wherever possible I made them dynamic (%/em) instead.

Hope this helps – Hope it doesn’t annoy you since you asked a small question and I ripped it to shreds… Just trying to be helpful.

3

IE8 doesn’t really have the same “engine” has IE6/7 and although “haslayout” is buried somewhere in the code it is not required for elements to take care of themselves properly (99.9% of the time).

IE6 does need “haslayout” almost all day long and most complicated components of as design will break if they are not in haslayout mode.

The trigger and circumstances are many and varied and while IE7 is much much better than IE6 it does occasionally get caught out. The reason it is more stable is possibly due to differences in its coding algorithms but this also means that it may exhibit problems at different times compared to IE6.

There is no ryhme or reason to it except that you just have to remember that any container that holds more than simple text content will need to be in haslayout mode to be secure.

I’m actually not a CSS dunce. A long time ago someone was talking about my Zen Garden design on this forum. And the guy was giving out my URL incorrectly. So I corrected him. And then you wrote to me to talk about self promotion. If I remember correctly, you gave me a warning!

Sorry, about that :slight_smile:

4

That’s a great link, thanks.

I still don’t fully understand why “haslayout” is needed for IE7 but not IE6 or IE8.

Never mind!

I’m actually not a CSS dunce. A long time ago someone was talking about my Zen Garden design on this forum. And the guy was giving out my URL incorrectly. So I corrected him. And then you wrote to me to talk about self promotion. If I remember correctly, you gave me a warning!

So – you see – I do know a bit about CSS. But I tend to view CSS as a kind of glue to stick all the various bits and pieces together. You are clearly much more knowledgeable about this glue than I am. Obviously I need to read more and learn, learn, learn!

5

Hi,

The min-height:0 works because min-height is a “haslayout” trigger in IE7 and once in haslayout mode an element will take more care of itself and its boundaries. You can read a full description in the link above.

We use min-height:0 because it has no effect to the layout unlike a dimension and leaves the elements presentation untouched.

Haslayout problems can turn up anywhere but are often caused when an element holds more than simple content. If you have an image inside a div that is maybe floated or have positioned elements inside then the parent must have a layout (haslayout).

IE6 has similar (and usually much worse) issues with haslayout but they don’t necessarily correspond with IE7 although at times both will display problems for the same element.

Note that min-height is not a haslayout trigger in IE6 as it doesn’t understand min-height anyway and for IE6 you would need a dimension or perhaps the proprietary zoom property.

My editor is Scintilla. And the only BOMS I’m aware of are those that get dumped around Bangkok shopping malls from time to time. Why would a BOM in my code affect things? I don’t even see this BOM in my code. And I’m not aware of any browsers being affected by this.

Anyway – thanks for your help. Really great!

The bom (byte order mark) should nt be save din your css file because it can upset some browers and indeed breaks the files when viewed locally. The browser sees it as a selector () and then looks for the opening bracket and gets confused when it doesn’t find one.

Just use Firefox and click the edit css tab from the web developer toolbar and you will see the BOM displayed as the first character in the file.

Just set your editor not to save the bom for css files (assuming its capable of doing that - If not use another editor such as notepad ++) .

http://www.w3.org/International/questions/qa-utf8-bom.en.php

6

Uhm, your layout seems to still have issues here in IE8 and Opera. The right column is float dropping, the footer is not clearing properly, and you seem to have padding issues around the menus.

Taking a peek under the hood, you’ve got some markup issues and as I always say: “CSS is only as good as the markup it’s applied to”

Biggest thing I’m noticing is the non-semantic markup with endless unnecessary classes. Just because something is text doesn’t mean it should have a P around it… and if every tag inside a block level container is getting the exact same class, there is NO reason to be putting a class on it!

For example:


		<div id="nav-1">
			<p class="top-nav"><a href="courses.php" class="nav courses "><span class="link-text">Courses</span></a></p>
			<p class="top-nav"><a href="promotions.php" class="nav promotions "><span class="link-text">Promotions</span></a></p>		
			<p class="top-nav top-nav-right"><a href="compare-courses.php" class="nav editors-tips "><span class="link-text">Editors Tips</span></a></p>		
		</div>	
		<div id="nav-2">
			<p class="top-nav"><a href="about.php" class="nav about "><span class="link-text">About</span></a></p>
			<p class="top-nav"><a href="information.php" class="nav information "><span class="link-text">Information</span></a></p>		
			<p class="top-nav"><a href="faq.php" class="nav faq "><span class="link-text">FAQ</span></a></p>	
			<p class="top-nav top-nav-right"><a href="contact.php" class="nav contact "><span class="link-text">contact</span></a></p>
		</div>

Those are not paragraphs of text, NONE of the classes you have there are neccessary, and that should be a LIST. As in ONE list. Given your styling there is NO reason for the code there to be more than:


		<ul id="mainMenu">
			<li class="startLine"><a href="courses.php">Courses</a></li>
			<li><a href="promotions.php">Promotions</a></li>		
			<li><a href="compare-courses.php">Editors Tips</a></li>		
			<li class="startLine"><a href="about.php">About</a></li>
			<li><a href="information.php">Information</a></li>		
			<li><a href="faq.php">FAQ</a></li>	
			<li><a href="contact.php">contact</a></li>
		</ul>

It’s a list of options, treat it as a list. You aren’t doing anything special with them, so they don’t need the unique class, they’re all getting that same ‘nav’ class which means they don’t need that class as they can inherit off the parent.

You’ve got an ID on body for no good reason (there’s NO reason to EVER put an ID on body!), you have redundant/pointless meta’s basically saying the DEFAULT values on things like robots and re-visit, and to top it off you’ve got presentational classes like “delineation-2 margin-25” kinda defeating one of the reasons to use CSS in the first place; separation of presentation from content.

Much less the image replacement method you are using that doesn’t work as a image replacement method with CSS on images off… defeating the point of wasting your time on them – and for what, just to get some pointless fancy font on things? (that I can’t tell apart from Arial bold?)

Of course, it’s also got a HTML5 doctype meaning you can’t even check that your completely following the STRICT rules, and are deploying something not even out of DRAFT yet.

Which is why if I wrote that same page, the markup would look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Providing a complete range of bestselling ISO 9001 courses to address training needs"
/>

<meta
	name="keywords"
	content="ISO 9001, Course, Training, auditor, instructors, video, dvd, online, learning"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	type="image/x-icon"
	rel="shortcut icon"
	href="http://www.andrew-brundle.com/graphics/f-icon.ico"
/>

<title>
	ISO9001 Courses - Effective ISO 9001 Training
</title>

<script type="text/javascript" src="javascript/core.js"></script>

<script type="text/javascript">
	var slide_count=4
</script>

</head><body>

<div class="topBar"></div>

<div id="pageWrapper">

	<h1>
		<a href="http://www.iso9001courses.com/">
			ISO 9001 Courses
			<span></span>
		</a>
	</h1>

	<ul id="mainMenu">
		<li class="startLine"><a href="courses.php">Courses</a></li>
		<li><a href="promotions.php">Promotions</a></li>
		<li><a href="compare-courses.php">Editors Tips</a></li>
		<li class="startLine"><a href="about.php">About</a></li>
		<li><a href="information.php">Information</a></li>
		<li><a href="faq.php">FAQ</a></li>
		<li><a href="contact.php">contact</a></li>
	</ul>

	<a id="viewCart" href="">
		<img src="graphics/cart.png" alt="View Cart"/>
	</a>

	<p>
		ISO9001 Courses provides a complete range of bestselling ISO 9001 training courses that address your different training needs
	</p>
	
	<div id="slideshow">
		<img id="slide" width="920" height="235" alt="" src="graphics/slides/slide-1.jpg" />
		<div id="next"></div>
	</div>
	
	<div class="column1of3">
		<div class="section">
			<h2>Course Recommendations</h2>
			<p>
				ISO 9001:2008 requires training, and most auditors will check if proper ISO 9001 training was provided. Basically, all management and employees need to receive some form of training in ISO 9001.
			</p>
			<a class="more" href="recommendations.php">view our editor&#39;s recommendations</a> &raquo;
		</div>
		
		<h2>Promotions</h2>
		
		<div class="subSection">
			<h3>e-Learning Online Promotion</h3>
			<p>
				Save 25&#37; with our 2-course package!
			</p>
			<ul>
				<li>ISO 9001:2008 Management Overview</li>
				<li>ISO 9001:2008 Internal Auditor</li>
			</ul>
			<a class="more" href="promotions.php">read more</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="subSection">
			<h3>DVD Courses Promotion</h3>
			<p>Save 24% with our 3-course package!</p>
			<ul>
				<li>Quality Basics</li>
				<li>How to Deal with External Auditors</li>
			</ul>
			<a class="more" href="promotions.php">read more</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="section">
			<h2>About Us</h2>
			<p>
				ISO9001Courses.com specializes in providing a complete range of ISO 9001 training in the most efficient and most cost-effective way.
			</p>
			<ul>	
				<li>Foremost Experts in ISO 9001</li>
				<li>IACET Approved Courses</li>
				<li>Highly Qualified	Instructors</li>
				<li>Effective and Efficient Training</li>
				<li>Tests Included</li>
				<li>Convenient &ndash; Learn in your Office or Home</li>
				<li>Compliant with ISO 9001:2008</li>
				<li>Applicable to all Organizations Worldwide</li>
				<li>Excellent Customer Service</li>
				<li>Best Price Guarantee</li>
				<li>Money Back Guarantee</li>
			</ul>
			<a class="more" href="about.php">learn more about the training we offer</a> &raquo;
		<!-- .section --></div>
		
	<!-- .column1of3 --></div>
		
	<div class="column2of3">
		<h2>e-Learning Online</h2>
		<p>
			With our e-Learning Online courses you&#39;ll get interactive ISO 9001:2008 training that you can take at your own pace and which is available instantly.
		</p>
		
		<div class="subSection">
			<img src="graphics/monitor.png" alt="A Monitor"/>
			<h3>ISO 9001:2008 Management Overview</h3>
			<p>
				Concise overview of the ISO 9001:2008 standard and its implementation &ndash; specifically designed for the needs of executive management.
			</p>
			<div class="currency">
				<span>2 hours</span> $89
			</div>
			<a class="more" href="e-learning-management-overview.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="subSection">
			<img src="graphics/monitor.png" alt="A Monitor"/>
			<h3>ISO 9001:2008 &ndash; Benefits and QMS Requirements</h3>
			<p>
				Interactive course that provides in-depth understanding of ISO 9001:2008, including its benefits to the company, the principles behind it, and all the various ISO 9001:2008 requirements.
			</p>
			<div class="currency">
				<span>6 hours</span> $159
			</div>
			<a class="more" href="e-learning-benefits-qms.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="delineation-2 margin-25">
			<img src="graphics/monitor.png" alt="A Monitor"/>
			<h3>
				ISO 9001:2008 Internal Auditor
			</h3>
			<p>
				Interactive course that provides comprehensive training in the ISO 9001:2008 standard and its requirements, as well as basic skills necessary to complete an internal audit.
			</p>
			<div class="currency">
				<span>6 hours</span> $159
			</div>
			<a class="more" href="e-learning-internal-auditor.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
	<!-- column2of3 --></div>

	<div class="column3of3">
	
		<h2>DVD Courses</h2>
		<p>
			Our DVD Courses are cost-effective ISO 9001:2008 training in the form of video presentations (with workbooks) for individuals and groups.
		</p>
		
		<div class="subSection">
			<img src="graphics/dvd.png" alt="DVD" />
			<h3>
				ISO 9001:2008 Basics
				<em>What Employees Need to Know</em>
			</h3>
			<p>
				Introduction of the ISO 9001 standard for a wide range of employees to create employee "buy-in".
			</p>
			<div class="currency">
				<span>35 minutes</span>	$245
			</div>
			<a class="more" href="dvd-employees.php">More info</a> &raquo;
			<p class="languages">
				Also available in <a href="dvd-employees-spanish">Spanish</a> &raquo;
			</p>
		<!-- .subSection --></div>
		
		<div class="subSection">
			<img src="graphics/dvd.png" alt="DVD" />
			<h3>
				Quality Basics
				<em>Quality is for Everyone</em>
			</h3>
			<p>
				Training video to sharpen employee awareness and reinforce their commitment to quality and customer satisfaction.
			</p>
			<div class="currency">
				<span>16 minutes</span> $190
			</div>
			<a class="more" href="dvd-quality-basics.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="subSection">
			<img src="graphics/dvd.png" alt="DVD" />
			<h3>
				Internal Auditing Basics 
				<em>An Introduction to Auditing for Employees</em>
			</h3>
			<p>
				Video training program for employees to become internal auditors; this DVD course focuses on all auditing skills.
			</p>
			<div class="currency">
				<span>30 minutes</span> $245
			</div>
			<a class="more" href="dvd-auditing-basics.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
		<div class="subSection">
			<img src="graphics/dvd.png" alt="DVD" />
			<h3>
				How to Deal with External Auditors
				<em>A Basic Guide for Employees</em>
			</h3>
			<p>
				Prepares employees for the ISO 9001:2008 certification audit, thus increasing the chances for success.
			</p>
			<div class="currency">
				<span>22 minutes</span> $190
			</div>
			<a class="more" href="dvd-external-auditors.php">More info</a> &raquo;
		<!-- .subSection --></div>
		
	<!-- .column3of3 --></div>

	<div id="footer">
	
		<div id="footerMenus">
			<ul>
				<li><a href="information.php">Payment</a></li>
				<li><a href="information.php">Refunds</a></li>
				<li><a href="information.php">Shipping</a></li>
				<li><a href="information.php">System Requirements</a></li>
				<li><a href="information.php">Course Certificate</a></li>
				<li><a href="faq.php">FAQ</a></li>
			</ul><ul>
				<li><a href="about.php">About</a></li>
				<li><a href="contact.php">Contact</a></li>
				<li><a href="terms.php">Terms</a></li>
				<li><a href="affiliates.php">Affiliates</a></li>
			</ul><ul>
				<li><a href="courses.php">Courses</a></li>
				<li><a href="promotions.php">Promotions</a></li>
				<li><a href="compare-courses.php">Compare Courses</a></li>
				<li><a href="recommendations.php">Recommendations</a></li>
			</ul><ul>
				<li>e-Learning Courses</li>
				<li><a href="e-learning-management-overview.php">Management Overview</a></li>
				<li><a href="e-learning-benefits-qms.php">Benefits and QMS Requirements</a></li>
				<li><a href="e-learning-internal-auditor.php">Internal Auditor</a></li>
			</ul><ul>
				<li>DVD Courses</li>
				<li><a href="dvd-employees.php">ISO 9001:2008 Basics</a></li>
				<li><a href="dvd-employees-spanish.php">ISO 9001:2008 Basics (Spanish)</a></li>
				<li><a href="dvd-quality-basics.php">Quality Basics</a></li>
				<li><a href="dvd-auditing-basics.php">Internal Auditing Basics</a></li>
				<li><a href="dvd-external-auditors.php">How to Deal with External Auditors</a></li>
			</ul><ul>
		<!-- #footerMenus --></div>
		
		<img src="graphics/seals.png" alt="seals" />

		&copy; ISO9001 Courses 2009 - 2010 |
		<a href="http://www.andrew-brundle.com">website by andrew brundle</a>
			
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

<span id="ycclink" style='display:none'>
	<a href="http://www.yourcurrencyconverter.com">geolocation - multi currency</a>
</span>

<script type="text/javascript">
	var curdate=new Date();
	var datenum=curdate.getMonth()+'-'+curdate.getDay()+'-'+curdate.getYear();
	document.write('<scr'+'ipt type="text/javascript" src="//server2.YourCurrencyConverter.com/ConvertCurrency.ashx?id=2545nomd1nmhiegzvwmtz51gyxavx4&spoofCountry=XX&date='+datenum+'"></scr+'ipt>');
</script>

</body></html>

Which throws about a third of the markup away… of course I’d also be throwing away about two-thirds your images as well since there’s no legitimate reason to be using images on those headers.

I have time later I’ll toss together the CSS I’d use with that.

7

Hi there – that’s excellent. But how does it work?

I mean, why does “min-height” make things right? And why is IE7 the only browser affected?

My editor is Scintilla. And the only BOMS I’m aware of are those that get dumped around Bangkok shopping malls from time to time. Why would a BOM in my code affect things? I don’t even see this BOM in my code. And I’m not aware of any browsers being affected by this.

Anyway – thanks for your help. Really great!

8

HI,

Looks like haslayout again.

Try this:


.delineation-3{min-height:0}

BTW your css is saving a bom which could upset some browsers.


[B]&#239;&#187;&#191;[/B]
/************************* Body + Elements / Defaults *******************/

Adjust your editor so that it doesn’t save it.

9

Impressive work once again Jason - especially re-writing the fader script :slight_smile: