Does firefox not accept % when declaring the height/width of an image.

Im using this code (I know its ugly and should just make the whole line php to get rid of all those tags but Ill do that later :P)

PHP Code:

        <span class="newsImage">
        <? if ($row['image']!=""){?><img width="<?php echo $row['imgsize']; ?>" height="<?php echo $row['imgsize']; ?>" src="<?php echo $row['image']; ?>"><?php } ?>        
        </span>

Basically i set "imgsize" in the database and it is equal to "50%" or "100%" or w/e I decide. Now this works fine with IE but doesnt work with FF, although if I remove the % and just make it a fixed number then it works.

Any thoughts?

Just because IE does it doesn't make it right.

You can't specify a percentage width in CSS for an image.

I think the issue is that you only need to specify either the width or height, but not both. The other should by default use the same %. Try it without the code for height and see if that works.

I gave it a try but it didnt work. Any other ideas?

So LadynRed does that mean that I cant resize images in FF?

It can be done with Javascript or PHP. There are scripts out on the web.

Why is it that you're trying to resize the image? Are all images supposed to be a certain size on your site, if so it'd make more sense to just hardcode it in.

Here's another thought. Is the % character being stored in the database? I don't see where you're including it in the code. If you're not including the % character I would think you would have to and if you're pulling it from the database could that be what's tripping up FF.

Would this work

PHP Code:

<? if ($row['image']!=""){?><img width="<?php echo $row['imgsize'] . "%"; ?>" height="<?php echo $row['imgsize'] . "%"; ?>" src="<?php echo $row['image']; ?>"><?php } ?>

Ya I am pulling it from the DB I will have to try changing it and putting it int he code.

Arenlor the reason I am not hardcoding it is because I am using this for news articles on the front of my page and I am just taking images from the sources and placing them on the front page. If I hard coded it it would look odd because they are not all the same dimensions so I need to use percentages but I have to be able to change the percentages because they are all different sizes. Could I edit them? Sure, but why waste the time.

Thanks for the suggestions vangogh.

I wish I had the code I had used to do this the one time, but basically I had known max dimensions, then I resized according to that, in pseudo code:

if(width>max_width){get percentage needed, assign it to w}
if(height>max_height){same, assign it to h}
if(h || w is set){
if(h is set && w is set){find the smaller, assign it}
elseif(h is set){assign it}
else{assign w}
}

I did it and it worked quite nicely, I had an actual image gallery created with thumbnail previews using this code, but lost the code.

Actually, what you're doing is possible, but it comes with two caveats:

1) It can't be done with percentages; it can be done with ems, but ems are relative to the parent element, so you might not always get the default image size that you want.

2) If you allow users to resize the images, you're going to get some really nasty results in some cases. Browsers don't do a very good job of image resizing.

I've whipped up a quick demo so that you can see what I'm talking about.

Using my pseudo system you'd just be setting <img src="the.img" alt="Alternate Text" width="w" height="h">

Arenlor: what happens in your setup if the page is resized? Is it server-side code or client side?

h and w are px sizes in my setup, sorry I didn't make that clear. It gets a percentage based on what percent your chosen size is of the actual images size, for example if you wanted it to be 100x100 and the image was 1000x200 it would make it 100x20 since it'd use the smaller of the two (10% and 50%)

Thanks for the suggestions. Ya Adam Im going to stay away from em, I dont want to go down that road.

Arenlor thats a good idea I will try that and see how it works out. If it does I will post the code so you will have it for next time since you lost it