Resize All Images Inside Div To 50%

[caleb7777]

I used to use this in CSS:.productfooter{position: absolute;bottom: 0px;left: 0px;right: 0px;height: 150px;text-align: center;}.productfooter img{height:50%;}This would resize images inside this div to 50% of what they were and maintain aspect. Worked fine under transitional doctype but not under a strict doctypeIs there a better way to get the same effect that works in strict?I would like to use the strict doctype because the absollute positioning then works in explorer, however then I have this problem instead. Why can't everything work as good as firefox?Here you can see the difference between strict and transitional in my case:http://infinityosd.com/cgi-bin/store/commerce.cgi?template=1http://infinityosd.com/cgi-bin/store/commerce.cgi?template=2Thanks,Caleb

[Ingolme]

img-align and img-height aren't CSS rules, where did you find those?

[caleb7777]

I made those up. But now you can't see them

[thescientist]

you can always use width and height in a CSS class to change the size of your images. However, since images are inline elements by default, you would have to change their display attributes.

[Synook]

Images are actually inline-block, so you can modify their width and height through CSS.

[thescientist]

good to know. Whats the benefit of something being inline-block as opposed to just making an inline element block, or vice-versa?

[Ingolme]

good to know. Whats the benefit of something being inline-block as opposed to just making an inline element block, or vice-versa?

An inline-block is inline: You can put text on the left and right of it. Block elements force everything to go to the next line.

[ShadowMage]

An inline-block is inline: You can put text on the left and right of it. Block elements force everything to go to the next line.

Maybe it's something I'm doing wrong but in IE inline-block elements always seem to behave just like a block element would.

[Ingolme]

Maybe it's something I'm doing wrong but in IE inline-block elements always seem to behave just like a block element would.

Internet Explorer has a bug. An element will only behave as an inline block if it was originally an inline element. That means that you can use a <span> but not a <div> to make an inline-block. Which version of Internet Explorer are you using?Also, be sure to have your page running in standards compliant mode.

[ShadowMage]

Internet Explorer has a bug. An element will only behave as an inline block if it was originally an inline element. That means that you can use a <span> but not a <div> to make an inline-block. Which version of Internet Explorer are you using?Also, be sure to have your page running in standards compliant mode.

I use IE8 and the last page I was working on was 100% validated strict DTD (at least according to the HTML Validator add-on for firefox)

[thescientist]

An inline-block is inline: You can put text on the left and right of it. Block elements force everything to go to the next line.

but what does setting something to be inline-block do that's different then setting them to one or the other? Or are you saying inline-block just renders to be the same as display: inline?so you have an image, but you want it to behave more like a block, so you could set it to display: block. What is a case for setting something to inline-block? Does it trade-off certain features of each display type?

[ShadowMage]

but what does setting something to be inline-block do that's different then setting them to one or the other? Or are you saying inline-block just renders to be the same as display: inline?so you have an image, but you want it to behave more like a block, so you could set it to display: block. What is a case for setting something to inline-block? Does it trade-off certain features of each display type?

From my experiences, with an inline element you can't set a width or height. With an inline-block you can but it still renders as an inline element. Somewhat like a text box where you can change it's size but it stays inline with the rest of the elements.

[Ingolme]

but what does setting something to be inline-block do that's different then setting them to one or the other? Or are you saying inline-block just renders to be the same as display: inline?so you have an image, but you want it to behave more like a block, so you could set it to display: block. What is a case for setting something to inline-block? Does it trade-off certain features of each display type?

An image is already an inline-block by default so you don't need to do anything with it. It has a width and height, and it can have padding and margin.Inline elements can't have width or height and their padding is limited, I don't think they support margin either.

[thescientist]

gotcha, thanks for clarifying the distinctions guys.

[caleb7777]

Wow....That was wonderfully off-topic, well not really i guess.But anyway, I got a workaround for the problem and am not sure why. Here's the dealio for veryone:Here are my findings:This is the CSS in question, it did not work in many places.productfooter img{height:50%;}test pages:----------------------------------1) http://www.infinityosd.com/test/IOSD2.htm <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Page layout is fine in firefox and IE8standards but both will not do the resize. IE7 standards is perfect. Quirks mode does the resize but the absolute positioning is thrown out the window. Something very interesting I found was that settings in other css styles other than the default were overriding the default stylesheet in quirks! The media:print stylesheet would do this.-----------------------------------2) http://www.infinityosd.com/test/IOSD3.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Here is the quirks mode default. The CSS resizing works great and layout is good in firefox but the text size is taken from a different css stylesheet then the chosen default! Easily fixable yes but wtf. In IE8 standards the resize is no good and all tables break. In IE7 Standards all is good. in quirks mode IE uses the wrong text size, does the resize, but absolute positioning is gone.------------------------------------3) http://www.infinityosd.com/test/IOSD4.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Here is the strict doctype. In firefox the resize does not work and the tables all break. In IE8 standards tables break and no resize. In IE7 standards all is good. In quirks the text is wrong and positioning is buggered again.--------------------------------------4) http://www.infinityosd.com/test/IOSD5.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >This works best in explorer hands down. Just tell the browser to use IE7 standards using this meta tag. Now that is all fine and dandy but leaves me up the river with firefox and I haven't even tried others yet.----------------------------------------5) http://www.infinityosd.com/test/IOSD7.htm <!DOCTYPE html>Here is HTML 5, in IE8 the resize fails and tables are shot. Emulate IE7 and it is fine again.----------------------------------------6) http://www.infinityosd.com/test/IOSD8.htm <!DOCTYPE html>IE7 emulated.------------------------------------------I will leave these pages up so everyone can play with them and see the funny little differences. Feel free to save the pages as examples or whatever.Anyone have any suggestions on what is best to do? I was under the influence that I should do everything in strict going forward but strict screws things up for some browsers. Can I specify a different doctype to specific browsers? quirks for firefox and strict IE7 for explorer?Any ideas is appreciated.

[caleb7777]

here was a nice read for my table problems in strict:https://developer.mozilla.org/en/Images%2c_...Mysterious_Gapsbottom line: I am screwed for now I guess.

[caleb7777]

My real question then is can I go to the new standards, html5 ie8 strict, and still have the resize and tables work?I heard that there is a CSS3 request for a table fix but why does the resize not work?

[caleb7777]

In the standards you cannot resize by %, resizing by px works fine. This is fine for me since I wanted a set height on all anyway..productfooter img{height:100px;}the above will work