Solved

Internet Explorer fails oddly with align="right"

Posted on 2011-03-15
19
309 Views
Last Modified: 2012-05-11
I have used the html align attributes many times, but have never seen anything like this in IE. There is an image that is align="right" and the text is expected to flow around it. It works fine in Firefox and Chrome. But in IE, the text is not arranged around the image, but instead appears superimposed on the image.

The image html is as follows:

<img src="/images/members/T4582809-315x233x87.jpg" alt="Sales Staff" title="Sales Staff" width="315" height="233"align="right" style="margin-top:25px; margin-left:10px;"/>

I am attaching code of the relevant div, the related css, plus ascreen shot of how IE is rendering it with the superimposition of the text and image, along with an image from Chrome showing what is expected. As I am uploading the screen shots, I am also noticing the bullets on IE are also shifted down substantially. Never noticed that IE had trouble placing bullets before either.

I'd give a link, but this is not yet on a production server.

Any quick ideas?

Chrome rendering - what is expected
IE - superimposed

/* clickbank */
#clickbank-right
{
	float:right;
	width:210px;
}
#clickbank-right #testimonial
{
	float:right;
	padding-bottom:10px;
	margin-left:30px;
}
#clickbank-right #value-prop
{
	float:left;
	margin:150px 0px 200px 0;
	border:3px solid maroon;
	width:200px;
	height:400px;
	position:relative;
	right:150px;
}
#clickbank-right #value-prop #head
{
	color:white;
	background-color:#6b82a7;
	font-size:12px;
	font-weight:bold;
	padding:5px;
	height:30px;
}
#clickbank-right #value-prop #body
{
	font-size:11px;
	padding:5px;
}
#clickbank-right #value-prop ol
{
    padding-left:20px;
}
#IEroot #clickbank-right #value-prop ol
{
    margin-left:24px;
    padding-left:0px;
}
#clickbank-pitch
{
	 float:left;
}
#clickbank-pitch h2
{
	width:600px;
}
#clickbank-pitch p
{
	margin-bottom:10px;
	font-size:13px;
	width:600px;
}
#clickbank-pitch .head1
{
	color:maroon;
	font-size:24px;
	width:750px;
}
#clickbank-pitch .head2
{
	font-size:16px;
	width:600px;
}
#clickbank-pitch li
{
	margin-top:10px;
	width:600px;
}

Open in new window

<div class="head2">
	<h2>Welcome to SalesRepHunter.com, your best resource to find proven independent sales reps (manufacturer reps) for your company.</h2>

	<h2>SalesRepHunter.com can grow YOUR business.  Here&rsquo;s how:</h2>

	<img src="/images/members/T4582809-315x233x87.jpg" alt="Sales Staff" title="Sales Staff" width="315" height="233"align="right" style="margin-top:25px; margin-left:10px;"/>
	<ul>
		<li><strong>Reputation:</strong> We have been in business online collecting and profiling independent sales reps for over 10 years.  That process has enabled us to help thousands of businesses all over the US and Canada successfully find quality independent sales reps.  In fact, click here to <a href="javascript:window.open('/testimonials-popup.php','','scrollbars,width=640,height=480,resizable,');"><span class="underlink">view 100+ unsolicited testimonials from our previous subscribers.</span></a></li>
		<li><strong>Affordable:</strong> Starting at less than $300, our subscriptions cost less then a classified ad in your local news paper.  And, finding just one good rep could be the best investment your company ever makes.</li>
		<li><strong>Guaranteed:</strong> Our service is guaranteed to work.  Our interface is perfectly designed to guarantee the initial communication between you and the sales reps of your choice.</li>
		<li><strong>Save Time and Money:</strong> Time is money.  Our database can be searched and sorted to insure that you only spend time speaking with sales reps that meet your criteria.</li>
		<li><strong>Toll-Free Telephone support:</strong> We are NOT in the business of selling subscriptions.  We are in the business of helping you grow your business with independent sales reps.  Our subscription include decades of combined experience of securing and working with independent reps.</li>
	</ul>
</div>

Open in new window

0
Comment
Question by:jasimon9
  • 14
  • 5
19 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35143002
What you've given us so far works perfectly and both IE8 and Firefox look like the Chrome screenshot above.  Something else on your page is interfering with your CSS in this section.
0
 

Author Comment

