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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Stentorian
    New Member
    • Feb 2008
    • 2

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

    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?

    Code:
    .content_image {			   		 
    	max-width: 100px;
    	float: left;	
    	overflow: hidden;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	border: 1px #175592 solid;
    	width:expression(this.offsetWidth>99?100:'');
    }
    Thanks.
    Ben
    Last edited by Stentorian; Feb 29 '08, 04:07 PM. Reason: Forgot code tags :)
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    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?

    Comment

    • Stentorian
      New Member
      • Feb 2008
      • 2

      #3
      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

      Comment

      Working...