1. Home
  2. Forums Index
  3. Browser Side / CSS 10:50 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

sqaushed images in IE6

         

herrjosua

1:13 pm on Feb 17, 2009 (gmt 0)

10+ Year Member



Hello,

I am encountering an issue when I view my website in IE6 where my images are being squashed. I am using a CSS to create a floating image gallery on my website using the tutorial from CSS.MaxDesign. When I tested my version of the CSS, and HTML within Firefox and IE7 I get no issues, but when I try to view in IE6 my images are bing squashed. I have tried two different images sizes as well. Here is the code I am using


CSS

.thumbnail
{
float: left;
width: 180px;
margin: 0 15px 0 15px;
padding: 25px;
}

.clearboth { clear: both; }

HTML

<div class="thumbnail">

<div align="center"><a href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><br></a>

<a href="#">Deadfall</a>

</div>

</div>

<div class="thumbnail">

<div align="center"><a href="#"><img src="Images/IMenu/GermanMaglev_IMenu2.jpg" alt="" width="244" height="168"><br></a>

<a href="#">Deadfall</a>

</div>

</div>

<table>

<tr>

<td> <img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144">

</tr>

<tr>

<td><img src="Images/IMenu/GermanMaglev_IMenu2.jpg" alt="" width="244" height="168"><br></a>

</tr>

</table>

<img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144">

<img src="Images/IMenu/GermanMaglev_IMenu2.jpg" alt="" width="244" height="168"><br></a>

Thanks
Josh

pageoneresults

1:44 pm on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Could it be the width on the thumbnail? 

width: 180px;

Your images appear to be 200+ in width but the CSS is specifying 180px in width.

I'm no CSS expert but that width stood out for me.

herrjosua

2:00 pm on Feb 17, 2009 (gmt 0)

10+ Year Member



I corrected the width on the thumbnail but the image still appears to be squashed in IE6.

swa66

2:50 pm on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Guess you're seeing IE's broken box model.

Check that you're not using IE in quirks mode. (Use a full doctype, with *nothing* in front of <!DOCTYPE ... )

BTW: there are accessibility rules that ask us not to put <a>'s next to one another.

So, I'd probably start by reducing the html to
<a class="thumbnail" href="#"><img src="image.jpg" alt"description"><span>title</span></a>

Yep, not a div in sight.

With the span being optional, but handy for flexibility in what yu want to happen to the title.

Try this for inspriration: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
  <title>untitled</title>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
   }
   .thumbnail img {
    background-color: white;
    padding: 5px;
    width: 100px;
    height: 100px;
    border: solid 1px black;
    border-color: gray black black gray;
   }
   .thumbnail {
    text-decoration: none;
    float: left;
    margin: 0 15px;
   }
   .thumbnail span {
    display: block;
    text-align: center;
    text-decoration: underline;
   }
   html {
    background-color: #ccc; 
   }
  </style>
 </head>
 <body>
  <p><a class="thumbnail" href="#"><img src="2.jpg" 
    alt="test image number 2"/><span>title</span></a> 
    text goes here and let's have lots of it so it
    can sit next to the image.</p>
 </body>
</html>

Validates, works in FF3, opera, safari, IE7 and IE6, didn't test elsewhere.

herrjosua

3:45 pm on Feb 17, 2009 (gmt 0)

10+ Year Member



Ok, that seems to work now. The only major issue I have now is that there seems to be a white box around my image that I can not remove. I have a faded version of my logo that appears behind this image gallery. Also in the previous version of my website the image link and the text link were separate so the user could either click on my image link or the text link. How would I break that apart? Would I need to create another class (for lack of a better to term) like .thumbnail?

Here is my current version

CSS

padding: 10px;
width: 216px;
height: 144px;
}

.thumbnail {
text-decoration: none;
float: left;
margin: 0 15px;
}

.thumbnail span {
display: block;
text-align: center;


HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joshua Bock's Portfolio</title>
<link href="CSS/screen.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

<div id="header">

</div>

<div id="contentMain">

<h1>3d Works</h1>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

<p><a class="thumbnail" href="#"><img src="Images/IMenu/Deadfall_IMenu.jpg" alt="" width="216" height="144"><span>title</span></a></p>

</div>

<div id="footersubcontainer">

<div id="footerlogo">

</div>

<div id="footernav">

<ul id="nav">

<li>

<<img src="images/buttons/blank.gif" alt="Demo Reel">

<a href="demoreel.html"></a>

</li>

</ul>

</div>

</div>

</div>

</body>

Thanks again
Josh

swa66

4:04 pm on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The only major issue I have now is that there seems to be a white box around my image that I can not remove. I have a faded version of my logo that appears behind this image gallery.

I'm not sure how much you cut and pasted from the example I gave: but check it: it had a white background on the image and padding, to make the white background stick out. If you don't need that, just remove the background-color and the padding. (You could add more margin or still use the padding if you already like the position.)

Also in the previous version of my website the image link and the text link were separate

Oops, i presumed they were the same. Hmm, take care if I were a visitor I'd probably assume it as well ...
so the user could either click on my image link or the text link. How would I break that apart? Would I need to create another class (for lack of a better to term) like .thumbnail?

If the links point to different places I'd probably change the html to be something like
[pre][code]
<div class="thumbnail">
<a href="#1"><img src="imgage.jpg" alt="text" /></a>
<a href="#2">title</a>
</div>
But you'll obviously need to adapt the CSS accordingly and be careful to apply it to what you aim for with code like that.

herrjosua

4:38 pm on Feb 17, 2009 (gmt 0)

10+ Year Member



Oh ok. It removed the code for the border type and border color but left the code for the padding. I did not even think that the padding would cause that. I figured the padding was used for the spacing between different image links. I'll have to play around with the code a bit more to see if I can get the text, and image links to work like I want them to work.

Thanks Again

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:50 pm May 1, 2026