Hello everyone.
My page has images that float. They work fine in Opera, Safari, and FireFox but when I look at it in IE 6 for windows, I get some serious floating bugs. My code is all correct. XHTML:

<p class="indent">After a long and fruitful life, the Lord called our beloved pastor/teacher, 
<img src="images/drjack3.jpg" class="floatedpicright" alt="Dr. Jack" />
Dr. Jack MacArthur, home to be with Him. On June 15th, he quietly took his last breath and instantly left his body to experience the joy of heaven and the face of his Lord Jesus.</p>

CSS:

.indent 
{ 
    text-indent: 18px;
    clear:none;
}
.floatedpicright
{
    float: right;
    margin: 10px 0 7px 10px;
}

Thanks for all of your help
carter

What exactly is the problem? I took the code you gave and tested it on IE 6 and it worked the same as Firefox. Might be something else in your code. Could you give us a page, or, more code to look at?

Yeah. Here's the link: Voice of Calvary Radio.



It kinda works. I think the 2nd page is the worse problem. It starts to work, and then if I start another <p> tag it clears. Its weird.

The only thing I can see that might be causing the problem with the floats is the text being justified. You might try just aligning it left and see if that fixes things. I think IE is moving the paragraphs to a place that allows the text to justify completely to the edge.

I think your paragraph tags need to be cut down. I actually got it to wrap fine once i removed most of the p tags. So, this is what i would suggest.

Keep this p tag...

<p class="indent">After a long and fruitful life, the Lord...

and this closing p tag (towards the end)...

...Lord. Well done good and faithful servant!</p>

Any instance of a new paragraph between those tags, just replace with this...

<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Then start your new paragraph text here.

For your indentations to look like the first indentation forced by the indent class, you can use the non breaking space but they will not all look the same unless you align your text left, rather than justified. If you can stand the small difference in the indentation from the nbsp, then you can just keep it justified.

I tried numerous other things, but resorted to an alternative rather than fixing the problem. Sorry, i ran out of time, this is all i could come up with. But, it does work, there is only a slight difference from EI and Firefox (that is to be expected.)

Applying this to any other page would be simple, just keep one initial paragraph tag and its closing tag for the main content. Things like salutations can be wrapped in their own paragraph tags still, but you could just as easily use a break and non breaking spaces.

I tried it, but I can't check it. I have a friend checking it right now to see if it worked.

Originally Posted by The Ape

<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Then start your new paragraph text here.

I thought of this but I don't like using code like that for looks. I need functionality and simplicity. Thats what I'm about. Is there another way to do this same effect? With my CSS margins maybe?

I have tried a hundred different ways. The only thing i could suggest is probably not what you want. But, you could take any image that is within a paragraph and move it directly after the opening paragraph tag. This seems to alleviate the space between paragraphs.

When it comes to the group of images on legacy2, you could add another class in your css that has a left margin large enough to keep the images in your content, and then make the images of that class float left of one another. Then wrap all of the images in that class.

This is all i have if you don't want to get rid of some of your paragraph tags.Sorry.

Question, how did you get the background with the gradient and dropshadow to work in IE? I'm trying a similar layout and the problem I'm having is with the PNG alpha transparancy in IE, the page looks fine in Mozilla/Firefox but there's no dropshadow in IE.
http://www.superhyperglobalmeganet.com/test4.html

Originally Posted by warpdesign

Question, how did you get the background with the gradient and dropshadow to work in IE? I'm trying a similar layout and the problem I'm having is with the PNG alpha transparancy in IE, the page looks fine in Mozilla/Firefox but there's no dropshadow in IE.
http://www.superhyperglobalmeganet.com/test4.html

well, IE doesn't support transparent png files, sometimes it messes them up, and sometimes it just doesn't show them. Mine is a .gif and it doesn't look as good, but it is way more compatible. And you don't really need transparency for a gradient anyway. hope it helps!

carterdea, I had another thought about your site. I see you've specified in the css that each paragraph should have a width of 550px. I think IE is moving the paragraphs down to where they text can fill all of that 550px. Try not specifying a width and see if that works.

if I don't specify a width, won't the p tag go to the ends of the #content? Cuz I don't want that. I guess I can just add margins. Awesome thanks. I'll try it.

They will go to the ends of the content without the width. Actually it's padding you would want to add. Let me know if that works.

For me its looking good with the following css rules for your paragraph.

Either:

p
{
	margin: auto 50px 1.3% 50px;
	text-align: left;
	/* width: 550px; */
}

or

p
{
	margin: auto auto 1.3% auto;
	padding-left: 50px;
	padding-right: 50px;
	text-align: left;
	/* width: 550px; */
}

Try either of those and let us know how it works.