Skip navigation
MBR Web Design
MBR Web Design Calculating status...
Currently Being Moderated

Fluid Grid Layout - IE Issue with Image Size

May 22, 2012 2:55 PM

Tags: #issue #internet #dreamweaver #images #explorer #layout #cs6 #grid #fluid

Hi,

I've been working on a new website using the CS6 Fluid Grid Layout. My site is working correctly in Chrome and Firefox but in Internet Explorer 9 and 10, and most likely all other versions, the images that resize normall in Chrome and Firefox stay at maximum size in Internet Explorer. Please could somebody take a look at my site and see where I have gone wrong in the code as I can't find the problem anywhere.

 

www.moleseyhire.com/index2.html

 

 

Kind regards,

Mitchell Ransom

1055 Views   8 Replies   Latest reply: MBR Web Design, May 23, 2012 7:26 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    May 22, 2012 3:41 PM   in reply to MBR Web Design
    Report

    Before tackling layout & x-browser issues, always validate code and fix errors. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.moleseyhi re.com%2Findex2.html

     

    HTML5 doesn't allow borders, table cell widths, etc.. in your HTML code.   Better to put those styles in your CSS.

     

    CSS background gradients are not supported in pre-IE10 browsers.  You'll need to add MS proprietary filters for IE.

    http://www.colorzilla.com/gradient-editor/

     

    The 4 images across (33% Off - 10% Off) don't resize for me in any browser.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • MBR Web Design
    Currently Being Moderated
    2. MBR Web Design,
    May 22, 2012 5:45 PM   in reply to Nancy O.
    Report

    Hi again,

    I have fixed those errors as requested. You can find the results here:

    <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.moleseyhire.com%2Fi ndex2.html;verbose=1>

     

    As for the gradients I am already aware of this and have begun implementing the solution from www.css3pie.com as you can see on my content titles.

     

    The site is resizing images perfectly as you can see in the screenshot below, but in IE9 and 10 this is not happening. Any ideas?

     

    chrome-resize.png

     

    Kind regards,

    Mitchell Ransom

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    3. osgood_,
    May 23, 2012 1:55 AM   in reply to MBR Web Design
    Report

    Try adding to your css:

     

     

    td img {

        width: 100%;

    }

     
    |
    Mark as:
  • MBR Web Design
    Currently Being Moderated
    4. MBR Web Design,
    May 23, 2012 5:29 AM   in reply to osgood_
    Report

    Thank you osgood_, that solved the issue perfectly! Such a simple one, I must have deleted that code somehow while I was adding my custom css. Let's hope this post helps others who run into the same problem.

     

    Kind regards,

    Mitchell Ransom

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    May 23, 2012 5:52 AM   in reply to MBR Web Design
    Report

    It may be better to put those Special Offer images in four floated <divs>. then you could have two lines of two images once the browser width reduces to phone sizes.

     
    |
    Mark as:
  • MBR Web Design
    Currently Being Moderated
    6. MBR Web Design,
    May 23, 2012 6:09 AM   in reply to osgood_
    Report

    Great idea, I considered it earlier but couldn't get it to work right across sizes. Would I need 2 CSS rules for phone and then one for tablet and desktop? I assume I would have to set the width to 50% on phone css and 25% on the other css?

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    May 23, 2012 6:46 AM   in reply to MBR Web Design
    Report

    You could set the <divs> up like:

     

    <div id="special_1"><img src="http://www.moleseyhire.com/images/offer-1.png" alt="33% Off Shampoo"></div>

      <div id="special_2"><img src="http://www.moleseyhire.com/images/offer-2.png" alt="Multi Hire"></div>

        <div id="special_3"><img src="http://www.moleseyhire.com/images/offer-3.png" alt="Multi Buy"></div>

        <div id="special_4"><img src="http://www.moleseyhire.com/images/offer-4.png" alt="10% Off Tile Cutter Accessories"></div>

     

     

    Then add

     

    #special_1, #special_2, #special_3, #special_4 {

        width: 24%;

        float: left;

        margin-right: 1%;

    }

     

    To the following media queries:

     

    @media only screen and (min-width: 769px) and @media only screen and (min-width: 481px)

     

     

    and:

     

    #special_1, #special_2, #special_3, #special_4 {

        width: 49%;

        float: left;

        margin-right: 1%;

    }

     

    to the following media query:

     

    /* Mobile Layout: 480px and below. */

     
    |
    Mark as:
  • MBR Web Design
    Currently Being Moderated
    8. MBR Web Design,
    May 23, 2012 7:26 AM   in reply to osgood_
    Report

    Thanks,

    I solved it slightly different but with a similar method to save a bit of coding.

     

    Mobile:

    #specials-image-container {

              width: 100%;

    }

     

     

    .specials-image {

              display: block;

              float: left;

              max-width: 48%;

              margin: 1% 1% 1% 1%;

    }

     

     

    Desktop/Tablet:

    .specials-image {

              max-width: 23%;

              margin: 1% 1% 1% 1%;

    }

     

     

    Thanks again, you've been a great help! Have a great week.

     

    Kind regards,

    Mitchell Ransom

     

    Pasted the older code! Updated now.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points