table image in cell shown smaller [closed]


Tags: html,css,table,joomla,joomla2.5

Problem :

I'm having trouble. I upgraded a Joomla 1.5 to 2.5.7. Imported all the content as well. Some articles are built using HTML TABLE tag, rows, and 2 columns. Text in first column, image with correct HEIGHT/WIDTH attribute is in the second column.

See this page:

http://stageseminars.com/index.php/2012-10-24-18-26-22/how-to-tech/paperwork/108-lighting-board-notes

In FireFox, it's rendered beautifully, in Chrome, IE9, and Safari, the image is resized smaller, leaving too much space for the text that could be wrapped up more.

In the J15 version of the site, it was fine.

I tried playing with the CSS a bit last night, the best I could do to get the full size of image had the image showing offset way out of the table, and event the main-content container, played with min-width/max-width, percentage, even forced the px (I don't like it because maybe in the future the client would use different image size)

There's multiple articles like, I know this could be converted tableless somehow, style templating. But there's a better and faster way, I would appreciate it!

Please advise! If you need any more information, let me know as well.



Solution :

Besides the css modifications dicussed in the comments, there is a function in http://stageseminars.com/templates/rt_kirigami/js/modules-height.js that sets some styles for your images on IE9 and IE10.

        'load': function(){
        if (Browser.ie9 || Browser.ie10){
            document.getElements('img').each(function(img){
                img.setStyle('max-width', img.getStyle('width').toInt() || img.offsetWidth);
                img.setStyle('width', '100%');
            });
        }

You can comment it, I already tested it on IE9 (removing that function) and it works !


    CSS Howto..

    how to keep my slider horizontally centered?

    How to make Bootstrap sticky footer content go full page height?

    How to Create 3 Column Layout with CSS Only?

    How to debug Font-Awesome icons?

    How to make sure that different severity Toasters are shown differently?

    How to define dynamic height in css (or html)?

    How to do a 'soft' release of features/refactoring in CSS?

    How do I use this CSS animation in my HTML file?

    How to get WordPress Twenty Ten theme sub-menus to expand to their contents (CSS)?

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How can I add a footer to my website similar to the header?

    How can I split a text in 2 color vertically?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How do I center a div along the y axis?

    How to position an image sprite at the bottom of an element of unknown height

    How to position a SWIPER SLIDE in the centre of the page? [closed]

    How to add style to the parent when radio button is selected

    how to write set of styles as a function in compass sass

    How to translate this Silverlight control into HTML/CSS/JS

    How to make the header part of the site as low as the logo?

    How can I make my CSS code compatible with all browsers? [closed]

    Can't show updated image

    How to vertical-align text on this input box for IE

    How do I get my link background to go beneath it during hover?

    How to enable Stylus url() rewrites

    How to make all images look same

    HTML/CSS: How to move my navigation bar to the middle?

    How can I make inputs display inline?

    How can I change my div box to a link?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?