5 Year IE problem is there a workaround?

6 replies [Last post]

Sat, 2008-08-16 13:41

virtualburn

Offline

Regular

Last seen: 14 years 5 weeks ago

Joined: 2006-10-10

Posts: 15

Points: 0

I have just renovated a site to try and make it very simple and straight forward.. One page hold-all, great. Oh was I wrong. I have 2 hyperlinks on the top text, 'Development' & 'Hosting' which have a rololver image popup in the centre of the page. There also some text links on the right sidebar which popup in the centre.

Now I have come across any issue for quite a while with CSS so I just went ahead and did this only to find that it crashes IE causing a fault in shtml.dll - What the hell?

I've found reports of this going back as far as 2003? Why is this still an issue with IE and why do we still have to bear the bane that is Internet Explorer? :curse:

Check out http://www.virtualburn.co.uk in Firefox so you can see it working, and then try IE.

If anybody can provide a work around for this I'm wiling to paypal some funds, I've wasted 5+ hours changing and altering the code with differing effects none of which reproduce what I have now and work in IE.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Virtualburn Web Design
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Virtualburn - Web development and hosting</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
	<h1><a href="#">Virtualburn</a></h1>
	<h2><a href="http://www.virtualburn.com/">Light up the web</a></h2>
</div>
<!-- end div#header -->
<div id="page">
	<div id="content">
		<h1>Web <a class="thumbnailDEV" href="#thumb">Development<span><img src="images/dev.png" /></a> & <a class="thumbnailHOST" href="#thumb">Hosting<span><img src="images/host.png" /></a></h1>
		<p><strong>Virtualburn Web development and hosting solutions</strong>. Established in 1997 we design, develop and deploy websites of all descriptions</p>
		<p class="image" style="height: 130px;"><img src="images/img03.gif" alt="" width="120" height="120" /></p>
		<p>Description of services:</p>
 
		<ul>
			<li>Personal Consultation</li>
			<li>Agreed Design</li>
			<li>Transition Support</li>
			<li>Targetted Audience</li>
			<li>Statistical Analysis</li>
		</ul>
		<p></p>
		<p>From a simple web presence or photo gallery, to a fully hosted Content Management System or Social Network.  Our resonable rates for domain registration and hosting are very competitvie.</p>
		<p><a href="mailto:[email protected]?subject=Web Enquiry">Contact</a></p>
 
	</div>
<!-- end div#content -->
	<div id="sidebar">
		<ul>
			<li id="menu">
				<h2>Development</h2>
				<ul>
					<li><a class="thumbnailWP" href="#thumb">Wordpress<span><img src="images/wordpress.png" /></a></li>
					<li><a class="thumbnailMOO" href="#thumb">Moodle<span><img src="images/moodle.png" /></a></li>
					<li><a class="thumbnailJOO" href="#thumb">Joomla<span><img src="images/joomla.png" /></a></li>
					<li><a class="thumbnailPHP" href="#thumb">PHPbb<span><img src="images/phpbb.png" /></a></li>
					<li><a class="thumbnailMW" href="#thumb">MediaWiki<span><img src="images/mediawiki.png" /></a></li>
					<li><a class="thumbnailDOT" href="#thumb">dotProject<span><img src="images/dotproject.png" /></a></li>
				</ul>
			</li>
<!-- end li#menu -->
			<li id="news">
				<h2>Current Sites:</h2>
				<ul>
					<li>
						<h3>Flash Design</h3>
						<p><a href="http://www.nataraja.in" target="_blank">Nataraja.in</a></p>
					</li>
					<li>
						<h3>vBulletin</h3>
						<p><a href="http://welearn.co.uk" target="_blank">WeLearn.co.uk</a></p>
					</li>
					<li>
						<h3>PHPbb</h3>
						<p><a href="http://www.binaryom.com" target="_blank">BinaryOm.com</a></p>
					</li>
					<li>
						<h3>Social Engine</h3>
						<p><a href="http://twang.me" target="_blank">Twang.me</a></p>
					</li>
				</ul>
			</li>
<!-- end li#news -->
		</ul>
	</div>
