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 this type of image popping out of box using XHTML css

    How to read DOM in React

    How to use same css for separate media query conditions

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How to convert CSS into LESS when there are multiple classes using same properties

    How to share images between subdomains?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to improve page speed in google? [closed]

    How to center absolutely positioned elements in css for a pdf

    How do I create a side menu navigation bar that opens items to the right [closed]

    How can I make the width of my
    match the width of the inside its
    tag?

    How is this menu icon created only with CSS?

    how to convert this site to a mobile site or make it liquid?

    How to blend canvas to background with CSS?

    how to use automatic css hyphens with word-break: break-all?

    How to vertical align text in the middle without changing size of a div

    How to make an overlay using css hover on another element and pseudo class ::before

    I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    Buttons on bootstrap timepicker is not showing

    CSS: how to layout 3 columns, 2 are optional

    how to make smooth css transition

    How to use only CSS to round my div tag area's corners?

    how to make opacity of div lower than the over layered iframe

    How to display (
  • ) menu items over divs - z-index not working
  • How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How to make hashtag links work on Internet Explorer?