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 make an element slide with the viewport as it scrolls?

    How to Fix Collapsing Top and Bottom Margins?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style

    How To Vertically Align Text On A Squarespace Button?

    How to exclude css files from auto formatting in IntelliJ

    How to not apply a css block?

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How can I make my div to remain fixed and no longer change position?

    CSS positioning: how to make it relative to one element but not the other?

    How to get span to be only as wide as the image inside of it?

    How to create a relative inline style?

    How do I center align the items in my menu?

    How to hide repeated content from search engines with CSS?

    How can I add CSS animation to an element on a web page? [closed]

    How to check if an element matches the :empty pseudo-class in pure JS?

    How do I force/enable vertical scrolling in this html5/css3 page?

    How to scroll LI items in a fixed height UL?

    How to save(download) HTML page with all images, css etc in Android?

    how can I center button below my text while using bootstrap css?

    How to add event handlers to DIVS with CSS classes containing a particular string?

    How to position
    element absolute from browser window?

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    Show the menu at the center of the data toggle

    How do you make something in the center of the page in CSS? [duplicate]

    How to remove blue highlight when you hold on input buttons in css? [closed]

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

    CSS - How to get star aligned properly on this page

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to put images behind each other in css