View Full Version : Strange rendering problem - seems to be IE only
djm0219
04-09-2006, 12:56 PM
I'm seeing a rather odd problem with some text rendering that only appears to show itself with IE. In the sample URL below there is text to the right of the main picture at the top left. On the initial load of the page using IE that text isn't visible (some of the time) yet if you scroll down the page or refresh it the text shows up just fine. There is also a large white block across the page with IE but only once in a while.
As you can see the page is really quite simple as is the style sheet. There is no doctype or html or body tags as this is something that is plugged into a eBay listing. As eBay doesn't use a doctype and has this deeply buried in multiple tables it was designed to work without depending on doctype. Adding doctype, body and/or html tags to this example doesn't change the problem.
The test page that shows the problem may be found here (http://martinsmtn.com/RenderProblem/) and the style sheet it uses may be found here (http://martinsmtn.com/Styles/mmc-Listings.css).
Any ideas or suggestions on how to avoid the initial missing text would be greatly appreciated.
thewillum
04-10-2006, 02:25 AM
I have no answer or solution really, but why don't you just change the text color to black. . the dark purple on light purple background is somewhat difficult to read.
khendar
04-10-2006, 02:55 AM
A rendering problem in IE only ??? Noo.. Say it aint so... :P
I think what you are seeing here is classic IE "Peekaboo" bug behaviour. Caused when you have a box containing a floating div with content along side:
http://www.positioniseverything.net/explorer/peekaboo.html
Simplest fix is to add line-height:1.2 to your #mmcPageBody properties and it magically goes away :thumbsup:
_Aerospace_Eng_
04-10-2006, 03:00 AM
@khendar While adding a line-height may be a simple fix I think the position:relative; fix is better as it still uses the browsers default rendering mode rather than setting a line-height
Wow, your code was a mess. Use this for your CSS
html, body {margin: 0; padding: 0; border: 0;}
#mmcHeader {margin: 0 auto; padding: 10px 0 5px 0; text-align: center; color: #603; background-color: #E4DAD8;}
#mmcPageBody {font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; text-align: left; color: #603; background: #E4DAD8; margin: 0 auto; padding: 0 5px 5px 0;}
#mmcMainPic {float: left; padding: 0 0 10px 0; margin: 0 15px 0 10px;}
.mmcTitle {font-size: 16px; font-weight: bold; position: relative;}
.mmcDesc {font-size: 14px; position: relative;}
.mmcDetails {clear: both;}
.mmcExtraPic {clear: both; padding: 10px 10px 0 10px;}
.mmcPolHead {clear: both; font-weight: bold; font-size: 15px; text-align: center; margin: 5px 0 5px 0;}
.mmcPolicies {font-size: 14px; color: #603; background: #F2F2F2; border: 1px #000 solid; padding: 5px; margin: 0 0 0 5px; text-align: left;}
A.mmc:link {text-decoration: none; color: #660033; background: #F2F2F2;}
A.mmc:visited {text-decoration: none; color: #660033; background: #F2F2F2;}
A.mmc:hover {text-decoration: underline; color: #555555; background: #F2F2F2;}
A.mmc:active {text-decoration: none; color: #660033; background: #F2F2F2;}
Notice the position:relative; I added to a few of your rules. This fixes the text not showing up. Its a variation of the peekaboo bug. The fix is to add position:relative; to that element. Now as far as your markup. You had no body tags, no head tags, no html tags, no doctype. These are all things you should have in your page. When using inline CSS, meaning using style="" you don't put the {} brackets in there. Try this for your HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MMC Listings</title>
<link href="Styles/mmc-Listings.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mmcHeader"><img src="Images/martinsmountainSpecial.gif"></div>
<div id="mmcPageBody">
<div id="mmcMainPic" style="background-image: url(Images/ProdPics/104657-Proto-Louise-Front1.jpg); background-repeat: no-repeat;"><img src="Images/Copyright_Martins_Mountain.gif" width="460" height="460" alt="Main Product Picture"></div>
<div class="mmcTitle">Enesco Cherished Teddies<br>LOUISE PROTOTYPE - #104657 </div>
<div class="mmcDesc">"Friends Were Meant For Times Like These"
<p>Frolic In The Forest Series</p>
<p>Year Mark: PROTOTYPE<br>Figurine: Mint *Prototypes are pre-production samples a<br>Box: None</p>
<p>Dimensions: 4 inches tall</p>
<p>An adorable Cherished Teddies figurine showing a little Teddy girl and her puppy going for a walk in the snow. Both dressed in green knitted sweaters, they are truly precious!</p>
<p>One of two 'first in series', Louise was introduced in 2002 and stands 4 inches tall.</p>
<p>A special piece for a collector of CT variations, errors and prototypes!</p>
</div>
<div class="mmcDetails"> </div>
<div class="mmcExtraPic" style="background-position: center center; background-image: url(http://martinsmtn.com/Images/ProdPics/104657-Proto-Louise-Front2.jpg); background-repeat: no-repeat;"><img class="mmcExtraPic" src="Images/Copyright_Martins_Mountain.gif" width="460" height="460" alt="Additional Product Picture"></div>
<div class="mmcPolHead">Payment Options</div>
<div class="mmcPolicies"><b>PAYMENT TYPES ACCEPTED</b>
<p>Other text goes here.</p>
<p>If you have any questions, please <b><a class="mmc" href="mailto:questions@xxxxxx.xxx">Click here to email us</a></b>. </p>
</div>
<div class="mmcPolHead">Shipping Policies</div>
<div class="mmcPolicies"><b>GENERAL SHIPPING INFORMATION</b>
<p>More text goes here.</p>
<p><b><a class="mmc" href="mailto:questions@xxxxxx.xxx">Click here to email us for additional information</a></b>.</p>
</div>
</div>
</body>
</html>
kewlceo
04-10-2006, 03:33 AM
It's easy to see why _Aerospace_Eng_ has that Helpful Member Award. :thumbsup:
djm0219
04-10-2006, 09:22 AM
Simply wonderful Aerospace. My head feels better already now that I'm not banging it against the desk or wall.
You had no body tags, no head tags, no html tags, no doctype. These are all things you should have in your page.
I know and for good reason. The test I presented is something that gets plugged into a listing on eBay and they don't use a doctype. I presented the problem as I did specifically because I knew that if it were solved it would also be solved within the eBay listing context.
When using inline CSS, meaning using style="" you don't put the {} brackets in there.
Thanks for pointing that out. I don't know where I got that nor why I was doing it but I've corrected it now.
As soon as this is posted I'm off to add a helpful member vote for Aerospace :)
orcrist
04-10-2006, 09:47 AM
ok, lol, now this one is solved i have one more ie werdnes.. on this link is (code not mine, that was b4 i got to work on that :p) footer and couple spans and a tags in it: now, last word (design) replicate itself in IE. since ive redone that page from scratch, that didnt replicated on new layout, but i cant understand why it was happening at all:
http://www.dkstudio.net/temp/jims/template.html
_Aerospace_Eng_
04-10-2006, 11:09 AM
Might sound strange but start removing your HTML comments one by one. The comments in between the floats are causing the problem. If one float goes to the right of the layout, and is not less than 3px away from it then the bug will occur. Either remove your comments or add a -3px right margin to the #copy div. It appears to have no effect on other browsers so you probably don't need to hide it from other non IE browsers but it might be a good idea just in case. Here is more info about it http://www.positioniseverything.net/explorer/dup-characters.html
I've run into this bug before, I've actually come across this article today.
djm0219
04-10-2006, 11:11 AM
That one is even stranger than mine! I see almost nothing on that page with FF and IE. Just a bit at the bottom with both browsers. Nothing jumps out at me that would seem to be causing the problem though.
orcrist
04-10-2006, 12:03 PM
things are not diplaying cos there are no things ;) cut out, i guess, this was just a phase in work..
thanks aero, comments,.. omg, id never thoght of that :) and i never met it in practice..
anyway, problem solved, and have i said not mine?!! grr :D
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.