It seems that some of the images on Clagnut are being rendered as skinny strips in Safari 1.2. (Thanks to Andy for pointing this out.) Here’s an example:
It looks fine in all my modern Windows browsers but in Safari 1.2, the image is squashed to about 20px wide. I don’t have access to earlier versions of Safari so I’m not sure if this issue has crept in just recently, but no one has complained up until now. Can anyone elucidate?
The difference between this image and others on the page (such as the random photo at the top) is that this one is contained within a floated paragraph. Neither the paragraph nor the image have widths set. Here’s all the CSS affecting the image, complete with drop shadow effect:
.imgholder {
margin:1em 1em 0 0 !important;
text-indent:0;
position:relative;
left:5px;
top:-5px;
background: url(/images/drop.png) bottom right;
float:left;
line-height:0;
}
.imgholder IMG {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
max-width:100%;
}Now, I know that widths are supposed to be set when floating elements but the style sheet validates with no errors or warnings and it works in all the other browsers. And why render the image 20px wide? Why not 100% wide thereby ignoring the float?
Update: Philippe has confirmed my suspicions that max-width:100% applied to the image is the problem. The max-width property was there to automatically shrink the image if it was too big for the column. I’ll investigate other ways of doing this but in the meantime I’ve removed the max-width and everything now looks fine. Thanks for all your contributions.
Jon Hicks wrote:
I’m using the Omniweb 5 beta 2 at the moment which uses the older version of Safari’s webcore – and it shows the image fine. This must be a recent problem thats crept in.
Shot wrote:
Have you tried adding “width: auto” to the .imgholder?
I believe that the current (CSS 2) spec says floated elements must have explicit width, but the CSS 2.1 spec (in the works) changes this, and says that floated elements with auto width should be shrink-wrapped.
Rich wrote:
Good suggestion Shot. I’ve now added width:auto so at least things are a bit more correct wrt CSS 2.1. However it didn’t fix the problem.
Thinking about it, this is not surprising as the
imgholderparagraph was being shrunk-to-fit as expected. It is the image that is going wrong.I doubled check Mozilla’s DOM Inspector and nowhere is a width being given to the image. I do set
max-width:100%but I don’t see why that would effect things.Robin wrote:
In case you didn’t already know, a page refresh gets Safari to display the image correctly. So it does display it correctly, after it’s had the chance to process the page a second time.
I think your guess about width settings is probably spot on. Hope Dave Hyatt is reading… ;-)
Rich wrote:
Robin – I didn’t realise the problem fixed itself with a refresh; thanks for pointing it out.
Dave Hyatt blogs that there are some Regressions from Safari 1.1 some of which affect rendering (but mostly scripted CSS changes). I’ve added a trackback to his post, so hopefully Dave will notice this and be able to decide for himself whether it’s a Safari 1.2 bug or my shoddy CSS.
Travholt wrote:
Just noticed something weird: If you increase and decrease the text size, the picture’s width grows a little each time – regardless of whether you zoom in or out – until it’s the right size.
Philippe wrote:
Firebird displays the image as a 20px by 20px square. And it is not wrong at all. What is killing it in Safari 1.2 and Gecko browsers is the max-width declared on the image. IE Win and Mac do not understand that, ignore it, and use the intrinsic width of the object. Because the parent div has no width specified, and is floated, it collapses completely in Firebird (applying a max width of 100% from 20px or so to the image).Try setting a width on the floated block (100%). The image should show up again.
soxiam wrote:
I thought you might find this useful. It’s a website offering free service to screen capture any URL in mac/safari.
http://www.danvine.com/icapture/
Mo wrote:
Hey,
I was trying to get the same drop shadows
you got on my site. But I don’t have the shadow.png. I also tried to use the <p>http://www.1976design.com/blog/archive/2003/11/14/49/” </p> but I have a blue background so that didn’t quite work. I was hoping if you an let me know how to get the drop.png and get the image shadow working. thanks in advance.
David Hyatt wrote:
The Safari (and Mozilla) rendering (in 1.2) is correct, and this is not a bug, although I’m unsure why the problem would fix itself when reloading.
The only reason 1.1 and 1.0 don’t exhibit the “bug” is because those versions don’t support max-width on replaced elements (i.e., images).
Since 1.2 does (and Mozilla does), that’s why the problem showed up in those browsers.
Pythagore Anonymous wrote:
Well, it is looking fine in Safari to me. But not in I.E. 5.2. I tried to fool around with the code a bit too see if I could fix the problem, but didn’t come up with anything good.
What happens is that the shadow goes beyond the image – about 3 pixels from the bottom.
Pythagore Anonymous wrote:
In case you wanted dumps:
This is from my own test:
http://www.pestsmitta.se/dumps/ie1.jpg
This is from your page:
http://www.pestsmitta.se/dumps/ie2.jpg
Both in IE 5.2 for the Mac (OS X Panther).
alex_tea wrote:
I use a clearing div hack to get floats to expand to the full width of their content, this may or may not help.
div.clearer {clear: left;
line-height: 0;
height: 0;
}
If you insert an empty div (with a non-breaking space inside, so it’s not really empty) inside your floated p tag it should work.
Something else rather strange, on first viewing of this article the image was fine, it was only when I went to read the comments that the image got squished.
alex_tea wrote:
I use a clearing div hack to get floats to expand to the full width of their content, this may or may not help.
div.clearer {clear: left;
line-height: 0;
height: 0;
}
If you insert an empty div (with a non-breaking space inside, so it’s not really empty) inside your floated p tag it should work, like so:
<p class='imgholder'><img src="/images/mypic.jpg" alt="a floated image" style="max-width:100%" /><div class="clearer"> </div></p>Something else rather strange, on first viewing of this article, in the archive listing, the image was fine. It was only once I went to read the comments in the individual article view that the image got squished.