A nasty/confusing one, here: This code looks/works fine everywhere but on IE, which creates a yucky white border in between my <iframe> and my <span>:
<!-- m --><a class="postlink" href="http://www.awakenthemagic.com/inspire/tawt42day.jsp">http://www.awakenthemagic.com/inspire/tawt42day.jsp</a><!-- m -->
Code is basically this nesting:
<div id="whatText1" style="position:absolute; width:556px; height:300px; z-index:9; left: 204px; top: 326px; background-color:#000000;" class="quotetext_">
<iframe name="quote" src= <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"/servlet/RandRec" width="530px" height="280px" scrolling="no" frameborder="1" style="background:#000000;">
<!-- This is spit out by the servlet -->
<span style="position:absolute; width:495px; height:280px; z-index:9; font-family: Papyrus, Georgia, 'Times New Roman', Times, serif; font-size: 15px; color:#FFFF00; background: black; margin: 0px 0px 0px 0px; padding: 0px 20px 0px 20px;">
Ideal would be a way to rewrite this via some trick so that the nested boxes render the same on all the browsers--especially the width. (FF, Netscape, Safari all behave one way, and IE another.) Anyone have some pointers/incantations to share that would make this render cleanly and uniformly on all browsers?
Barring that, I've determined that the IE white bar symptom of this problem is due to the default background color being white in IE: It inherits down over my CSS (despite all my attempts to override it). So, a workaround hack to get CSS to override the browser's default background color (in this somewhat bizarre scenario) would be the next best thing....
ADthanksVANCE!Make the content of the iframe a complete document, then remove it's margin etc..Thanks so much, Fang! It broke the rest of the page on Mac IE, but seemed to do the trick on all other browsers.
Rich
<!-- m --><a class="postlink" href="http://www.awakenthemagic.com/inspire/tawt42day.jsp">http://www.awakenthemagic.com/inspire/tawt42day.jsp</a><!-- m -->
Code is basically this nesting:
<div id="whatText1" style="position:absolute; width:556px; height:300px; z-index:9; left: 204px; top: 326px; background-color:#000000;" class="quotetext_">
<iframe name="quote" src= <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"/servlet/RandRec" width="530px" height="280px" scrolling="no" frameborder="1" style="background:#000000;">
<!-- This is spit out by the servlet -->
<span style="position:absolute; width:495px; height:280px; z-index:9; font-family: Papyrus, Georgia, 'Times New Roman', Times, serif; font-size: 15px; color:#FFFF00; background: black; margin: 0px 0px 0px 0px; padding: 0px 20px 0px 20px;">
Ideal would be a way to rewrite this via some trick so that the nested boxes render the same on all the browsers--especially the width. (FF, Netscape, Safari all behave one way, and IE another.) Anyone have some pointers/incantations to share that would make this render cleanly and uniformly on all browsers?
Barring that, I've determined that the IE white bar symptom of this problem is due to the default background color being white in IE: It inherits down over my CSS (despite all my attempts to override it). So, a workaround hack to get CSS to override the browser's default background color (in this somewhat bizarre scenario) would be the next best thing....
ADthanksVANCE!Make the content of the iframe a complete document, then remove it's margin etc..Thanks so much, Fang! It broke the rest of the page on Mac IE, but seemed to do the trick on all other browsers.
Rich