Opera stretching my img 4000+ pixels

[angelwatt]

Got an odd problem with Opera (on Mac, didn't check on Windows) displaying an img link that I haven't run into before. It looks fine in Firefox, Safari, and even IE7 amazingly. The image is stretched horizontally making it some 4000+px wide. Anyone have any ideas one what is causing this? Links to page and picture below.

[obsolete link removed]

 

[jng]

[obsolete link]

I get a 403 error when trying to view the image.

 

[angelwatt]

I get a 403 error when trying to view the image.

Alright, guess that's kind of my bad. My web server doesn't like the REFERRER coming from another server than my own when directly accessing image files. I set this up because people were hot linking some of my images. If you copy the link I have above it will work. Sorry I didn't realize this before.

 

[jng]

I don't even see that image in the safari version. Perhaps you should do a full screenshot (I don't have opera).

 

[angelwatt]

Code snippets

For added help in discovering the problem here is some of the HTML,

<div class="artwork">
<ul>
  <li>
    <p><a href="art/abstract_03.jpg"> <img
    src="thumbs/abstract_03_t.jpg" alt="Abstract painting" /></a>
    <ul>
      <li class="title"> Galloping Forest</li>
      <li class="style"> Acrylics.</li>
      <li class="desc"> Based on an unknown artist that a
      friend asked me to do.</li>

    </ul></p>
  </li>
...

And here is some of its CSS,

div.artwork {
 background-color: #ffb;
}
div.artwork a img {
 position: relative;
 margin: 0 .4em 0 0; padding: 0;
 float: left;
 width: 20%; min-width: 80px; max-width: 90px;
 height: 20%; min-height: 50px; max-height: 100px;
 border: 3px ridge #990;
 z-index: 1;
}
div.artwork a:hover img {
 border: 3px solid #a02;
}
div.artwork li {
 position: relative; float: left;
 margin: .2em; padding: .3em;
 width: 98%; min-width: 210px;
 background-color: #fff;
 list-style-type: none;
 border: 1px solid;
}
div.artwork li li {
 display: block; float: none;
 margin: 0; padding: 0;
 width: auto; min-width: 110px;
 border: none;
}

 

[jng]

Why do you have all that convoluted CSS?

The problem may lie here:

<a href="art/abstract_03.jpg"> <img
    src="thumbs/abstract_03_t.jpg" alt="Abstract painting" /></a>

you should specify a height and width. Maybe then opera will read is properly.

 

[angelwatt]

Why do you have all that convoluted CSS?

The problem may lie here:

<a href="art/abstract_03.jpg"> <img
    src="thumbs/abstract_03_t.jpg" alt="Abstract painting" /></a>

you should specify a height and width. Maybe then opera will read is properly.

I want to use CSS to control height and width that's why they're left out. The thumbnail images come in varying sizes and don't want to change the thumbnails every time I change the site design.

There may be some extra CSS in there since I just changed this part of my design, but most of it is necessary for what I'm doing. My old way worked fine in Opera and it was more complicated. May just have to given to my stubbornness to fix this issue, though I don't get a lot of Opera traffic.

 

[jng]

Meh, I still think it's somewhat convoluted.

It's a PHP page, did you hand code it? You can fetch the height and width of the thumbnail using PHP. That's what I do (or standardize all my thumbnails).

I try to avoid scaling via CSS because it tends to look choppy on the PC. Looks gorgeous on the Mac though.

 

[angelwatt]

Solution discovered

Meh, I still think it's somewhat convoluted.

It's a PHP page, did you hand code it? You can fetch the height and width of the thumbnail using PHP. That's what I do (or standardize all my thumbnails).

I try to avoid scaling via CSS because it tends to look choppy on the PC. Looks gorgeous on the Mac though.

Though I don't completely understand why it works, it now works. I removed a CSS reference for my "div.artwork a img" that had width:20%. Apparently Opera 9 doesn't like that (Opera 8.5 worked mostly). I have min-width and max-width also set, which alone does what I need I guess. IE6 isn't so happy, but too bad for that browser. Most of my visitors use Macs

Thanks jng for giving ideas. I do hand code all my pages. I'll have to think about that php idea for fetching sizes.