The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
Text Elements fail to wrap floating image in IE only
Discuss Text Elements fail to wrap floating image in IE only in the CSS Help forum on Dev Shed.
Text Elements fail to wrap floating image in IE only Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
October 15th, 2012, 01:55 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
|
Text Elements fail to wrap floating image in IE only
I recently built a website for a friend and the pages render as planned in Firefox and Chrome, but IE is giving me a hard time with the floating images and paragraphs of text which should be rendered adjacent to the images.
IE fails to place text adjacent to the floating images and stacks all the elements individually. It's particularly annoying on the page linked above, but is a problem throughout the site.
CSS is organized alphabetically.
HTML and CSS both validate with W3C tools.
Tables are places with a master div for the purpose of centering page in browser.
Any pointers on what is causing the problem would be greatly appreciated along with suggestions of best way to fix it.
It strikes me that there may be some inheritance dilemma in the CSS, but I don't see it.
Thanks!
Since I am unable to post links, copies of the web page and
style sheet follow.
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
">
<!-- html>
<head>
<META http-equiv="Content-Type" content="text/html: charset=ISO-8859-1">
<meta name="robots" content="noarchive">
<meta name="description" content="Frequently asked questions about training and personal trainers.">
<meta name="keywords" content="personal training FAQ, training questions and answers, Diabetes and training, weight loss and training">
<title>Frequently Asked Question</title>
<!-- CREATED 09/20/12 LAST UPDATED 10/15/12 -->
<link rel=stylesheet type="text/css"
href="css/jmst.css">
</head>
<body class="ALL">
<!-- Provide mechanism for centering content on document -->
<div class="PAGE">
<!-- Create primary table with dimensional border -->
<table class="PRIMARY">
<tr>
<td><center>
<!-- Start of HEADER class table -->
<table class="HEADER">
<tr>
<td>
<H1 class="JAMIE">Jamie Specialist</H1>
<H2 class="LOCATIONS">Individualized </H2>
</td>
</tr>
</table>
<!-- End of HEADER class table -->
<H4 class="PAGETITLE">FAQ and Answers</H4>
<!-- Start of COPY class table -->
<table class="COPY">
<tr>
<td>
<img class="FAQ1" src="images/FAQ1rctb.gif" alt="">
<p class="QUESTION">I have
<p class="ANSWER">In general...
<p class="QUESTION">I've
<p class="ANSWER">I recommend
<img class="FAQ2" src="images/FAQ2rctb.gif" alt="">
<p class="ANSWER">It can also
<p class="QUESTION">I was re
<p class="ANSWER">Eating a healthy,
<p class="ANSWER">Burning plenty of that.
<p class="QUESTION">Is it bette
<p class="ANSWER">The idea th
<p class="ANSWER">Does that mean
<img class="FAQ3" src="images/FAQ3tb.gif" alt="">
<p class="QUESTION">Is it worth the
<p class="ANSWER">The answer to
<p class="ANSWER">If you're
<p class="QUESTION">It appears
<p class="ANSWER">I'm sorry
<p class="QUOTE">If hunger is not the problem, eating is not the solution
</td>
</tr>
</table>
<!-- End of COPY class table -->
</center>
</td>
</tr>
</table>
<!-- End of visible document information -->
</div>
</body>
</html -->
CSS
Code:
/* CASCADING STYLE SHEET FOR WEB PAGES */ s
/* Created 09/20/2012 Last Amended/Updated 10-15-2012 */
/* Code Checked by W3C CSS Validation Service on 10-8-2012 Ultimately Validated without Errors CSS 2.1 */
/* BODY PROPERTIES */
BODY {
margin: 0;
padding: 0
}
BODY.ALL {
width: 100%;
height: 100%;
background-color: #D2B48C;
margin: 0;
border: 0;
padding: 0
}
BODY.CONTACT {
width: 650px;
height: 700px;
background-color: #D2B48C;
margin-top: 15px;
margin-right: 5%;
margin-bottom: 0;
margin-left: 5%;
padding: 0px
}
/* ANCHOR PROPERTIES */
A.plain:link, A.plain:active {color: #000080}
A:link {color: #000080}
A:visited {color: #6666B3} /* #4D4DA6} */
A:active {color: #FF0000; font-weight: 500}
A.fancy:visited {color: #6666B3; font-weight: 400}
A.fancy:active {color: #FF0000; font-weight: 500}
A.QUIET {
color: #00004D;
font-style: normal;
font-weight: 600;
font-size: medium;
font-family: Helvetica, Verdana, sans-serif;
letter-spacing: 1px;
text-decoration: none
}
A.WEBSITE {
font-style: normal;
font-weight: 500;
font-size: medium;
font-family: Helvetica, Verdana, sans-serif;
letter-spacing: 1px
}
/* DIV PROPERTIES */
DIV {
margin: 0;
padding: 0
}
DIV.PAGE {
background-color: #D2B48C;
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto
}
/* FONT PROPERTIES */
FONT.AUTHOR {
font-style: normal;
font-weight: 500;
font-size: medium;
font-family: Helvetica, Verdana, sans-serif;
letter-spacing: 1px
}
FONT.BITAL {
font-style: oblique;
font-weight: 600;
letter-spacing: 1px
}
FONT.BOLD {
font-weight: 700
}
FONT.BOOKTITLE {
font-style: oblique;
font-weight: 600;
font-size: medium;
font-family: Helvetica, Verdana, sans-serif;
letter-spacing: 2px
}
FONT.ITAL {
font-style: italic;
font-weight: 400;
letter-spacing: 1px
}
FONT.QUOTE {
font-style: oblique;
font-weight: 600;
font-size: large;
font-family: Helvetica, Verdana, sans-serif;
letter-spacing: 2px
}
FONT.PLINK {
color: #000080;
font-weight: 600;
font-size: 105%;
letter-spacing: 1px
}
FONT.LINKS {
font-style: oblique;
font-weight: 500;
font-size: large;
line-height: 1.3;
font-family: Futura, Helvetica, Verdana, sans-serif;
letter-spacing: 1px
}
FONT.RED {
color: #FF0000;
font-weight: 500
}
FONT.SMALL {
font-style: normal;
font-weight: 500;
font-size: 66%;
letter-spacing: 1px
}
FONT.SMITAL {
font-style: italic;
font-weight: 400;
font-size: 75%;
letter-spacing: 1px
}
FONT.SUB {
text-align: center;
font-style: normal;
font-weight: 300;
font-size: x-small;
line-height: 1.2
}
FONT.UNDLNI {
font-style: italic;
font-weight: 500;
text-decoration: underline;
letter-spacing: 1px
}
FONT.UNDLNB {
font-weight: 600;
text-decoration: underline;
word-spacing: 1px
}
/* RULE PROPERTIES */
HR.TAN {
background-color: #E2D4BA;
text-align: center;
color: #7E6C54;
height: 2px;
border-style: solid;
width: 60%;
}
HR.NAVY {
background-color: #6666B3;
text-align: center;
color: #00004D;
height: 1px;
border-style: solid;
width: 60%;
}
/* HEADLINE PROPERTIES */
H2.LOCATIONS {
text-align: center;
word-spacing: 4px;
letter-spacing: 1px;
background-color: #E4D2BA;
color: #937E62;
font-weight: 500;
font-size: medium;
line-height: 1.2;
font-family: Helvetica, Verdana, sans-serif;
padding: 10px;
white-space: nowrap
}
H1.JAMIE {
text-align: center;
word-spacing: 5px;
letter-spacing: 2px;
background-color: #E4D2BA;
color: #695A46;
font-weight: 700;
font-size: large;
line-height: 1.2;
font-family: Helvetica, Verdana, sans-serif;
vertical-align: middle;
padding: 12px;
white-space: nowrap
}
H3.CONTACT {
text-align: center;
word-spacing: 4px;
letter-spacing: 2px;
color: #544838;
font-weight: 600;
font-size: medium;
line-height: 1.05;
font-family: Helvetica, Verdana, sans-serif;
margin-top: 8px;
margin-bottom: 8px
}
H1, H2, H3, H4 {
line-height: 1.1;
margin-bottom: 0
}
H4.SECTION {
text-align: left;
word-spacing: 3px;
letter-spacing: 1px;
color: #2A241C;
font-weight: 600;
font-size: large;
line-height: 1.2;
font-family: Verdana, Helvetica, Futura, sans-serif;
padding: 0;
margin-top: 5px;
margin-bottom: 5px
}
H4.PAGETITLE {
text-align: center;
word-spacing: 5px;
letter-spacing: 2px;
color: #2A241C;
font-weight: 800;
font-size: x-large;
line-height: 1.2;
font-family: Verdana, Helvetica, Futura, sans-serif;
padding: 0px;
margin-top: 20px;
margin-bottom: 20px
}
/* PARAGRAPH PROPERTIES */
P {
width: 100%;
clear: none;
color: #00004D;
font-weight: 300;
font-size: medium;
font-family: sans-serif;
vertical-align: top;
text-align: left;
text-indent: 0;
margin: 0;
padding: 0
}
P.ANSWER {
font-weight: 400;
font-size: medium;
line-height: 1.1;
font-family: Helvetica, Verdana, Univers, sans-serif;
vertical-align: top;
text-align: justify;
text-indent: 0;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 1px;
margin-left: 15px
}
P.BLOG {
font-style: normal;
font-weight: 500;
font-size: medium;
font-family: cursive;
letter-spacing: 1px;
text-decoration: none;
line-height: 1.1;
vertical-align: baseline;
text-align: left;
text-indent: 0;
margin-top: 7px;
margin-right: 10px;
margin-bottom: 3px;
margin-left: 10px
}
P.COPY {
width: 90%;
font-weight: 400;
font-size: medium;
line-height: 1.1;
font-family: Helvetica, Verdana, Univers, sans-serif;
letter-spacing: 1px;
vertical-align: top;
text-align: justify;
text-indent: 1.5em;
margin-top: 8px;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto
}
P.COPYDECL {
text-indent: 0em;
text-align: center;
font-weight: 400;
font-size: x-small;
font-family: Verdana, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 8px
}
P.ERROR {
clear: both;
width: 70%;
color: #FF0000;
font-style: oblique;
font-weight: 600;
font-size: large;
line-height: 1.25;
font-family: Helvetica, Verdana, Univers, sans-serif;
letter-spacing: 1px;
word-spacing: 3px;
text-align: center;
text-indent: 0em;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
border-width: 6px;
border-style: inset;
border-color: #E8DAC6;
padding: 15px;
white-space: nowrap
}
P.QUESTION {
clear: none;
font-style: italic;
font-weight: 600;
font-size: medium;
line-height: 1.05;
font-family: Univers, Helvetica, Verdana, sans-serif;
vertical-align: top;
text-align: left;
text-indent: 0;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px
}
P.QUOTE {
clear: both;
width: 70%;
font-style: oblique;
font-weight: 600;
font-size: large;
line-height: 1.10;
font-family: Helvetica, Verdana, Univers, sans-serif;
text-align: center;
text-indent: 0em;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
border-width: 4px;
border-style: inset;
border-color: #E8DAC6;
padding: 12px;
white-space: nowrap
}
P.RESOURCE {
line-height: 1.1;
vertical-align: top;
text-align: left;
text-indent: 0;
margin-top: 7px;
margin-right: 10px;
margin-bottom: 3px;
margin-left: 10px
}
P.TESTIMONIAL {
font-weight: 400;
font-size: medium;
line-height: 1.1;
font-family: Helvetica, Verdana, Univers, sans-serif;
vertical-align: top;
text-align: justify;
text-indent: 2.5em;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 1px;
margin-left: 10px
}
P.TSOURCE {
font-style: italic;
font-weight: 600;
font-size: medium;
line-height: 1.0;
font-family: Univers, Helvetica, Verdana, sans-serif;
vertical-align: top;
text-align: right;
text-indent: 0;
margin-top: 1px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px
}
P.SITELINKS {
text-indent: 0;
text-align: center;
font-weight: 300;
font-size: small;
font-family: Verdana, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 8px;
white-space: nowrap
}
/* IMAGE PROPERTIES */
IMG {
vertical-align: top;
float: none;
border: 0;
padding: 0
}
IMG.FAQ1 {
width: 424px;
height: 283px;
float: right;
clear: none;
vertical-align: top;
border: 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 15px
}
IMG.FAQ2 {
width: 425px;
height: 282px;
float: left;
clear: none;
vertical-align: top;
border-width: 0;
border-style: none;
padding-top: 10px;
padding-left: 0;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 0
}
IMG.FAQ3 {
width: 319px;
height: 212px;
float: right;
clear: none;
vertical-align: top;
border: 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 15px
}
IMG.INLINE {
float: none;
vertical-align: top;
border: 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0
}
IMG.INLINE-L {
float: left;
vertical-align: top;
border-width: 0;
border-style: none;
padding-top: 10px;
padding-left: 0;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 0
}
IMG.INLINE-R {
float: right;
vertical-align: top;
border: 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 15px
}
IMG.CONTACT {
float: right;
background-color: #D2B48C;
border-color: #7E6C54;
border-style: ridge;
border-width: 4px;
padding: 7px
}
/* TABLE AND TABLE ELEMENT BACKGROUNDS */
TABLE {
vertical-align: top;
margin: 0;
padding: 0;
background-color: #D2B48C
}
TABLE.ADDENDA {
width: 100%;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto
}
TABLE.COPY {
width: 90%;
text-align: left;
vertical-align: top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 15px;
padding-left: 15px
}
TABLE.HEADER {
width: 90%;
background-color: #E4D2BA;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-width: 6px;
border-color: #D2B48C;
border-style: outset;
padding: 0;
}
TABLE.INSET {
width: 90%;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 5px;
background-color: #D2B48C;
}
TABLE.LINKS {
width: 100%;
background-color: #D2B48C;
padding: 0px
}
TABLE.MAILFORM {
color: #000080;
font-weight: 400;
font-size: medium;
line-height: 1.1;
font-family: Helvetica, Verdana, Univers, sans-serif;
text-align: left;
background-color: #D2B48C;
margin-top: 25px;
margin-right: 25px;
margin-bottom: 0;
margin-left: 25px;
padding: 10px
}
TABLE.PRIMARY {
width: 100%;
height: 100%;
background-color: #D2B48C;
margin-top: 15px;
margin-right: auto;
margin-bottom: 25%;
margin-left: auto;
padding: 0px
}
TABLE.THANKYOU {
width: 100%;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto
}
TD {
margin: 0;
padding: 0
}
TD.MAILFORM {
width: 50%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 15px;
text-align: left;
vertical-align: baseline
}
TR {
margin: 0;
padding: 0
}
/* END */
Last edited by Kravvitz : October 15th, 2012 at 04:39 PM.
Reason: added [code] tags
|
October 15th, 2012, 02:31 PM
|
|
|
|
You've got quite the coding style, there. You're doing a lot of things that don't follow best practices, and a lot of things that may not technically be wrong, but I wouldn't recommend. The biggest one of course is laying your page out in tables, which is going to cause all sorts of issues in the long run.
But I digress.
The culprit seems to be you have a bad doctype which IE is choking on. If you want to use the HTML 4 Transitional doctype, try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Or you could just use the HTML5 doctype, which is simply: <!doctype html>
|
October 15th, 2012, 04:38 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Welcome to DevShed Forums, The Other John. 
To add to what rdoyle said, you should change "<!-- html>" to "<html>" and "</html -->" to "</html>".
Out of curiosity, would you mind explaining why you decided to use all uppercase for most of the class names? It's quite unusual.
Quote: | Originally Posted by rdoyle720 The culprit seems to be you have a bad doctype which IE is choking on. |
I wouldn't use the word "choking" in this context. The doctype he is using is just not one of the ones that triggers "standards mode" (or "almost standards mode").
P.S. The Other John, it would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
|
October 15th, 2012, 07:25 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
Quote: | Originally Posted by rdoyle720 You've got quite the coding style, there. You're doing a lot of things that don't follow best practices, and a lot of things that may not technically be wrong, but I wouldn't recommend. The biggest one of course is laying your page out in tables, which is going to cause all sorts of issues in the long run.
But I digress.
The culprit seems to be you have a bad doctype which IE is choking on. If you want to use the HTML 4 Transitional doctype, try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "( this is blocked by the house software )">
Or you could just use the HTML5 doctype, which is simply: <!doctype html> |
rd720
Thanks for the compliment on my coding style.  It works for me by helping to keep the tables separated.
Thanks for the suggestion. Actually, the real page includes the ""Traditional//EN... loose.dtd" statement, but since I'm a newbie, the house software stripped out the url as I am unable to post urls yet. As you see, it stripped out the part you posted when answering me.
Since I long ago learned to create nested tables that were individual in style, they have worked well for me.
|
October 15th, 2012, 07:43 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
Kravvitz,
Thanks for the kind word of welcome and adding the . The
Code:
<!-- html> comment marks </html -->
were added to prevent somebody's browser from parsing what I had pasted in and chopped up.
To answer your question, since both html and css are case insensitive, my coding style came about to help me see obvious errors more easily and help me prevent them. Using all CAPS class names makes them show up on the screen more easily.
That's all.
So, between the three of us, have we come up with anything new? Any other ideas based on the HTML code or css that strikes you as defective or headache inducing from IE's POV?
I would have sent you to the site but I am prohibited.
Last edited by Kravvitz : October 15th, 2012 at 07:57 PM.
Reason: must we quote the whole post? :p
|
October 15th, 2012, 08:04 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Which versions of IE are you testing in? IE9? IE8? Older ones?
The forum system automatically converts the angle brackets into "& gt;" and "& lt;", so you don't need to worry about that. It wouldn't have worked though because you have other comments in the page.
As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
You should really avoid using <font> elements. CSS is a much better alternative. This is rather old, but much of what it says is relevant -- What's wrong with the FONT element?
Quote: | To answer your question, since both html and css are case insensitive, my coding style came about to help me see obvious errors more easily and help me prevent them. Using all CAPS class names makes them show up on the screen more easily. |
Do you not use a text editor that has syntax highlighting? Or do you use that in addition to it?
|
October 15th, 2012, 09:02 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
Quote: | Originally Posted by Kravvitz Which versions of IE are you testing in? IE9? IE8? Older ones?
You should really avoid using <font> elements. CSS is a much better alternative.
Do you not use a text editor that has syntax highlighting? Or do you use that in addition to it? |
Thanks for your reply Kravvitz
I tested in IE 9 and IE 6 (whoa!). My guess is that there is some bad code in the IE base code that is not interpreting the CSS the way it is written. That's why it works fine in Firefox v2.0 and up, and Google Chrome.
<font> elements are always used very sparingly and in a css
way anyhow, e.g., <font class="BOLD"> etc.
As for text editors, I started coding HTML in monochrome with a great old text editor. Now use one with syntax highlighting, but never saw a need to change my coding style. The benefit is it shows up even better in color! 
|
October 15th, 2012, 11:05 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
Not many people still test in IE6 and FF2.
It seems you've run into IE's hasLayout feature (IE8+ don't have this in their latest rendering modes, just in their IE5.5 and IE7 emulation modes). To understand what hasLayout is, read this: http://reference.sitepoint.com/css/haslayout
In this case, you can simply remove the "width:100%" declaration from the "P" rule.
By the way, the "vertical-align" property only applies to inline elements and table-cells and is ignored on floated elements. Therefore it won't have an affect on the paragraphs.
Quote: | Originally Posted by The Other John <font> elements are always used very sparingly and in a css
way anyhow, e.g., <font class="BOLD"> etc. |
Ok, it could be worse then. However, it's time you use better elements. For example, <em> to mark up emphasized text (it's italicized by default but I often make it bold instead), the <strong> element to mark up strongly emphasized text (it's bold by default), or the good ol' <span> element for text that you want to style when there's no more appropriate element (it has no default style since it's designated as being semantically generic).
|
October 16th, 2012, 12:02 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
|
Stranger than Fiction? Of course; it's Microsoft!
Kravvitz,
Thanks once again for the links and discussion of IE and its many, many faults. After noting how a solution was not easily forthcoming to this problem, I did a little further research and find the problem I am experiencing is an inherited code problem common to virtually all IE versions, post IE6, and manifests itself in a variety of ways. There are many hacks and workarounds to attempt to control IE's failures, but I'm not sure adding a lot of extra code really solves the problem so my solution is to provide a link to Firefox and a recommendation to IE users to "get with it" if they are seeing layout problems.
I appreciate your comments on reforming my coding as I have not been a user of <em> and <strong> in the past, but will look into them and try to do better in the future.
After having read a number of the articles on containment failures in IE, I am going to take another look at my structure and see if the problem can be fixed with some judicious clearing. If it's possible, I'll post a SOLVED reply at the end of the thread and explain what I did, together with links to the site and CSS.
I will also drop the CSS "width: 100%;" declaration for <p>aragraphs and see if that has any effect.
The ultimate solution is that although I may not have done everything in a right and robust manner, I may not have done anything wrong, which explains why the W3C checking tools passed my code, and the two standards-based browsers render as intended.
Thanks again!
The Other John
|
October 16th, 2012, 01:23 PM
|
|
Registered User
|
|
Join Date: Oct 2012
Posts: 7
Time spent in forums: 2 h 50 m 36 sec
Reputation Power: 0
|
|
|
Problem Solved
Apparently IE follows formatting instructions without regard to what has gone before. The IE problem was rendered moot by eliminating from the CSS "width" declarations for two classes of paragraph used in juxtaposition to floated images.
They were:
P {
width: 100%;
more decs
}
P.COPY {
width: 90%;
more decs
}
Both were removed and the problem went away.
No other code changes were required or made.
Thanks again for your help Kravvitz!
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