<!-- end div#sidebar -->
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end div#page -->
<div id="footer">
	<p id="legal">~ Copyright &copy; 2008 Virtualburn. All Rights Reserved | Designed by
	<a href="mailto:[email protected]?subject=Web Enquiry">Virtualburn</a> ~</p>
</div>
<!-- end div#footer -->
</body>
</html>

And now this is the CSS *Thumbnail code is at the bottom

/*
www.virtulburn.com
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	margin: 20px 0;
	background: #C95619;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #554D49;
}
 
h1, h2, h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000000;
}
 
h1 {
	margin-bottom: .75em;
	font-size: 182%;
}
 
p, blockquote, ul, ol {
	margin-bottom: 1.8em;
	line-height: 1.6em;
}
 
p {
}
 
blockquote {
}
 
ul, ol {
	list-style-position: inside;
}
 
ul {
}
 
ol {
}
 
a {
	color: #000000;
}
 
a:hover {
	text-decoration: none;
}
 
 
/* Header */
 
#header {
	width: 680px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background: url(images/img01.gif) no-repeat 74px 18px;
}
 
#header h1 {
	margin: 0;
	padding: 0 196px 0 0;
	text-transform: uppercase;
	text-align: right;
	letter-spacing: 5px;
	font: normal 36px Arial, "Trebuchet MS", Helvetica, sans-serif;
	color: #000000;
}
 
#header h1 a {
	color: #000000;
}
 
#header h2 {
	margin: -5px 0 0 0;
	padding: 0 210px 13px 0;
	text-transform: lowercase;
	text-align: right;
	font: normal 18px Arial, "Trebuchet MS", Helvetica, sans-serif;
	font-style: italic;
}
 
#header a {
	text-decoration: none;
}
 
/* Page */
 
#page {
	width: 580px;
	margin: 0 auto;
	padding: 0 0 0 100px;
	background: url(images/img02.gif) repeat-y 100px 0px;
}
 
/* Content */
 
#content {
	float: left;
	width: 329px;
	padding: 35px 30px 0 25px;
}
 
#content .image {
	position: relative;
	margin: 3px 20px 0 -100px;
	float: left;
	border: 5px solid #000000;
}
 
#content .image img {
	border: 5px solid #FFFFFF;
}
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 180px;
	padding: 10px 0 0 0;
}
 
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none outside;
}
 
#sidebar li {
	margin-bottom: 10px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
	margin: 0;
	padding: 5px 0;
	background: url(images/img06.gif) repeat-x left bottom;
}
 
#sidebar h2 {
	margin-bottom: 10px;
	padding-left: 15px;
	text-transform: uppercase;
	background: url(images/img05.gif) no-repeat left center;
	border-bottom: 1px solid #000000;
	font-size: 100%;
	font-weight: bold;
}
 
#sidebar h3 {
	margin: 0;
	padding-left: 15px;
	font-size: 85%;
}
 
#sidebar p {
	margin: 0;
	line-height: normal;
}
 
#sidebar a {
	padding-left: 15px;
	background: url(images/img07.gif) no-repeat 5px 50%;
	text-decoration: none;
	color: #FFFFFF;
}
 
#sidebar a:hover {
	text-decoration: underline;
}
 
/* Footer */
 
#footer {
	width: 470px;
	height: 60px;
	margin: 0 auto;
	padding: 15px 210px 0 0;
	background: url(images/img04.gif) no-repeat 100px 0px;
}
 
#footer p {
	margin: 0;
	text-align: right;
	font-size: 77%;
	color: #FFFFFF;
}
 
#footer a {
	color: #FFFFFF;
}
 
/* Thumbnails */
 
/* ThumbnailHOST */
 
.thumbnailHOST{
position: relative;
z-index: 0;
}
 
.thumbnailHOST:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailHOST span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailHOST span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailHOST:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: 113px;
left: -175px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailDEV */
 
.thumbnailDEV{
position: relative;
z-index: 0;
}
 
.thumbnailDEV:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailDEV span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailDEV span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailDEV:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: 113px;
left: -2px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailWP */
 
