Link to home
Start Free TrialLog in
Avatar of cgray1223
cgray1223

asked on

Internet Explorer CSS height issue

Hello,

I'm using the jquery ui dialog window and it's using the css below.  For some reason the dialog box is shrunk and doesn't display all the form fields and adds scrolling to the window only in Internet Explorer. Firefox, Safari and Chrome all display the dialog window properly.  Below is the CSS at runtime, any suggestions?

CSS:
element.style {
display:block;
height:auto;
left:364px;
outline:0 none;
overflow:hidden;
position:absolute;
top:67.5px;
width:300px;
z-index:1002;
}
Avatar of Shahid Thaika
Shahid Thaika
Flag of India image

Handling height is different in IE and it does not support CSS formatting such as min-height. Can you post the entire CSS here for better analysis. You may want to try to set the height as a percent. In addition, do not forget to set height for the html.

html,body,body form
{
height:100%;
}


"body form" is only needed for asp.net generated html pages.
If we could see the HTML markup also it may have something to do with the content in the layer. For example floated divs might need to be cleared.
Avatar of Gene_Cyp
Gene_Cyp

Hi cqray, eeshah has already answered your question, I just want to add something for you to keep in mind down the road.
W3C is the organisation that sets the web standards such as CSS.
Firefox, Chrome, Netscape, Opera and Safari mostly adhere to the same kind of layout, with some exceptions.
IE, even though it adheres to a lot of the standards it still has some differences in the layout, caused by the fact that it uses a completely different engine. (the trident engine that MS also uses for Windows Explorer). So, expect to have problems in the layout.
First step is for you to check out this link:
 http://www.w3.org/TR/CSS2/box.html
And also, in general have the link below bookmarked for quick reference:
http://www.w3.org/TR/CSS2/ 
Avatar of cgray1223

ASKER

Its the height: 300 that is causing the issue.  When I have it specified in the param list of the dialog window IE shrinks the window

css:
element.style {
display:block;
height:auto;
left:364px;
outline:0 none;
overflow:hidden;
position:absolute;
top:67.5px;
width:300px;
z-index:1002;
}
.ui-draggable, .ui-droppable {
background-position:left top;
}
demos.css (line 204)
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px;
}
ui.theme.css (line 229)
.ui-widget-content {
background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
border:1px solid #AAAAAA;
color:#222222;
}
ui.theme.css (line 11)
.ui-widget {
font-family:Verdana,Arial,sans-serif;
font-size:1.1em;
}
ui.theme.css (line 9)
.ui-dialog {
padding:0.2em;
position:relative;
width:300px;
}
ui.dialog.css (line 3)
Inherited frombody
body {
font-size:62.5%;
}
contact_us.htm (line 19)
body {
font-family:"Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
}
demos.css (line 12)
body {
font-size:62.5%;
}

dialog code:
$("#dialog").dialog({
                  bgiframe: true,
                  autoOpen: false,
                  height: 300,
                  resizable: false,
                  modal: true,
                  buttons: {
                        'Add': function() {
                              var bValid = true;
                              allFields.removeClass('ui-state-error');
                              bValid = bValid && checkLength(firstname,"First Name",1,30);                              
                              bValid = bValid && checkLength(lastname,"Last Name",1,50);
                              bValid = bValid && checkRegexp(firstname,/^([0-9a-zA-Z])+$/,"First Name may consist of a-z 0-9");
                              bValid = bValid && checkRegexp(lastname,/^([0-9a-zA-Z])+$/,"Last Name may consist of a-z 0-9");
                              bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Invalid Email (eg. musicopus1@gmail.com)");
                              if (bValid) {
                                    $('#users tbody').append('<tr>' +
                                          '<td>' + firstname.val() + '</td>' +
                                          '<td>' + email.val() + '</td>' +
                                          '<td>' + lastname.val() + '</td>' +
                                          '</tr>');                                           
                                    $.post("joinmailingdb.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() }, function(data) {
                            $("#div2update").html(data);
                                          $("#div2update").dialog("open");
                                          setTimeout('$("#div2update").dialog("close")',4000);
                                    });
                                    $(this).dialog('close');      
                              }
                        },
                        Cancel: function() {
                              $(this).dialog('close');
                        }
                  },
                  close: function() {
                        allFields.val('').removeClass('ui-state-error');
                  }
            });
Thanks for the responses, much appreciated.  I am setting the body height, here is my html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Opus1 - Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="shortcut icon" href="opus1.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css">
<link type="text/css" href="jqueryui/css/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
      <script type="text/javascript" src="jqueryui/ui/ui.core.js"></script>
      <script type="text/javascript" src="jqueryui/ui/ui.draggable.js"></script>
      <script type="text/javascript" src="jqueryui/ui/ui.resizable.js"></script>
      <script type="text/javascript" src="jqueryui/ui/ui.dialog.js"></script>
      <script type="text/javascript" src="jqueryui/ui/effects.core.js"></script>
      <script type="text/javascript" src="jqueryui/ui/effects.highlight.js"></script>
      <script type="text/javascript" src="jqueryui/ui/jquery.bgiframe.js"></script>
      <link type="text/css" href="jqueryui/css/demos.css" rel="stylesheet" />
