IE6 Images display - stretched and blurry - disappears on refresh

[braves07]

Hi. I have an issue in Internet Explorer 6 with my images. It displays correctly in IE7, Firefox, Netscape & Opera. The problem is sometimes the image appears very squashed and blurry. If you click refresh it usually displays correctly, and it doesn't happen everytime. It's really wierd and I have no clue what is going on. A link to the problem is here:

http://www.extrememonstertrucknational.com

This is happening on my <h2><img> and on my <img> on the schedule/info pages. Any help would be appreciated.

/* CSS Document */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color:#000000;
margin: 0px;
padding: 0px;
}

#container {
width: 780px;
height: auto;
margin: 0px auto;
background-image: url(images/images/diamond_bg.jpg);
background-repeat: repeat;
color: #000000;
overflow: hidden;
}

img { behavior: url(iepngfix.htc); } 

#header {
width: 746px;
height: 200px;
margin: 0px 17px 0px 17px;
}

#header h1 {
float: left;
margin: 0px 0px 0px 20px;
padding: 0px;
}

.bursting {
float: right;
margin: 0px 20px 0px 0px;
}

#main {
width: 780px;
height: auto;
}

#content {
width: 746px;
height: auto;
float: left;
margin: 0px 17px 17px 17px;
background-color: #FFFFFF;
position: relative;
display: inline;
}


ul {
margin: 0px;
padding: 5px 0px 0px;
}

#navigation {
width: 746px;
height: 40px;
float: left;
background-image: url(images/images/nav_bg.jpg);
background-repeat: no-repeat;
margin: 0px;
text-align: center;
}

#navigation li {
display: inline;
font-size: 20px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
}

#navigation a {
color: #FFFFFF;
text-decoration: none;
}

#navigation a:hover {
color: #000000;
}

.leftcolumn {
width: 542px;
height: auto;
margin: 0px 0px 0px 0px;
float: left;
display: inline;
}

.leftcolumn img {
width: 281px;
height: 208;
margin: 0px 0px 0px 5px;
float: left;
}

.dualleft {
width: 271px;
float: left;
margin: 10px 0px 20px 0px;
clear: left;
}

.dualright {
width: 271px;
float: left;
margin: 10px 0px 20px 0px;
}

.leftcolumn ul {
margin: 0px;
padding: 0px 0px 0px 40px;
clear: both;
}

.leftcolumn li {
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}

.leftcolumn h2 img {
height: auto;
width: auto;
margin: 5px 0px 10px 5px;
clear: both;
}

.interview {
width: 256px;
height: 208px;
background-color: #000000;
float: left;
margin: 0px;
}

.text {
width: 537px;
height: auto;
clear:  both;
margin:5px 0px 0px 5px;
}

.text a {
color: #f34020;
}

.rightcolumn {
width: 194px;
height: auto;
float: left;
margin: 0px 0px 0px 10px;
padding: 0 0 220px 0;
overflow: hidden;
}

.smallmonster {
width: auto;
height: 108px;
margin: 20px 0px 10px 0px;
clear: both;
}

.smallmonster img {
width: auto;
height: 108px;
margin: 5px 25px 5px 5px;
}

h3 {
width: 180px;
height: 26px;
line-height: 26px;
background-color: #000000;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 18px;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
}

.events {
width: 180px;
height: auto;
background-color: #f34020;
}

.performers {
width: 180px;
height: auto;
background-color: #f34020;
}

.rightcolumn dl {
margin: 0px 0px 20px;
padding: 1px 0px 0px 0px;
}

.rightcolumn dt {
margin: 1em 0 0 0;
padding: 0px 0px 0px 5px;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
}

.rightcolumn dd {
margin: 0px 0px 0px;
padding: 0px 0px 0px 5px;
font-size: 10px;
color: #FFFFFF;
}

.rightcolumn ul {
margin: 0px 0px 10px;
padding: 1px 0px 0px 0px;
}

.rightcolumn a {
color: #FFFFFF;
text-decoration: none;
}

.rightcolumn li {
margin: .5em 0px 0px 0px;
padding: 0px;
text-decoration: none;
list-style-image: none;
list-style: none;
text-align: center;
color: #FFFFFF;
font-size: 18px;
font-family: Boulder, Arial, Helvetica, sans-serif;
}

.events dt.more {
height: 18px;
font-size: 12px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
}

.performers li.more {
height: 18px;
font-size: 12px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
}

.more a {
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 5px 0px 0px;
}

.more a:hover {
color: #f34020;
}

#footer {
width: 746px;
height: 36px;
background-image: url(images/images/footer_bg.jpg);
clear: both;
margin: 0px;
}

