Internet Explorer 8 places an extra white border around images

[olivier255]

The title says it all, when viewing my web page on Internet Explorer 8, an extra white border is added around the images who already have a grey border (which is wanted, but not the white one).

This is the page I'm talking about: http://oliviergougeon.com/photographs/allphotos

The css file can be found at this adress:

http://oliviergougeon.com/design.css

This is the html used:

	<div id="photoblock_ab">
 
 
 
		<div id="photoblock_a">
 
			
			
				<div class="image">
						<a href="/photographs/allphotos/europe">
									<img src="/images/europe.jpg" alt="Europe 2011" title="Europe 2011" />
						
										<div class="text">
										<span>Europe</span>
										</div>
						</a>				
				</div>
				
				<div class="image">
						<a href="/photographs/allphotos/downtown">
									<img alt="Downtown Mtl" src="/images/downtown.jpg" />
						
										<div class="text">
										<span>Downtown Montreal</span>
										</div>
						</a>				
				</div>
				
				
					<div class="image">
						<a href="/photographs/allphotos/warmnight">
									<img alt="Warm Night" src="/images/warm.jpg" />
						
										<div class="text">
										<span>Warm Night</span>
										</div>
						</a>				
				</div>
 
				
				<div class="image">
						<a href="/photographs/allphotos/pointedumoulin">
									<img alt="Warm Night" src="/images/pointedumoulin.jpg" />
						
										<div class="text">
										<span>Pointe-du-Moulin</span>
										</div>
						</a>				
				</div>
				
		</div>
 
 
		<div id="photoblock_b">
		
					<div class="image">
						<a href="/photographs/allphotos/nyc">
									<img alt="New York City" src="/images/nyc.jpg" />
						
										<div class="text">
										<span>New York City</span>
										</div>
						</a>				
				</div>
				
				<div class="image">
						<a href="/photographs/allphotos/skisession">
									<img alt="Ski Session" src="/images/skisession.jpg" />
						
										<div class="text">
										<span>Ski Session</span>
										</div>
						</a>				
				</div>
				
				<div class="image">
						<a href="/photographs/allphotos/photoshootrenee">
									<img alt="Ski Session" src="/images/photoshootrenee.jpg" />
						
										<div class="text">
										<span>Photoshoot of Renée</span>
										</div>
						</a>				
				</div>
		</div>
 
 
	</div>

However, everything works out fine on this page:

http://oliviergougeon.com/photographs/nature

With this html coding:

	<div id="posts_images">
 
		<img src="/images/all_photos/europe/europe87.jpg" alt="Europe" title="Europe" />
		<br><br>
		<img src="/images/all_photos/europe/europe74.jpg" alt="Europe" title="Europe" />
		<br><br>
		<img src="/images/all_photos/europe/europe66.jpg" alt="Europe" title="Europe" />
		<br><br>
		<img src="/images/all_photos/europe/europe36.jpg" alt="Europe" title="Europe" />
		<br><br>
		<img src="/images/all_photos/europe/europe12.jpg" alt="Europe" title="Europe" />
		<br><br>
		<img src="/images/all_photos/nyc/nyc36.jpg" alt="NYC" title="NYC" />
		<br><br>
		<img src="/images/nature/nature1.jpg" alt="Christmas Tree" title="Christmas Tree" />
		<br><br>
 
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://www.oliviergougeon.com/nature.php" num_posts="5" width="720"></fb:comments>
 
		</div>
		
</div>

I have found MANY thread about this problem, but I've tried every single solution I found without success.

I've tried putting the "padding: 0; margin: 0" on the img tag, but without success.

If anyone knows how to take care of this problem, it would be much appreciated.

Thank you in advance to everyone for taking your time to read this thread and see if you could be some help for me.

Olivier,
Amateur Photographer

[teedoff]

Have you tried border: none; on the img tag?

BTW it looks the same in FF too. Thats the (normally blue) border images have when they are linked to another page. You changed its color to #FFFFFF in your style rule:

image a {color: #FFFFFF;}

So again,

img {border: none;}

will remove those link borders from all images.

Another tip....sheesh what's with the ascii art in your stylesheet? makes it very hard to read and find specific rules when ppl are trying to help. JMO

[olivier255]

Thank you so much!

I actually did try putting this code line somewhere in the many divs... but I never tried on the img tag XD.

I really feel stupid now...

It fixed my problem right away when I added this line in the css:

.image img
{
border: none;
}


Once again, thank you.
And big thanks for your QUICK reply!

Have a nice day.
Honestly, I'm really starting to believe in forums! It was only my second time using them...

P.S. About the ascii art in my css stylesheet, well it's because I like it, and it makes it unique! eheh...

[teedoff]

You do realize though that adding that border:none; to that specific style rule will only work for images that are child elements of the div with class="image". To target ALL images and remove that unsightly blue border, you should JUST target the img tag.