Member Avatar for webdi

I'm sure this has been discussed but I can't find it in my searching. I have seen suggested solutions, but none work in my case.

I've got a page with several divs. Each div has with some text and an image. The images are align to the right of the div. My page looks good in firefox and safari. The page looks fine in IE except for one image. That one image is not aligning to the right as the others although I've used the same code for each of the div's. The problem images seems to float to the left, like a problem child! any help would be greatly appreciated!

Here is the page on the dev site.

The Simpson Gallagher image seems to float to the left in IE.

Here is my css.

.galleries img { 
    padding:0px 0px 20px 0px; 
    float:right; 
    display:inline; /* fixes IE align problem */
    text-align:right;}

Here is my code for the problem div. Although it's the same for the other divs which are working. I don't see any difference with the images...

<div class="galleries"><a href="http://www.simpsongallaghergallery.com/" target="_blank"><img src="images/simpson.jpg" border="0" alt="Simpson Gallagher Gallery" align="right" />Simpson Gallagher Gallery</a><br />
 1161 Sheridan Avenue<br />
 Cody, Wyoming</div>
Edited by Nick Evan because: Fixed formatting
  • 3 Contributors
  • 4 Replies
  • 110 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by webdi

Dani AI

Generated

Single-image float problems in IE are almost always a local bug, not a browser mystery. The thread shows useful ideas from and around padding, and later reported the issue fixed. For others who run into the same symptom, here are precise checks and quick fixes that actually find the root cause.

Validate the markup first (bad or unclosed tags around the image commonly break IE layout): use the W3C Markup Validation Service. Open IE’s Developer Tools (F12) and inspect the problem image’s computed styles and box model—look for inline styles, higher-specificity rules, or an unexpected selector targeting the anchor or image. Temporarily remove the link or surrounding text to see whether the image still misbehaves; that isolates whether the anchor/adjacent text is involved.

Use a targeted visual/debug rule to reveal the image box and force IE’s layout handling:

img.debug-fix {
  border: 2px dashed #c00;
  display: block;
  float: right;
  zoom: 1; /* triggers hasLayout in old IE */
}

Apply that class to the troublesome image only. The dashed border shows the true box; display:block rules out inline whitespace quirks; zoom:1 fixes many old-IE float/position bugs by giving the element “hasLayout.” If that fixes it, add the appropriate rule to the real selector (or give the parent element zoom:1) rather than leaving the debug class.

Other things to check: image pixel content (open in an editor to see hidden transparent padding), container width vs. image width, DOCTYPE (quirks mode breaks things), and CSS specificity or !important overrides. If nothing helps, reduce the page to a minimal test case (single DIV + image) to reproduce the bug; that usually reveals the offending markup or rule.

Recommended Answers

All 4 Replies

Member Avatar for CJesusSaves

I looked at your css file itself: I believe you need to remove:

padding:0px 0px 20px 0px;

So that you end up with:

.galleries img { 
	float:right; 
	display:inline; /* fixes IE align problem */
	text-align:right;
	}

IE seems to be confused because you have this:

.galleries {
padding: 20px 20px 20px 0px;}

..already included
Cheers.

Member Avatar for tranchibinh

repair your css like this that all

.galleries img {
padding:0px 0px 0px 20px;
float:right;
display:inline; /* fixes IE align problem */
text-align:right;}
Edited by tranchibinh because: n/a
Member Avatar for webdi

Thanks for the help, but the

.galleries {
padding: 20px 20px 20px 0px;}

is aligning my divs properly overall on the page

and

.galleries img { 
padding:0px 0px 20px 0px;

is as I intended. I want 20 pixels of padding under the images. I've changed it to

.galleries img { 
    padding-bottom:20px;
    float:right; 
    display:inline; /* fixes IE align problem */
    text-align:right;}

for clarity, however, it didn't help my problem image floating to the left. I've not had a problem doing this before and there is only a problem with one image. Four images are displaying properly with this css.

Any advice would be appreciated!!

Edited by Nick Evan because: Fixed formatting
Member Avatar for webdi

I got it. Thanks for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.