WordPress.org

Ready to get started?Download WordPress

Forums

IE9 image bug (13 posts)

  1. deuce25
    Member
    Posted 1 year ago #

    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.

    http://www.sarniacement.com/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?

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

  3. deuce25
    Member
    Posted 1 year ago #

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

  4. deuce25
    Member
    Posted 1 year ago #

    I tried the validator but it's all Greek to me. :) Any suggestions?

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  6. deuce25
    Member
    Posted 1 year ago #

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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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...

  8. deuce25
    Member
    Posted 1 year ago #

    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>
  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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>
  10. deuce25
    Member
    Posted 1 year ago #

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

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  12. deuce25
    Member
    Posted 1 year ago #

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

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic