CSS alignment

IE and Firefox difference

[zair]

I am having problems aligning two images seamlessly together. It works fine in Firefox, but IE displays a margin between the images. (Tried adjusting margin and padding values for both the images and the div tags, and nothing works)

<div STYLE="float: right;"><img src="images/wg_lechatnoir_title2.gif" width="150" height="351"></div>
<div align="right"><img src="images/wg_lechatnoir_title1.gif" width="306" height="179"></div>

Also, I noticed that with borders on both the images and the DIV tags, it appears that the divs line up seamlessly, but the title1 image stays a few pixels away from being aligned to right...

Any ideas?

Thanks,
Tobyn.

P.S. Also, I hear the align="right" tag is depricated in the new standard, so what's a good alternative?

[iamlost]

Why not use float: right; on the second div as well?
It seems to remove the "gap" and otherwise display the same.

If doing this causes other problems some extra html/css code snippets might help.

[zair]

Ahh, yes, that does fix the gap, but now just a wee little bit of the text (only two words, "As the") is wrapping on the left side... Here's a bigger code snippet. It's also very unfortunately stuffed within a table right now. Something I'm going to remedy soon... but in any case, I don't want the text wrapping on the left side of the images.

Thanks!

<div STYLE="float: right;"><img src="images/wg_lechatnoir_title2.gif" width="150" height="351"></div>
<div STYLE="float: right;"><img src="images/wg_lechatnoir_title1.gif" width="306" height="179"></div>

<DIV STYLE="margin-left: 10px; margin-right: 10px">
<p>
<b><div style="font-size: 14px; margin-left: 20px;">As the third in a weekly series searching for Whatcom’s best secret getaways, The AS Review takes aim at Le Chat Noir.</div></b>

[iamlost]

This may be what you are looking for:

<div style="clear: both; margin-left: 10px; margin-right: 10px">
<p style="font-size: 14px; font-weight: bold; margin-left: 20px;">As the third in a weekly series searching for Whatcom’s best secret getaways, The AS Review takes aim at Le Chat Noir.</p>
</div>

You should validate your code - <b> should not wrap a div, and a </p> and a </div> are missing.

Perhaps you need to rework your page design (determine where you want table/div) and rework code as a whole instead of picking away at it piecemeal.

[zair]

Thanks for the validation tips! This does solve the problem of the text wrapping, but now there's a big white space...

Okay, I just tried it in a slightly different way!

Before, I had two images, one on the left, and one on the right. The one on the right was much taller than the one on the left, but I wanted the two to line up along the top and seamlessly come together, and have the bottom hang down. Then, I wanted text to fill in the space created on the left.

Now, I still have two images, but one takes up the whole top, and the other is floated to the right below it. Much simpler, and it works like a charm, now.

Unfortunately, I found I had to use the align="right" tag, as floating it to the right made the text wrap around it even with it set to clear both. Is there a way around that?

Thanks,
-Tobyn

<div STYLE="clear: both;" align="right"><img src="images/wg_lechatnoir_title1.gif"></div>

<div STYLE="float: right;"><img src="images/wg_lechatnoir_title2.jpg"></div>

<DIV STYLE="margin-left: 10px; margin-right: 10px;">