by:jasimon9
ID: 35143105
I have been working on this since I posted the question, and so far it is a mystery. Both the displacement of the bullets, and the text flow.

I am thinking I will promote the code to a non-production yet available to the world-at-large server, so responders can see it in context.
0
 

Author Comment

by:jasimon9
ID: 35143118
Unfortunately we have basic auth now on our test server as well, so I am thinking I will just promote it to a production server, as this prototype page has no links on it yet that can cause anything to happen. I will post again when that is done.
0
 

Author Comment

by:jasimon9
ID: 35143241
The page is now accessible at the following URL:

    http://www.rephunter.net/clickbank-pitch.php

However, I have tweaked it further since posting the question. Instead of having the img tag above the ul, I put it into one of the li items. So now on IE it is appearing in its own block, whereas in the other browsers it is still appearing as desired, with the text wrapping.

Bullets are still offset.

I am getting the feeling that there is some error somewhere that the browsers are just responding to differently.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35143458
This section without any <li> to with is causing a problem with the validator.  On line 414 in the "View Source", the </li> should come after the </ul>, it's not properly nested.
 Still looking.  The validator lists 44 errors.  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rephunter.net%2Fclickbank-pitch.php  Some of those would disappear if you used "HTML 4.01 Transitional" instead of "XHTML 1.1".  You're using the pickiest of the DOCTYPEs and it does affect how the browsers interpret your page.
<div id="tabs">
			<ul>

				
			</ul>
		</div>

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35143468
Also, Firefox does not like a lot of the 'tundra.css'.  And I would avoid using names like 'body' for my classes or ids.  And I would not use exactly the same name for both an id and a class.
0
 

Author Comment

by:jasimon9
ID: 35148871
You are probably right about the class and id names. However, these are general suggestions that do not have any effect regarding my issue. Just to be on the safe side however, I did change all such ids. As expected, no effect.

Regarding the tundra.css, that was put in probably back in 2008 or so along with dojo. I don't know of specific issues that it may have caused, but we have lived with it for quite a while. And the specific issue is not in Firefox anyway. And as an aside, dojo is soon to be removed from our site in any case.

I will work on the "tabs" div to remove the <ul> stuff to see if that has any effect. I doubt it, but it is worth a try. It comes from the generic template for the page which normally has a tabs section.
0
 

Author Comment

by:jasimon9
ID: 35148919
As expected, removing the empty <ul> has no effect on the issue.

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35150496
I just looked at your page again.  It still shows 44 errors in the W3C validator.  Firefox lists many errors in 'tundra.css' so I looked at it and there are many errors there where someone has added '#' in front of attributes that aren't ids.

This http://trac.dojotoolkit.org/browser/dijit/trunk/themes/dijit.css?rev=11656 appears to be the original CSS.  Yours is a modified version of it.   '#' is mentioned in a couple of places as being needed for IE7.  It gets discarded by Firefox and may get ignored by IE8.

About all I can do is point out these things because it is very difficult to trace through your CSS with so many little things that are errors.  I can't point to any one thing that will fix your problem with IE.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:jasimon9
ID: 35150889
I appreciate your input. I suppose a next step might be to correct the validation errors.

However, my gut feel is that there is some IE quirk such as "hasLayout" or margin/padding oddities that might be the cause. An nothing is jumping out in the various Developer Tools in any of the browsers.

I have many examples of flowing text around an image, and IE has never acted as it is now.
0
 

Author Comment

by:jasimon9
ID: 35151038
The following error jumps out in the validator:

 Line 207, Column 124: there is no attribute "align"
…Staff" width="315" height="233" align="right" style="margin-top:25px; margin-l…

I am strongly thinking that is the exact cause of the error. When I checked this earlier, the suggested change was to use a float. But I could not get that to work either, because the text does not flow around the image. Instead, it treats the image as a block, with an <li> above it and an <li> below it.

The HTML 4.01 specification talks about using <br clear=" ... to control the flowing of the text, so my next step is to experiment with that.
0
 

Author Comment

by:jasimon9
ID: 35151302
So far I have removed the align="right" and played with <br> and floats. IE just doesn't want to nicely float the <li> elements around the image. Best I can get is something like the image in the accompanying screen shot.

Of course with the floats, the other browsers now also render just like IE, which is not what I want.

