Background Black - Behaviour in IE 7

[Victor]

Hi, I am using RADspell to spell check some textareas.
I am also using frames. The RAD spell checker is in the bottom frame.

With IE I notice that when I click on the button which activates the spell checker the background goes completely black. In Firefox I don't have the same problem.
Here are the screen shots
IE7
http://www.eyecode.ca/IE7.jpg
FireFox 3
http://www.eyecode.ca/FireFox3.jpg

Has anyone encountered this issue before?

Vic

[Serrin]

Hey Victor,

Do you have any custom CSS that may be effecting the way the iframe is displaying? 

[Victor]

Yes I do have custom css.

I use my own custom CSS files.
I also use jquery for dialog pop-ups which also use custom CSS.
Are you assuming it could be a CSS conflict?

I though it was a CSS or ID conflict error so I removed half of the HTML from the page and it worked but I can not locate the problem.

[Serrin]

If you throw your code into a code block here I'll try to help you debug where the problem is, CSS (and the billions of conflicts it causes) is one of the things I am currently working on somewhat mastering, so debugging it is definitely something I can spend some time on.  :)

[Victor]

Hi I did some more investigating and the CSS conflict is come from the CSS below:
<code>

/*GENERAL STYLES*/
body, span, p, div, td, form, li, ul, ol, address, big, blockquote, dl, dt
{font-family: Tahoma,arial,helvetica;font-Size:13px;font-weight:normal;color:Black;}

