Background Black - Behaviour in IE 7

7 posts, 0 answers
  1. Victor
    Victor avatar
    11 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

    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
  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 08 Oct 2008 Link to this post

    Hey Victor,

    Do you have any custom CSS that may be effecting the way the iframe is displaying? 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Victor
    Victor avatar
    11 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

    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.


  5. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 08 Oct 2008 Link to this post

    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.  :)
  6. Victor
    Victor avatar
    11 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

    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-familyTahoma,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:0pxpadding:0px;} 
     
    small           {font-familyArial,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-familyArial,Helvetica;font-Size:9px;} 
    input.sm        {font-familyArial,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:0pxmargin: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-familyTahoma,arial,helvetica;color:#006633;font-size:24px;letter-spacing:1px;} 
    .txtheader1             {font-familyTahoma,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-familyTahoma,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;bordersolid 1px #e4ecfb;background#8798aa url('../img/bg_tbltop.gif'repeat-x scroll top left; } 
    .frmItem                {padding-top:5pxpadding-bottom:5px;whitewhite-space:nowrap;} 
     
    /* links */ 
    a:hover {text-decoration:none;} 
    a.medactionlnk:link,a.medactionlnk:visited{font-familyTahoma,arial,helvetica;color:#0000ee;text-decoration:none;letter-spacing:1px;} 
    a.medactionlnk:hover {color:white;background-color:#0000ee;text-decoration:none;} 
    a.lnksmall {font-familyarial,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-bottom20px;width:100%;} 
    .supervisorlst .rounded { 
        padding:0 0 0 11px
        backgroundurl(../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 { 
        backgroundtransparent url(../img/com_tsr-r.gif) top rightright no-repeat
        padding: 0.2em 0px 0px 0px
        margin:0px
        text-transformnone
        vertical-align:baselinebaseline
    .supervisorlst .nonrounded .nonroundedMain{ 
        margin:0 0 0 -11px
        padding0px 33px 0.5em 33px
        background:#fff
        border-leftsolid 1px #d8d8d8
        border-rightsolid 1px #d8d8d8
    /***************************
    ***     BUTTONS        *****
    ****************************/ 
    a.butgreen, a.butgreen:visited {-moz-user-select: none;backgroundtransparent url('../img/stylebutright2.gif'no-repeat scroll top rightright;color#444;displayblock;floatleft;height16px;padding-right:5pxmargin-right6px/* sliding doors padding */ text-decorationnone;} 
    a.butgreen span {backgroundtransparent url('../img/stylebutleft2.gif'no-repeat;displayblock;line-height14px;padding1px 0 2px 5px;color:white;font-size:13px;font-familyArialVerdanaHelvetica;font-weight:bold;} 
    a.butgreen:hover {backgroundtransparent url('../img/stylebutright4.gif'no-repeat scroll top rightright;text-decorationnone;} 
    a.butgreen:hover span {backgroundtransparent url('../img/stylebutleft4.gif'no-repeat;color:Black;} 
    a.butgreen:active {backgroundtransparent url('../img/stylebutright4.gif'no-repeat scroll top rightright;text-decorationnone;} 
    a.butgreen:active span {backgroundtransparent url('../img/stylebutleft4.gif'no-repeat;} 
    /***************************
    ***     TABS           *****
    ****************************/ 
    .sub-nav, .extra-nav {backgroundurl(../img/tab-line.gif) bottombottom repeat-x;floatleft;width: 100%;} /*IE6*/ 
    .sub-nav {margin-bottom: 0em;font-size: 125%;font-weightbold;} 
    .sub-nav br, .boxed br, .extra-nav br, #searchform br {clearboth;} 
    .sub-nav h2, .extra-nav h2, .extra-nav h3 {backgroundnone;min-height15px;margin-bottom: 0;} 
    .extra-nav h2, .extra-nav h3 {floatleft;line-height: 1.1;positionrelative;top8px;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-stylenone;font-size: 85%;} 
    .extra-nav ul {padding-top2px;} 
    .sub-nav li, .extra-nav li {margin: 0 1px 0 0;padding: 0 5px 0 0;backgroundurl(../img/tab-back.png) 100% -100px;floatleft;border-bottom1px solid #bbb;text-aligncenter;} 
     
    .extra-nav {padding-right5px;} 
     
    .extra-nav li {floatrightright;} 
     
    .extra-nav h2 {floatleft;bordernone;} 
     
    .sub-nav li.active, .extra-nav li.active {border-bottom1px solid #fff;backgroundurl(../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 { 
        displayblock;floatleft;padding5px 11px 5px 16px;text-aligncenter;whitewhite-spacenowrap;backgroundurl(../img/tab-back.png) 0 -100px;text-decorationnone;min-height17px/* 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 {backgroundurl(../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-imageurl(../img/tab-back-comment.png);padding-left28px
     
    .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-decorationunderline
     
    .extra-nav li a, .extra-nav li span { 
        font-size: 125%;font-weightbold;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>
  7. Victor
    Victor avatar
    11 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

    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




  8. Victor
    Victor avatar
    11 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017