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.
http://bobbarlow.com/dev/galleries.php
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>

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.

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;}

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

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.