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 create text block on image using just CSS

    How to use the .css function with jQuery

    how to control the css rotation of an element inside a rotated element?

    How to make div move to bottom of page

    How to correctly add nested divs

    How to display results comming from database in 3 columns using php/mysql/html/css

    How can I get gradients working in IE9?

    how to middle vertical-align using bootstrap input-group

    How to have only a vertical scroll bar on a div

    How to Detect css by iPhone/iPad

    How can I style a select option like a table?

    How to load a new stylesheet when switching from JQuery Mobile site to PC site

    How to fit img into div circle ?

    How to prevent CSS table-cell content expanding to full height of row

    CSS: show only the last x items in a list

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to select css id's with numbers in them?

    How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

    hide/show html div with javascript

    How to use css animate correctly?

    how to use CSS positioning in 100% width layout

    How to get just numeric part of CSS property with jQuery?

    How do I specify IE 11 specific css file?

    how to order CSS elements?

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to override styles between parent - child elements using css selector?

    How to make span width to be maximum using CSS?

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    CSS How to animate a transition from opacity 0 upon hover