.thumbnailWP{
position: relative;
z-index: 0;
}
 
.thumbnailWP:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailWP span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailWP span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailWP:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -40px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailMOO */
 
.thumbnailMOO{
position: relative;
z-index: 0;
}
 
.thumbnailMOO:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailMOO span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailMOO span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
.thumbnailMOO:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -71px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailJOO */
 
.thumbnailJOO{
position: relative;
z-index: 0;
}
 
.thumbnailJOO:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailJOO span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailJOO span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailJOO:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -102px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailPHP */
 
.thumbnailPHP{
position: relative;
z-index: 0;
}
 
.thumbnailPHP:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailPHP span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailPHP span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailPHP:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -133px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailMW */
 
.thumbnailMW{
position: relative;
z-index: 0;
}
 
.thumbnailMW:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailMW span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailMW span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailMW:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -164px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}
 
/* ThumbnailDOT */
 
.thumbnailDOT{
position: relative;
z-index: 0;
}
 
.thumbnailDOT:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnailDOT span{ /*CSS for enlarged image*/
position: absolute;
background-color: C95619;
padding: 2px;
left: -1000px;
border: 2px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnailDOT span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
 
.thumbnailDOT:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top: -195px;
left: -385px; /*position where enlarged image should offset horizontally */
 
}

~ Make hay while the sun shines ~ CHS

Tags:

CSS Layouts

Sat, 2008-08-16 15:25

wolfcry911

Offline

Guru

MA, USA

Last seen: 9 years 13 weeks ago

MA, USA

Timezone: GMT-5

Joined: 2004-09-01

Posts: 3224

Points: 237

well, for starters you may

well, for starters you may want to fix those 45 validation errors. The open span element may play a factor...

Sat, 2008-08-16 16:08

virtualburn

Offline

Regular

Last seen: 14 years 5 weeks ago

Joined: 2006-10-10

Posts: 15

Points: 0

OK. http://jigsaw.w3.org/css

OK. :thumbsup:

http://jigsaw.w3.org/css-validator/validator?uri=www.virtualburn.com&profile=css21&usermedium=all&warning=1&lang=en

There were a couple of warnings for not specifying background colours but this won't be causing IE issue will it..? I'm hoping somebody with a good understanding of CSS will be able to offer an alternative, that works in IE and still positions the images in the centre and not inline.

That one page is literally the whole site.

Thanks.

~ Make hay while the sun shines ~ CHS

Sat, 2008-08-16 16:43

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 2 years 14 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

Someone with a good

Someone with a good understanding of CSS will know that CSS rules do not apply to invalid html. Get it validating. That may not fix your particular problem but it will at least show you are serious about writing web pages that work.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Sat, 2008-08-16 17:10

virtualburn

Offline

Regular

Last seen: 14 years 5 weeks ago

Joined: 2006-10-10

Posts: 15

Points: 0

OK.

OK. :thumbsup:

http://validator.w3.org/check?uri=www.virtualburn.com&charset=(detect+automatically)&doctype=Inline&group=0

Sorry guys, I've been messing about with the HTML and CSS so much I did kind of mess things up a bit. OK, so now it's all got the green light.. can I have some advice?

~ Make hay while the sun shines ~ CHS

Sat, 2008-08-16 17:19

virtualburn

Offline

Regular

Last seen: 14 years 5 weeks ago

Joined: 2006-10-10

Posts: 15

Points: 0

Guys I owe you an apology

Guys I owe you an apology for wasting your time and a thanks for kicking my *ss into checking the validation. IT seems to be working fine in IE now..

Cheers guys. :blushing:

~ Make hay while the sun shines ~ CHS

Sat, 2008-08-16 17:46

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 2 years 14 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

If this experience teaches

If this experience teaches you to keep your html and css valid then we won't have wasted our time at all. Quite the opposite in fact!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

5 Year IE problem is there a workaround?

well, for starters you may

OK. http://jigsaw.w3.org/css

Someone with a good

OK.

Guys I owe you an apology

If this experience teaches

User login

Navigation