Hi Everyone. This started out as a letter asking for help and I ended up solving it in the process of writing it. This has happened several times this week and rather than adding it to the dust bin, I thought I'd share the process. Sometimes just writing out your problem helps you define the situation and figure it out yourself.
The following is the original letter as I had planned to send with the problem. //////----------------------------- I can't thank you enough for helping me solve several nagging problems this week. I've got yet another, probably the last for now, that seems simple enough but I am losing my sanity over it. I have images that I would like the text to wrap around. In Mozilla Seakoala (I have the cool firefox plug-in that changes its name every time I open it), the page wrapping looks fine. The text wraps around the image and all is happy. In IE, I have to put the image inside the paragraph tag to get it to wrap and I don't like this clunky hack. (http://v4.csatravelprotection.com/) Here is the source code where I coded it the proper way: <img src="../images/eiffel.jpg" width="250" height="165" title="Free quote for quality travel insurance plans and trip insurance." alt="photo of the Eiffel Tower" /> <p> It just takes a few seconds to get a <a href="/csa/preparequote.do" title="Get an instant, free travel insurance quote">FREE ONLINE QUOTE</a> for CSA WebDirect®, the travel insurance plan that protects your travel investment before and during your vacation—right up to the minute you get back home!</p> Here are the appropriate styles: p {margin: 1em 0 1em;padding: 0; text-align: left; width:90%;} img {border:0;} #maincontent img {float:right; margin:3px;} When I view this in mozilla the paragraph wraps nicely but the IE paragraph acts as if it has cleared and starts after the image. /////-------------------- Here comes my thought process! ~~~ I then noticed the paragraph width tag and said to myself: "Could it be the width:90% that is doing it? I added the width to keep the paragraphs from getting too long." I then commented out the width and checked, sure enough IE began playing nicely. So, how do I get the good browsers to show the narrower paragraphs and IE the nicely floated image? Before I sent another email to this list asking for the best hack, I cracked open my "more Eric Meyers on CSS" book and sure enough in the index was "hiding styles from IE win". Page 52 suggests using the html>body selector. So, I took the width:90% out of the above p style and created a new one: html>body p {width:90%;} I then tested and so far every thing is hunky dory. http://v4.csatravelprotection.com Any comments? Ted CSA Travel Protection CSS God (at least that is what my co-workers have begun calling me lately. I prefer omniscient being)> IE5 Mac bugs and oddities : <http://www.l-c-n.com/IE5tests/> > > ****************************************************** > The discussion list for http://webstandardsgroup.org/ > > Proud presenters of Web Essentials 04 http://we04.com/ > Web standards, accessibility, inspiration, knowledge > To be held in Sydney, September 30 and October 1, 2004 > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ****************************************************** > > > ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