#footer p {
color: #FFFFFF;
font-size: 18px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}

#footer a {
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover {
color: #000000;
}

.bottom { 
position: absolute; bottom: 36px; right: 7px;
}

.schedule {
clear: both;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 522px;
}

.schedule a {
color: #f34020;
text-decoration: none;
}

.schedule a:hover {
color: #009900;
}

.black {
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
}

.date {
width: 174px;
margin: 10px 0px 40px 0px;
float: left;
}


.location {
width: 174px;
margin: 10px 0px 40px 0px;
float: left;
}

.info {
width: 174px;
margin: 10px 0px 40px 0px;
float: left;
text-align: center;
}

.schedule li {
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

.address {
text-align: center;
font-size: 16px;
font-weight: bold;
clear: both;
}

p.address {
margin: 3px 0px 10px 0px;
padding: 0px;
}

.center {
text-align: center;
}

#contactform {
margin: 20px 20px 20px 55px;
background-color: #f34020;
width: 450px;
color: #FFFFFF;
font-weight: bold;
border: #000000 1px solid;
}

.mediumtext {
font-size: 14px;
}

.perftrucks {
width: 542px;
height: auto;;
margin: 0px;
clear: both;
}

.ticket {
color: #FFFF00;
font-size: 20px;
line-height: 28px;
clear: both;
font-weight: bold;
background-color: #000000;
text-align: center;
margin-left: 10px;
}

.ticket a {
color: #FFFFFF;
}

.vipbox {
background-color: #FFFF00;
border: #000000 1px solid;
margin-left: 10px;
}

.vipbox ul {
text-align: center;
margin: 0px;
padding: 0px;
list-style: none;
}

.vipbox li {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.viptext {
color: #FF0000;
font-weight:bold;
font-size: 20px;
text-align: center;
margin: 0px 0px 10px 0px;
padding: 0px;
}

.includes {
text-align: center;
text-decoration: underline;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px;
}

.disclaimer {
text-align: center;
font-size: 10px;
margin: 0px;
padding: 0px;
}

.adulttick {
background-color: #FFFF00;
border: #000000 1px solid;
color: #FF0000;
font-weight: bold;
text-align: center;
margin-left: 10px;
}

.gate {
background-color: #FF0000;
margin-left: 10px;
color: #FFFFFF;
text-align: center;
}

.links {
color: #000000;
}

.links li {
margin: 10px 0px;
}

.links a {
color: #000000;
text-decoration: none;
}

.links a:hover {
color: #f34020;
}

img.flyer {
width: auto;
height: auto;
margin: 10px 0px 20px 121px;
display: block;
}

h2 {
margin: 5px 0px 0px 10px;

}

h4 {
margin: 0px 0px 5px 10px;
}

.radio {
color: #FFFF00;
font-size: 14px;
line-height: 20px;
clear: both;
font-weight: bold;
background-color: #000000;
text-align: center;
margin-left: 10px;
}

.radio a {
color: #FFFFFF;
}

.back {
text-align: right;
font-size: 14px;
clear: both;
}

.back a {
color: #f34020;
text-decoration: underline;
}

.back a:hover {
color:#000000;
}

.thumbnail {
width: 200px;
height: 109px;
margin: 10px;
}

.thumbnail img {
width: 200px;
height: 109px;
border: #000000 1px solid;
}

 

[BillyRayPreachersSon]

Have you tried clearing your browser cache? The cache could be holding old images with old dimensions...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[braves07]

I'm experiencing it on multiple computers, but yes I have tried doing that. It is really strange, if it displayed like that everytime I would understand, but when sometimes it does it and sometimes it doesn't it makes no sense (at least to me.) Really not sure. Thanks for the reply.

nofx1728

 

[BillyRayPreachersSon]

Can you confirm which image "the image" is, as there are many images.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oops - scrap that. I've just seen it

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

It looks like your ".leftcolumn img" rule is setting all image widths to be "281px" for a brief moment... possibly this is causing the issue. Try removing that rule - it is very generic, and so will affect all images in the left column.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[braves07]

Hi, thanks for the reply. Unfortunately when I remove the set widths and heights on that div the same result is happening. Very strange event occuring.

Thanks,

nofx1728

 

[BillyRayPreachersSon]

when I remove the set widths and heights on that div

Div? What Div? I'm talking about an image. You're styling up all images INSIDE that div. Re-read my post above...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[braves07]

Sorry, I just typed that in incorrectly. I meant to say when I removed the width and height from the .leftcolumn img class the error was still occuring.

Thanks,

braves07