<style type="text/css">
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain {  width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
            .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
      </style>
      <script language="JavaScript" type="text/javascript">
      $(document).ready(function() {      
            $("#div2update").dialog({autoOpen:false});      
            var firstname = $("#firstname"),
                  email = $("#email"),
                  lastname = $("#lastname"),
                  allFields = $([]).add(firstname).add(email).add(lastname),
                  tips = $("#validateTips");
            function updateTips(t) {
                  tips.text(t).effect("highlight",{},1500);
            }
            function checkLength(o,n,min,max) {
                  if ( o.val().length > max || o.val().length < min ) {
                        o.addClass('ui-state-error');
                        updateTips(n + " must not be empty.");
                        return false;
                  } else {
                        return true;
                  }
            }
            function checkRegexp(o,regexp,n) {
                  if ( !( regexp.test( o.val() ) ) ) {
                        o.addClass('ui-state-error');
                        updateTips(n);
                        return false;
                  } else {
                        return true;
                  }
            }
            $("#dialog").dialog({
                  bgiframe: true,
                  autoOpen: false,
                  resizable: false,
                  modal: true,
                  buttons: {
                        'Add': function() {
                              var bValid = true;
                              allFields.removeClass('ui-state-error');
                              bValid = bValid && checkLength(firstname,"First Name",1,30);                              
                              bValid = bValid && checkLength(lastname,"Last Name",1,50);
                              bValid = bValid && checkRegexp(firstname,/^([0-9a-zA-Z])+$/,"First Name may consist of a-z 0-9");
                              bValid = bValid && checkRegexp(lastname,/^([0-9a-zA-Z])+$/,"Last Name may consist of a-z 0-9");
                              bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Invalid Email (eg. musicopus1@gmail.com)");
                              if (bValid) {
                                    $('#users tbody').append('<tr>' +
                                          '<td>' + firstname.val() + '</td>' +
                                          '<td>' + email.val() + '</td>' +
                                          '<td>' + lastname.val() + '</td>' +
                                          '</tr>');                                           
                                    $.post("joinmailingdb.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() }, function(data) {
                            $("#div2update").html(data);
                                          $("#div2update").dialog("open");
                                          setTimeout('$("#div2update").dialog("close")',4000);
                                    });
                                    $(this).dialog('close');      
                              }
                        },
                        Cancel: function() {
                              $(this).dialog('close');
                        }
                  },
                  close: function() {
                        allFields.val('').removeClass('ui-state-error');
                  }
            });
            $('#create-user').click(function() {
                  $('#dialog').dialog('open');
                  $("input:text:visible:first").focus();
            })
            .hover(
                  function(){
                        $(this).addClass("ui-state-hover");
                  },
                  function(){
                        $(this).removeClass("ui-state-hover");
                  }
            ).mousedown(function(){
                  $(this).addClass("ui-state-active");
            })
            .mouseup(function(){
                        $(this).removeClass("ui-state-active");
            });
      });
      </script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>
