WordPress.org

Support

IE9 image bug

  • I have a little problem that I can’t figure out for the life of me. It only happens in IE. It’s fine in Chrome and FF.

    SCS Services

    In IE9 the second image is not aligned right like the other 2 images. The code is the EXACT same for all 3 images so I’m baffled.

    Any ideas?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Hi Andrew. All page content was create directly in WP admin. WP can create pages that are non-WC3 compliant?

    I tried the validator but it’s all Greek to me. 🙂 Any suggestions?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Here are explanations of the errors generated
    http://validator.w3.org/docs/errors.html

    Is there anything you see that would cause the image bug in IE?

    WPyogi

    @wpyogi

    Forum Moderator

    It looks like that problem is being caused by the top/bottom margins on the images — there is not space between the image out of place and the one above it — hence it is dropping to the next line. Probably the easiest way to fix it is to move the out of place image down a bit in the list of services. Or change the margins that are part of the class .alignright — but note that there are several places with that class defined in various styles…

    I tried changing margins but it made no difference. This is the code for that section:

    <ul>
    	<li>Driveways<a href="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer21.jpg"><img class="alignright size-full wp-image-121" style="border: 1px solid black;" title="SCS" src="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer21.jpg" alt="Sarnia Cement" width="256" height="217" /></a></li>
    	<li>Parking lots</li>
    	<li>Sidewalks</li>
    	<li>Curbs</li>
    	<li>Patios</li>
    	<li>Floating slabs</li>
    	<li>Pads</li>
    	<li>Porches</li>
    	<li>Ramps</li>
    	<li>Coloured cement</li>
    	<li>Sealers and protectors</li>
    	<li>Window wells</li>
    	<li>Catch basins</li>
    	<li>Saw cuts</li>
    	<li>Demolition</li>
    	<li>Debris removal<a href="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer31.jpg"><img class="size-full wp-image-137 alignright" style="border: 1px solid black;" title="SCS" src="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer31.jpg" alt="Sarnia Cement" width="256" height="217" /></a></li>
    	<li>Pool fill-ins</li>
    	<li>Driveway dig-outs</li>
    	<li>Excavating service</li>
    	<li>Site work service</li>
    	<li>Dump truck service</li>
    	<li>Sand, gravel and topsoil</li>
    	<li>Grading</li>
    	<li>Forming</li>
    	<li>Parging</li>
    	<li>Tuck pointing</li>
    	<li>Waterproofing</li>
    	<li>Foundation crack repairs</li>
    	<li>Weeping Tile</li>
    	<li>Sump pump installation</li>
    	<li>Sewer repairs<a href="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer11.jpg"><img class="alignright size-full wp-image-138" style="border: 1px solid black;" title="SCS" src="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer11.jpg" alt="" width="256" height="217" /></a></li>
    	<li>Storm lines</li>
    	<li>Injections</li>
    	<li>Concrete breaking and removal</li>
    	<li>Concrete forming and finishing</li>
    	<li>New Homes</li>
    	<li>Additions</li>
    	<li>Walls</li>
    	<li>Footings</li>
    	<li>Floors</li>
    	<li>Basements</li>
    	<li>Crawl spaces</li>
    	<li>Garages</li>
    	<li>Pole barns</li>
    	<li>Insurance claims</li>
    	<li>Snow removal</li>
    </ul>
    WPyogi

    @wpyogi

    Forum Moderator

    There are inline margins on the images AND margins in the CSS in 3 separate places — and removing it is likely to mess up other images on your site. Why not just move the last photo down in the above code — i.e.

    <li>Sewer repairs</li>
    <li>Storm lines</li>
    <li>Injections</li><a href="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer11.jpg"><img class="alignright size-full wp-image-138" style="border: 1px solid black;" title="SCS" src="http://www.sarniacement.com/site/wp-content/uploads/2012/09/footer11.jpg" alt="" width="256" height="217" /></a>

    I just tried that but the second image is still screwed up in IE.

    WPyogi

    @wpyogi

    Forum Moderator

    It changed in Firefox — it WAS messed up prior. You might try clearing your browser cache?

    Or deal with the margins…you’ll have to sort out the CSS — best way to do that is using Firebug or other similar tool.

    What version of FF are you using? It was fine in my FF 3.5.9. Is IE still screwed up for you?

    WPyogi

    @wpyogi

    Forum Moderator

    Firefox 15.0.1 (on Mac). No access to IE — sorry. But you can test various browsers on some simulator websites such as: http://www.browserstack.com/

    Google may find others that are totally free.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘IE9 image bug’ is closed to new replies.
Skip to toolbar