/*TAG SPECIFIC STYLES*/
body.header     {background-color:#ffffff;margin:0px;padding:4px 0px 0px 0px;color:#000000;height:100%;}
body.main       {background-color:#ffffff;margin:0px;padding:0px;background:#DCDCDC url(../img/bg_pageheader.jpg) repeat-x scroll center top;color:#000000;}
form            {margin:0px; padding:0px;}

small           {font-family: Arial,Helvetica;font-Size:10px;}
table           {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}
form            {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}
input, select   {font-family:Tahoma,arial,helvetica;font-size:14px;}
img             {border-width:0px;}

input.tiny      {font-family: Arial,Helvetica;font-Size:9px;}
input.sm        {font-family: Arial,Helvetica;font-Size:11px;}
/* TOP BANNER STYLES */
.tblbanner      {background: #222c35 url('../img/bg_banner.gif') repeat-x scroll top left;border-top:solid 1px #57656e;border-bottom:solid 1px #57656e;}


/* main table */
table.tblmain           {padding:0px; margin:0px;width:100%;height:100%;}
td.content              {padding-left:66px;padding-top:30px;width:100%;height:100%;}
table.tblspace          {padding-left:10px;}
table.tblspace tr td    {padding-top:2px;padding-bottom:2px;}
table.tblspace1 tr td   {padding-top:2px;padding-bottom:2px;}

/* text */
.txttop                 {font-family: Tahoma,arial,helvetica;color:#006633;font-size:24px;letter-spacing:1px;}
.txtheader1             {font-family: Tahoma,arial,helvetica;color:#ffffff;font-size:17px;font-weight:bold;letter-spacing:1px;}
.txtfrmtitle            {font-Size:14px;font-weight:bold;letter-spacing:1px;}
.txtred                 {color:#C16755;font-weight:bold;}
.txtfield               {font-family: Tahoma,arial,helvetica;font-Size:13px;font-weight:normal;color:Black;}

/* form tables */
.frmContainer           {border:solid 1px #e4ecfb;background-color:#d0d5dc;}
.frmContainerWhite      {border:solid 1px #e4ecfb;background-color:#ffffff;padding-top:8px;padding-bottom:8px;}
.frmTitle               {height:22px;padding-top:6px;border: solid 1px #e4ecfb;background: #8798aa url('../img/bg_tbltop.gif') repeat-x scroll top left; }
.frmItem                {padding-top:5px; padding-bottom:5px;whitewhite-space:nowrap;}

/* links */
a:hover {text-decoration:none;}
a.medactionlnk:link,a.medactionlnk:visited{font-family: Tahoma,arial,helvetica;color:#0000ee;text-decoration:none;letter-spacing:1px;}
a.medactionlnk:hover {color:white;background-color:#0000ee;text-decoration:none;}
a.lnksmall {font-family: arial,helvetica;font-Size:10px;font-weight:normal;}


.headersearch {border-bottom:solid 1px #e4ecfb;}
.item1search  {background-color:#ffffff;border-bottom:solid 1px #e4ecfb;border-left:solid 1px #e4ecfb;border-right:solid 1px #e4ecfb;}
.item2search  {background-color:#ffffff;border-bottom:solid 1px #e4ecfb;border-left:solid 1px #e4ecfb;border-right:solid 1px #e4ecfb;}
.item1search table tr td,  .item2search table tr td {padding:3px 1px;}
.headersearch table tr td {padding:0px 4px;}
.txtmed0            {font-family:Tahoma,arial,helvetica;font-size:10px;font-weight:bold;}
/***************************
***     COMMENTS       *****
****************************/
.supervisorlst{padding-bottom: 20px;width:100%;}
.supervisorlst .rounded {
    padding:0 0 0 11px;
    background: url(../img/com_tsr-l.gif) top left no-repeat;
    width:100%;
    overflow:hidden;
}
.supervisorlst .nonrounded {
    padding:0 0 0 11px;
    width:100%;
    overflow:hidden;
}
.supervisorlst .rounded .supttl {
    background: transparent url(../img/com_tsr-r.gif) top rightright no-repeat;
    padding: 0.2em 0px 0px 0px;
    margin:0px;
    text-transform: none;
    vertical-align:baselinebaseline;
}
.supervisorlst .nonrounded .nonroundedMain{
    margin:0 0 0 -11px;
    padding: 0px 33px 0.5em 33px;
    background:#fff;
    border-left: solid 1px #d8d8d8;
    border-right: solid 1px #d8d8d8;
}
/***************************
***     BUTTONS        *****
****************************/
a.butgreen, a.butgreen:visited {-moz-user-select: none;background: transparent url('../img/stylebutright2.gif') no-repeat scroll top rightright;color: #444;display: block;float: left;height: 16px;padding-right:5px; margin-right: 6px; /* sliding doors padding */ text-decoration: none;}
a.butgreen span {background: transparent url('../img/stylebutleft2.gif') no-repeat;display: block;line-height: 14px;padding: 1px 0 2px 5px;color:white;font-size:13px;font-family: Arial, Verdana, Helvetica;font-weight:bold;}
a.butgreen:hover {background: transparent url('../img/stylebutright4.gif') no-repeat scroll top rightright;text-decoration: none;}
a.butgreen:hover span {background: transparent url('../img/stylebutleft4.gif') no-repeat;color:Black;}
a.butgreen:active {background: transparent url('../img/stylebutright4.gif') no-repeat scroll top rightright;text-decoration: none;}
a.butgreen:active span {background: transparent url('../img/stylebutleft4.gif') no-repeat;}
/***************************
***     TABS           *****
****************************/
.sub-nav, .extra-nav {background: url(../img/tab-line.gif) bottombottom repeat-x;float: left;width: 100%;} /*IE6*/
.sub-nav {margin-bottom: 0em;font-size: 125%;font-weight: bold;}
.sub-nav br, .boxed br, .extra-nav br, #searchform br {clear: both;}
.sub-nav h2, .extra-nav h2, .extra-nav h3 {background: none;min-height: 15px;margin-bottom: 0;}
.extra-nav h2, .extra-nav h3 {float: left;line-height: 1.1;position: relative;top: 8px;font-size: 175%;}
.extra-nav h3 {padding-top: 0.3em;}
.sub-nav ul, .extra-nav ul {margin: 0.5em 0 0 0;padding: 0 0 0 1em;list-style: none;font-size: 85%;}
.extra-nav ul {padding-top: 2px;}
.sub-nav li, .extra-nav li {margin: 0 1px 0 0;padding: 0 5px 0 0;background: url(../img/tab-back.png) 100% -100px;float: left;border-bottom: 1px solid #bbb;text-align: center;}

.extra-nav {padding-right: 5px;}

.extra-nav li {float: rightright;}

.extra-nav h2 {float: left;border: none;}

.sub-nav li.active, .extra-nav li.active {border-bottom: 1px solid #fff;background: url(../img/tab-back.png) 100% 0;}

.sub-nav li a, .sub-nav li a:visited, .sub-nav li span, .extra-nav li a, .extra-nav li a:visited, .extra-nav li span {
    display: block;float: left;padding: 5px 11px 5px 16px;text-align: center;whitewhite-space: nowrap;background: url(../img/tab-back.png) 0 -100px;text-decoration: none;min-height: 17px; /* fixes FX/Mac issue */color: #666;}

.sub-nav li.active a,.sub-nav li.active a:visited, .sub-nav li.active span, .extra-nav li.active a, .extra-nav li.active span {background: url(../img/tab-back.png) 0 0; } /*IE6*/

.sub-nav li.sub-comments a, .sub-nav li.sub-comments a:visited, .sub-nav li.sub-comments span, .sub-nav li.sub-comments a, .sub-nav li.sub-comments span {
    background-image: url(../img/tab-back-comment.png);padding-left: 28px;
}

.sub-nav li:hover, .extra-nav li:hover {
    background-position: 100% -200px;
}

.sub-nav li:hover a, .extra-nav li:hover a {
    background-position: 0 -200px;
}

.sub-nav li.active:hover, .extra-nav li.active:hover {
    background-position: 100% 0;
}

.sub-nav li.active:hover a, .extra-nav li.active:hover a {
    background-position: 0 0;text-decoration: underline;
}

.extra-nav li a, .extra-nav li span {
    font-size: 125%;font-weight: bold;color: #666;letter-spacing: -0.02em;
}
/**********************************
***     QUESTIONS FORMAT      *****
***********************************/

.sec {padding-bottom:12px;}
.secindent {padding-left:16px;}
.tooltip
{
    padding:4px;margin:2px 0px 2px 0px;border:solid 1px #d1d1d1;background-color:#fffff0;
}
.tooltip p {color:#666666;font-size:11px;}

</code>

[Victor]

I think I found the problem, it's with this part of the CSS
.tooltip
{
    padding:4px;margin:2px 0px 2px 0px;border:solid 1px #d1d1d1;background-color:#fffff0;
}
.tooltip p {color:#666666;font-size:11px;}

Thanks for pointing me in the right direction.

Vic

[Victor]

Actually this problem is extremely weird. I don't think this is a conflict with the CSS.  There is some sort of limitation on page content length. When I remove a portion of the page (any part) it works well again.

Vic