Argh. I've spent 4-5 hours now trying to figure out why a simple floated div won't float next to plain-old text. The floated div is a pull-quote, nothing in it but text and a background image; it works fine (of course) in Firefox and Opera. The HTML and CSS essentially validate (the couple of non-validating items are the "zoom:1;" other MSIE hack {frown} and a search-related fieldset and form that need addressing later.) I've looked through every hack on positioniseverything; and about 25 other sites addressing MSIE float problems. Nothing applies or works.

The text will not flow around the float on the left -- it drops below. Putting it as a {span class=pullq-r} it DOE float, but only to the right of the paragraph it's in, and since the para is shorter, the following paragraph again drops below. How do I make a simple float actually float? (Oh yeah, I tried giving the float widths in ems, %ages and pixels; and the container(s) page and wrapper widths too (100%, 99%, 96% -- nothing worked.)

The HTML (with the two surrounding paragraphs):

<p>Most readers of this newsletter understand the distinction between bird flu, which has already afflicted millions of birds plus a few hundred stunningly unlucky humans, and pandemic flu, which may someday afflict millions of people. We understand that the connection between the two is a genetic mutation or reassortment that hasn’t happened yet. We understand that bird flu is a major veterinary issue but a minor public health problem, and that any virus that can launch an influenza pandemic will no longer be a bird flu but a human flu, passing all too easily from person to person in places where there are no sick birds.</p>

<div class="pullq-r">Calling both of these problems “bird flu” has been a monumental mistake.</div>

<p>Calling both of these problems “bird flu” has been a monumental mistake. We tell people that many experts are incredibly worried about bird flu, which could be a public health disaster, overwhelming hospitals and disrupting just-in-time supply chains. And we tell people that bird flu is spreading inexorably from country to country and will almost inevitably get to our country too. We are less than clear that these two sentences, both true, are about different bird flus. </p>


The standards-compliant CSS
.pullq-r { /* do not put near blockquotes, screws up the format of the blockquote */
float: right;
width: 42%;
padding: 10px 0.5em 10px 0.8em;
margin: 0.2em 0 0.2em 0.2em;
font-style: italic;
font-weight: bold;
font-size: 2em;
font-family: Corbel, Calibri, Arial, Verdana, "Bitstream Vera Sans", sans-serif;
line-height: 1.1;
letter-spacing: 0.03em;
text-align: left;
background: transparent url(../art/yelback.jpg) repeat top left;
color: #000080;
}


THe MSIE hack stlyesheet code
.pullq-r { /* override the global style sheet to make the text flow around */
float: right;
display: inline;
width: 400px;
margin: 0;
padding: 0;
}

Try forcing it to "have layout" by setting zoom: 1;

IE has no problems at all with a plain old float, it's when you start giving that float margins and padding, and widths that add up to more than the parent container that you get float drop.

Giving the div a width (or height) gives it 'hasLayout', so that's not the problem.
By zeroing out the margins in the IE hack sheet, you eliminate the need for the display: inline, you only need that if you're assigning a right margin to a right-floated element.

Are you sure your 42% and your 400px is not adding up to more than the full width or the container ?

It is also not a good idea to put margin AND padding on a floated element.

Hi Lady!
I added the display: inline and the width 400px trying to get the thing to work. When I take them out, it still doesn't work. (That's why I tried the 400px too, thinking maybe pixels rather than %ages would work. Tried ems and &ages and px... Nuthin' doing.)

I have to set a width on the floated pull-quote don't I? (cause it's a float?) I used 42% cause that leaves how-ever-many pixels/ems/space to the other (left) side for the text to flow. (The dropping-down text is a plain <P>, no width but its inherent.) If I take out all padding and margin -- the text still doesn't flow around the box -- but the box edges are squished against the content-text.

I took out every a single HTML code up to <body> in a trial version of the file (consisting of the pullquote, the para before and two paras after), and it still doesn't work. Body has only:

Global
margin: 0;
padding: 0;
background-color: #ffffff;
color: black;
font-family: Cambria, "Times New Roman", Times, serif;

standards-compliant
background: #ffffff url(../art/noteppr3.jpg) repeat left top;

and MSIE-specific
margin: 0;
padding: 0;
text-align: center;
font-size: 100%;


Maybe I'll just make the doggone things hidden!

Oh {sigh} I did -- and in one file in MSIE6 it disappears, and in the other it's still there. Both files are linked to the SAME style sheets, same coding on the pullquote. ARGH! I HATE MSIE! (And yeah, it would help if I had more experience with cascade/inheritance -- but that's what I'm getting, fer shure! {sob}

The hack stylesheet
div.pullq-r { /* makes pull quote invisible in MSIE6 and below */
display: none;
}

(Yes, I tried with with .pullq-r div {} and .pullq-r {}... nothing works.)


The real stylesheet
.pullq-r { /* do not put near blockquotes, screws up the format of the blockquote */
float: right;
width: 42%;
padding: 10px 0.5em 10px 0.8em;
margin-left: 0.3em;
font-style: italic;
font-weight: bold;
font-size: 2em;
font-family: Corbel, Calibri, Arial, Verdana, "Bitstream Vera Sans", sans-serif;
line-height: 1.1;
letter-spacing: 0.03em;
text-align: left;
background: transparent url(../art/yelback.jpg) repeat top left;
color: #000080;
}

Tried it without any margin at all too. (All these changes take effect in FIrefox. All these changes do NOT take effect in MSIE6.) Oh: both have the identical:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



I don't get it -- I can't use an ID -- cause there are multiple pull quotes in the files. The ONLY coding applied to the pullquote is <div class="pullq-r"> -- no para inside, no spans, or anything... It HAS a class so that should overrule anything else -- any other "div" coding anywhere in the system. Even putting the hack code in the <head> of the file does NOT make it disappear. Is there some kind of reset I'm missing?

Could it be the mixed measurement units in the padding? But if it's invisible that shouldn't matter?! (Except, of course, it's not invisible.)

I'm going crazy -- I can't even make the doggone thing go away!

Have you got the page up where we can see it ? Really need to see the whole thing.

Thank you SO much!

It's in these two files at the bottom of this index:
http://www.snowtao.com/cave/CSS-Index.htm:

CIDRAP-15 (Making the pullquote hidden (in the MSIE stylesheet) worked; it's placed in the flow just above the paragraph that begins "Calling both of these problems "bird flu" has been..." in the first section headed "It's our fault")

Hillary column (even though the pullquote should be hidden; using the same style sheet as the above file) the text drops down below the pullquote).

(And yeah, I know, the search bar is screwed up -- all I'm doing is stupid MSIE bug fixes right now!! Hey! At least I'm getting the bullets to appear! {sob})

Elenor

errm... "Page Not Found" error...

http://www.snowtao.com/cave/CSS-Index.htm

Sorry, not sure how the colon got at the end...

Just wanted to update the location, for when/if you get a chance to look at these...

It's in these two files now in the second section of index page: http://www.snowtao.com/cave/CSS-Index.htm

CIDRAP-15 (Making the pullquote hidden (in the MSIE stylesheet) worked; it's placed in the flow just above the paragraph that begins "Calling both of these problems "bird flu" has been..." in the first section headed "It's our fault")

Hillary column (even though the pullquote should be hidden; cause it's using the same style sheet as the above file) the text drops down below the pullquote).



I've been bug hunting on the 10-or-so files we've gone live with, so haven't gotten back to this to try to make it work some other way.

Appreciate anyone's help (esp. the web goddess!),
Elenor