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 style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    How do you force a website to be in landscape mode when viewed on a mobile device?

    How can I test websites for Mobile Devices

    How to animate searchbox length from focusing on the textbox class CSS3?

    How do browsers change font-weight if it's not present in the current font?

    How to make a line before and after my h1 tag?

    How to.. the middle div of three ever on center and if the navigator are resized

    How to make a custom select option menu style without image in CSS?

    How to style image in variable? [closed]

    How to add padding and border that doesn't change width if using 960 grid system

    How to set caption for youtube videos box in css?

    How to position one element relative to a separate element in CSS

    How dynamically aligning text on website

    html css: how to draw dotted box around
    ?

    How to asynchronously load CSS using jQuery?

    How do you select a radio button in css?

    How to remove whitespace that appears after relative positioning an element with CSS

    How to override background of Bootstrap Material Design theme?

    showing element out of scroll area

    How to target last TD cell?

    How to add external css into html

    Flex: How to embed fonts with CSS

    How to control the behaviour of columns in a specific table using CSS

    How to make a floating page div responsive

    how to make background full-size [closed]

    How to find all inputs which is not inside one div with css selector?

    How do I get text to wrap to not break out of the box using CSS?

    how to do display none using css

    How to get this code to behave differently based on what exactly is clicked?

    How To Highlight Show Active Tab In A Navbar-Fixed-Top