<body bgcolor="#FFBFEF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/nav_program_on.gif','images/nav_reg_on.gif','images/nav_studio_on.gif','images/nav_gallery_on.gif','images/nav_event_on.gif','images/nav_employment_on.gif')">
<table width="950" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/bg.gif" valign="top"><table width="950" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="3" class="bodytext"><a href="index.htm"><img src="images/blank.gif" width="950" height="144" border="0"></a></td>
        </tr>
        <tr>
          <td colspan="10" background="images/f2.gif" class="bodytext"><table width="925" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="63"><img src="images/blank.gif" width="59" height="14"></td>
                <td width="53"><a href="index.html" onMouseOver="MM_swapImage('home','','images/nav_home_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_home_off.gif" alt="Home" name="home" width="37" height="61" border="0" id="home"></a></td>
                <td width="78"><a href="program.htm" onMouseOver="MM_swapImage('program','','images/nav_program_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_program_off.gif" alt="Program" name="program" width="71" height="61" border="0" id="program"></a></td>
                <td width="95"><a href="registration.php" onMouseOver="MM_swapImage('registration','','images/nav_reg_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_reg_off.gif" alt="Registration" name="registration" width="87" height="61" border="0" id="registration"></a></td>              
                <td width="117"><a href="policy.htm" onMouseOver="MM_swapImage('policy','','images/nav_studio_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_studio_off.gif" alt="Studio Policy" name="policy" width="107" height="61" border="0" id="policy"></a></td>
                <td width="100"><a href="employment.htm" onMouseOver="MM_swapImage('employment','','images/nav_employment_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_employment_off.gif" alt="Employment" name="employment" width="91" height="61" border="0" id="employment"></a></td>
                <td width="61"><a href="gallery.htm"  onMouseOver="MM_swapImage('Gallery','','images/nav_gallery_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_gallery_off.gif" alt="Gallery" name="Gallery" width="56" height="61" border="0" id="Gallery"></a></td>
                <td width="58"><a href="events.htm" onMouseOver="MM_swapImage('events','','images/nav_event_on.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/nav_event_off.gif" alt="Events" name="events" width="53" height="61" border="0" id="events"></a></td>
                <td width="73"><img src="images/nav_contact_on.gif" alt="Contact Us" name="Contact" height="61" border="0" id="Contact"></td>
                <td width="96">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="122"><img src="images/blank.gif" width="122" height="390"></td>
          <td valign="top"><img src="images/blank.gif" width="711" height="10">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="header1">&nbsp;</td>
                <td width="20" class="header1">&nbsp;</td>
                <td class="header1">&nbsp;</td>
              </tr>
              <tr>
                <td width="200" class="header1">CONTACT US</td>
                <td class="header1">&nbsp;</td>
                <td class="header1">&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                        
              </tr>
                     <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                        
              </tr>
                    <tr>
                    <td><a id="create-user" class="ui-button ui-state-default ui-corner-all">Join Our Mailing List</a></td>
                    </tr>
                    <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                        
              </tr>
                     <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                        
              </tr>
              <tr>                         
                <td class="bodytext" valign="top"><img src="images/pic12_on.jpg" width="150" height="100"></td>
                <td class="bodytext">&nbsp;</td>
                <td class="bodytext">
                              <table>
                                <tr>
                                   <td width="142" valign="top" class="bodytext"><strong>Address :</strong></td>
                                  <td width="337" class="bodytext"><p><strong>Opus 1 Music Studio</strong><br>2800 W. Bayshore Rd.<br>Palo Alto 94303</p></td>
                                </tr>
                                <tr>
                                   <td class="bodytext" colspan="2"><img src="images/map.jpg"></td>
                                </tr>                  
                                <tr>
                                   <td valign="top" class="bodytext"><strong>Contact Persons:</strong></td>
                                     <td class="bodytext">Doris N / Sici T</td>
                                </tr>
                                <tr>
                                   <td valign="top" class="bodytext"><strong>E-mail :</strong></td>
                                     <td class="bodytext"><a href="mailto:Musicopus1@gmail.com">musicopus1@gmail.com</a></td>
                                </tr>
                                <tr>
                                  <td valign="top" class="bodytext"><strong>Phone:</strong></td>
                                  <td class="bodytext">(408) 821-5080</td>
                              </tr>
                                <tr>
                                  <td valign="top" class="bodytext"><strong>Hours:</strong></td>
                                  <td class="bodytext">Monday - Friday 10am-7pm</td>
                              </tr>
                                <tr>
                                   <td valign="top" class="bodytext"><strong>
                                   </strong></td>
                                     <td class="bodytext"><p>Sunday (Closed)</p></td>
                                </tr>
                              </table>          
              </tr>
            </table>
</td>
          <td width="117" align="right"><img src="images/blank.gif" width="117" height="350"></td>
        </tr>
        <tr>
          <td colspan="3" class="header1"><table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td colspan="3"><img src="images/bg2.gif" width="950" height="94"></td>
              </tr>
              <tr>
                <td width="50" bgcolor="#FFBFEF"><img src="images/blank.gif" width="50" height="30"></td>
                <td width="450" bgcolor="#FFBFEF" class="bodytext"><p>&copy; 2007
                  Opus1. www.musicopus1.com All rights Reserved.<br>
                  2800 W. Bayshore Rd., Palo Alto 94303.<br>
                  (408)821-5080 &nbsp;Email: <a href="mailto:musicopus1@gmail.com">musicopus1@gmail.com</a></p></td>
                <td width="300" bgcolor="#FFBFEF" class="bodytext"><img src="images/blank.gif" width="300" height="30"></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<div class="demo">
<div id="dialog" title="Join Opus1 Mailing List">
      <p id="validateTips">All form fields are required.</p>
      <form>
      <fieldset>
            <label for="firstname">First Name</label>
            <input type="text" name="firstname" id="firstname" class="text ui-widget-content ui-corner-all" />
            <label for="lastname">Last Name</label>
            <input type="lastname" name="lastname" id="lastname" value="" class="text ui-widget-content ui-corner-all" />
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />            
      </fieldset>
      </form>
</div>
</div>
<div id="div2update"></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of Shahid Thaika
Shahid Thaika
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial