Please help with my problem, image not scaling in IE7

@crash331Feb 24.2008

I have been working on a site for the past 3 hours and I can’t figure this out to save my life.

I am by no means a web developer, I am a photographer by trade and haven’t really used html extensively since around 2002, and I had 0 experience with CSS prior to this website.

Anyway, I am trying to use float to make some images float in a body of text. I got it to work on my first image, because it was square. However, on my second image, the picture is in landscape orientation. In Opera, the image displays fine, but in IE7, it is stretched to be a square image.

[CODE] <span style=”display:inline;width:53%;height:40%;margin-right:5px;margin-top:5px;float:right;background:#1a86f1;border:1px solid black;padding:4px”> <img src=”/images/001.jpg” style=”width:98%;height:60%”> </span> [/CODE]

This is what I used. I tried to get the image to shrink horizontally by changing the height to 60%, but it doesn’t work in IE. I am about to pull my hair our here.

And to think, this all started as a simple favor for a friend.

Oh, and here’s the site:

~~[url]~~http://www.electmattsheriff.com[/url]

to post a comment

CSS

12 Comments(s) _↴

@WebJoelFeb 24.2008 — #<[B]span[/B] style="display:inline;width:53%;height:40%;margin-right:5px;margin-top:5px;float:right;background:#1a86f1;border:1px solid black;padding:4px">

<img src="/images/001.jpg" style="width:98%;height:60%">

</[B]span[/B]> [/QUOTE] I am curious why you need to use "span" here... a "span" will only have the height of the parent element, -which as-used here, can be quite delimitiing (probably not the cause of the current complaint, but questionable anyway..) Since "span" cannot be any 'taller' than the parent, you are specifying "40%" height of the parent, and the "img" is only "60%" tall.. ??...

Is the URL hosted online, or can you show the entire code?

@crash331authorFeb 24.2008 — #So how should I handle it? Like I said I'm a novice.

@CentauriFeb 24.2008 — #As a photographer, you should be concerned with image quality, and resizing images in the browser reduces their quality significantly. Using the percentages results in the images being much smaller on smaller screens - a very unexpected occurance. I would recommend resizing the images in your image editor to a final size to be used (say 200px wide for the first one, and 250px for the second), and simplify the html :

[CODE]<span style="float:left; background:#1a86f1; border:1px solid black; padding:4px; margin:5px 10px 10px 0">
 <img src="/images/matt.jpg">
 </span> [/CODE]

and

[CODE]<span style="float:right; background:#1a86f1; border:1px solid black; padding:4px; margin:5px 0 10px 10px;">
 <img src="/images/001.jpg">
 </span> [/CODE]

If you MUST resize - use a fixed width :

[CODE]<img src="/images/matt.jpg" style="width: 200px;">
 
 <img src="/images/001.jpg" style="width: 250px;">[/CODE]

I was going to comment on the narrow width, but notice you have been editing to include links to the right. Nevertheless, I would suggest reducing the side margins on the body to maybe 15% instead of 20%.

@WebJoelFeb 24.2008 — #So how should I handle it? Like I said I'm a novice.[/quote] Which is why posting your entire code (or URL to it) can help us figure out best what you are after. ?

If you're doing [I]high-quality images[/I] as a profession ("photographer"), -[I]I'd[/I] not want the images to 'skew' or 'stretch' as this is confusing to potential clients, as the 'images' here would be your [I]content[/I], not the [I]presentational[/I] ('eye candy'). -If the image looks 'weak' or 'pixely' or 'skewed' on [I]my[/I] browser, -are your "photographs" also? ? (I am sure that they are not, -but I'd want to see confidence...).?

@CentauriFeb 24.2008 — #Which is why posting your entire code (or URL to it) can help us figure out best what you are after. ?[/QUOTE]

Hey Joel, the link to the site was posted in the first post.......:rolleyes:

@Major_PayneFeb 24.2008 — #URL was posted here and on [B]this forum[/B], too and it doesn't work on either forum.

This, http://electmattsheriff.com/, got me this:

Index of /

Apache/2.2.8 (Unix) mod_ssl/2.2.8 OpenSSL/0.9.8g DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at electmattsheriff.com Port 80

Ron

@CentauriFeb 24.2008 — #Well, it WAS working - poster was actually adding some stuff during the time I was analysing the site to form my reply...

@Major_PayneFeb 24.2008 — #? can't depend on anything nowadays.

Ron

@WebJoelFeb 24.2008 — #-Well, it WAS working - poster was actually adding some stuff during the time I was analysing the site to form my reply...[/quote]Ahh yes! -Looked like "sig" to me. ? URL seems to be down though... thought that was the case earlier as well

@crash331authorFeb 29.2008 — #Hey guys, sorry the site went down. I had to do something for a couple of days and the guy I'm making the site for didn't want it to be active yet. It's back up now:

http://www.electmattsheriff.com

I'm basically trying to solve two problems right now, the image not resizing the correct way and using the "Curvy Corners" from this website: http://www.curvycorners.net/usage.php

The reason I used a % size for the image instead of resizing in photoshop is because if the user resizes the window, the text area gets smaller but the image stays big. And the div and span code I got from curvy corners, it's the way they implement them I guess.

@crash331authorFeb 29.2008 — #Ok, the site is back up now, the guy running didn't want anyone to see it unfinished.

The reason I used the div and span like I did was for curvy corners (http://www.curvycorners.net/usage.php).

I am trying to solve two problems now. 1. the image being scaled wrong. The reason I used a % for size is because if you resize the browser window, the text area gets smaller but the picture boxes stay big. and 2. Getting that curvy corners thing to work on the links on the right hand side.

Normally I wouldn't use these things that I don't know how to do on a website, but the guy running wanted it to look like this so I am trying to accomodate. CSS is my weak point and I have never really studied it, so it's giving me a run for my money. I usually work with php and html, but it looks like I need to finally learn CSS.

@CentauriFeb 29.2008 — #Don't try setting both width and height in % - just define the width, and the picture and span should scale :

[CODE]  <span style="width:40%;margin-right:5px;margin-top:5px;float:left;background:#1a86f1;border:1px solid black;padding:4px">
 <img src="/images/matt.jpg" style="width:100%;">
 Officer of the Year
 </span>[/CODE]

The bottom picture needs left padding, not right, and then does not need the iinline display :

[CODE]    <span style="width:40%;margin-left:5px;margin-top:5px;float:right;background:#1a86f1;border:1px solid black;padding:4px">
 <img src="/images/001.jpg" style="width:100%">
 </span>[/CODE]

I still think the site looks better if the body side margins are reduced to 10% :

[CODE]body { color: black; background-color: #1a86f1; 
 background-image: url(http://www.electmattsheriff.com/images/bg.gif);
 background-repeat: repeat-x; 
 margin: 0px [COLOR="Red"]10%[/COLOR];
 }[/CODE]

Also in #CSS _↴

[RESOLVED] Why is IE6 putting this float on a new line?IE vs Firefox horizontal dropdown menu help

Success!

Help @crash331 spread the word by sharing this article on Twitter...

Tweet This

Please help with my problem, image not scaling in IE7

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Please help with my problem, image not scaling in IE7

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