By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,394 Members | 1,912 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,394 IT Pros & Developers. It's quick & easy.

CSS, Max-Width and skinny images in Safari (on Mac)

Stentorian
P: 2
Hello,

I am having trouble with skinny images in Safari on a Mac (This works fine in Safari beta for windows!)

Basically I have set up a CSS class using 'max-width' to ensure that images do not expand beyond 100px. I have included the hack for IE. Works fine on a PC in IE, Firefox, Opera and Safari. But in Safari on a Mac the width is confined, but the image does not scale, the height remains the actually height of the image and so I get skinny images and crap layout.

I need to use the max width, as users will be uploading any old photos (you know what users are like) and I need to keep it within the design. I also cannot use max height, as some photos are landscape and others portrait.

I search for a hack but couldn't find any...any ideas?

Expand|Select|Wrap|Line Numbers
  1. .content_image {                        
  2.     max-width: 100px;
  3.     float: left;    
  4.     overflow: hidden;
  5.     margin-right: 10px;
  6.     margin-bottom: 10px;
  7.     border: 1px #175592 solid;
  8.     width:expression(this.offsetWidth>99?100:'');
  9. }
  10.  
Thanks.
Ben
Feb 29 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I really need to get a Mac.

max-width, et al, works on Safari. Perhaps you can do:
.content_image img{ max-width:100px} and see what happens?
Feb 29 '08 #2

Stentorian
P: 2
Thanks Dr.

Yes I know what you mean. Having a mac would be useful, but can't really bring myself to spend 1000 just for testing one browser!

I will try the 'img' definition and see what happens...

Cheers.
Ben
Mar 1 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.