In looking at the online documentation, it just talks about float and br. But the results are not the wrapping I am looking for.
IE-using-floats.png
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35151502
I don't know if you can get what you want with <li>s.  I know that <p>s will wrap with more than one.  You might get it to work (sort of) if you put the image above the <ul> so it is before the <li> completely.
0
 

Author Comment

by:jasimon9
ID: 35151790
Well, it "just works" in browsers other than IE. That is Firefox, Chrome, and Safari. I am taking a different approach. Instead of using our complex site templates, just create a very basic page without all the extra junk. Either that will work, or not.
0
 

Author Comment

by:jasimon9
ID: 35152070
Interestingly, in a bare bones test page with the code as shown in the snippet (and that is the whole page -- not even <html>, <head> or <body> tags) does work exactly as desired and expected in all our supported browsers. So there is just something in our complex templates that is throwing IE off.

So I will be able to solve the problem as mentioned in my last post by abandoning the php templates and just creating a simple html page. This is not a problem, because this page just happens to be a standalone, special page that does not need any of the template functionality.

And it also points out that a lot of the cruft in our templates are left over from IE5.5 and below most likely are just "backwards compatible" junk for browsers that we no longer support. So we should probably dump all that too.
0
 

Author Comment

by:jasimon9
ID: 35152097
Forgot to upload the barebones code.
<div style="font-size:16px; width:600px; font-family:Verdana;">
	<ul style="float:left;">
		<li><strong>Reputation:</strong> We have been in business online collecting and profiling independent sales reps for over 10 years.  That process has enabled us to help thousands of businesses all over the US and Canada successfully find quality independent sales reps.  In fact, click here to <a href="javascript:window.open('/testimonials-popup.php','','scrollbars,width=640,height=480,resizable,');"><span class="underlink">view 100+ unsolicited testimonials from our previous subscribers.</span></a>
		</li>
		<li>
			<img src="/images/members/T4582809-315x233x87.jpg" alt="Sales Staff" title="Sales Staff" width="315" height="233" style="margin-top:25px; margin-left:10px; float:right; clear:left;"/>
			<strong>Affordable:</strong> Starting at less than $300, our subscriptions cost less then a classified ad in your local news paper.  And, finding just one good rep could be the best investment your company ever makes.
		</li>
		<li>
			<strong>Guaranteed:</strong> Our service is guaranteed to work.  Our interface is perfectly designed to guarantee the initial communication between you and the sales reps of your choice.
		</li>
		<li>
			<strong>Save Time and Money:</strong> Time is money.  Our database can be searched and sorted to insure that you only spend time speaking with sales reps that meet your criteria.
		</li>
		<li><strong>Toll-Free Telephone support:</strong> We are NOT in the business of selling subscriptions.  We are in the business of helping you grow your business with independent sales reps.  Our subscription include decades of combined experience of securing and working with independent reps.</li>
	</ul>
</div>

Open in new window

0
 

Author Comment

by:jasimon9
ID: 35152432
I now believe I have the cause of the problem, and I hope this will lead me to the final solution.

In building up the page from the "bottom-up" without a template, I have discovered that the problem in IE is caused by the width atttribute on the li tags. If that is turned off in IE Developer Tools, the text in the ul wraps nicely around the image.

Interestingly, in turning off the width attribute in Chrome Developer Tools, the way the text is wrapped around the image changes somewhat, but it wraps acceptably with it either on or off.

I had been using the width on the li to control the overall width of that text on the page, as for some reason putting the width on the ul itself was not working properly as I recall.

In any case, the remaining problem is to figure out how to control the overall width without using the width on the li. Should not be too difficult!

I am wondering which browser has got it wrong. For sure, IE is the usual culprit. I am also wondering if this "bug" or "incompatibility" is recognized. I did not find anything in my original searching, but I was looking for issues with "wrap text around an image." When I search on "IE width li bug" there are a lot of articles.

As an aside, the issue had nothing to do with my complex templating, or with validation issues.

0
 

Accepted Solution

by:
jasimon9 earned 0 total points
ID: 35152464
The width attribute that was already on the containing div controls the width, and the earlier adding on the li was not even needed!

Problem solved by just removing the width!
0
 

Author Closing Comment

by:jasimon9
ID: 35178839
Super simple solution to difficult issue. Apparently a bug in IE.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now