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;
}
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;
}
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.
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/
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/
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_40 x100.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","V erdana","s ans-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-erro r');
bValid = bValid && checkLength(firstname,"Fir st Name",1,30);
bValid = bValid && checkLength(lastname,"Last Name",1,50);
bValid = bValid && checkRegexp(firstname,/^([ 0-9a-zA-Z] )+$/,"Firs t 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|[!#\ $%&'\*\+\- \/=\?\^_`{ \|}~]|[\u0 0A0-\uD7FF \uF900-\uF DCF\uFDF0- \uFFEF])+( \.([a-z]|\ d|[!#\$%&' \*\+\-\/=\ ?\^_`{\|}~ ]|[\u00A0- \uD7FF\uF9 00-\uFDCF\ uFDF0-\uFF EF])+)*)|( (\x22)(((( \x20|\x09) *(\x0d\x0a ))?(\x20|\ x09)+)?(([ \x01-\x08\ x0b\x0c\x0 e-\x1f\x7f ]|\x21|[\x 23-\x5b]|[ \x5d-\x7e] |[\u00A0-\ uD7FF\uF90 0-\uFDCF\u FDF0-\uFFE F])|(\\([\ x01-\x09\x 0b\x0c\x0d -\x7f]|[\u 00A0-\uD7F F\uF900-\u FDCF\uFDF0 -\uFFEF])) ))*(((\x20 |\x09)*(\x 0d\x0a))?( \x20|\x09) +)?(\x22)) )@((([a-z] |\d|[\u00A 0-\uD7FF\u F900-\uFDC F\uFDF0-\u FFEF])|(([ a-z]|\d|[\ u00A0-\uD7 FF\uF900-\ uFDCF\uFDF 0-\uFFEF]) ([a-z]|\d| -|\.|_|~|[ \u00A0-\uD 7FF\uF900- \uFDCF\uFD F0-\uFFEF] )*([a-z]|\ d|[\u00A0- \uD7FF\uF9 00-\uFDCF\ uFDF0-\uFF EF])))\.)+ (([a-z]|[\ u00A0-\uD7 FF\uF900-\ uFDCF\uFDF 0-\uFFEF]) |(([a-z]|[ \u00A0-\uD 7FF\uF900- \uFDCF\uFD F0-\uFFEF] )([a-z]|\d |-|\.|_|~| [\u00A0-\u D7FF\uF900 -\uFDCF\uF DF0-\uFFEF ])*([a-z]| [\u00A0-\u D7FF\uF900 -\uFDCF\uF DF0-\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("o pen");
setTimeout('$("#div2update ").dialog( "close")', 4000);
});
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeCl ass('ui-st ate-error' );
}
});
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-
border:1px solid #AAAAAA;
color:#222222;
}
ui.theme.css (line 11)
.ui-widget {
font-family:Verdana,Arial,
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","V
}
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-
bValid = bValid && checkLength(firstname,"Fir
bValid = bValid && checkLength(lastname,"Last
bValid = bValid && checkRegexp(firstname,/^([
bValid = bValid && checkRegexp(lastname,/^([0
bValid = bValid && checkRegexp(email,/^((([a-
if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + firstname.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + lastname.val() + '</td>' +
'</tr>');
$.post("joinmailingdb.php"
$("#div2update").html(data
$("#div2update").dialog("o
setTimeout('$("#div2update
});
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeCl
}
});
ASKER
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.j s"></scrip t>
<script type="text/javascript" src="jqueryui/ui/ui.dragga ble.js"></ script>
<script type="text/javascript" src="jqueryui/ui/ui.resiza ble.js"></ script>
<script type="text/javascript" src="jqueryui/ui/ui.dialog .js"></scr ipt>
<script type="text/javascript" src="jqueryui/ui/effects.c ore.js"></ script>
<script type="text/javascript" src="jqueryui/ui/effects.h ighlight.j s"></scrip t>
<script type="text/javascript" src="jqueryui/ui/jquery.bg iframe.js" ></script>
<link type="text/css" href="jqueryui/css/demos.c ss" 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({a utoOpen:fa lse});
var firstname = $("#firstname"),
email = $("#email"),
lastname = $("#lastname"),
allFields = $([]).add(firstname).add(e mail).add( lastname),
tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highl ight",{},1 500);
}
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-erro r');
bValid = bValid && checkLength(firstname,"Fir st Name",1,30);
bValid = bValid && checkLength(lastname,"Last Name",1,50);
bValid = bValid && checkRegexp(firstname,/^([ 0-9a-zA-Z] )+$/,"Firs t 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|[!#\ $%&'\*\+\- \/=\?\^_`{ \|}~]|[\u0 0A0-\uD7FF \uF900-\uF DCF\uFDF0- \uFFEF])+( \.([a-z]|\ d|[!#\$%&' \*\+\-\/=\ ?\^_`{\|}~ ]|[\u00A0- \uD7FF\uF9 00-\uFDCF\ uFDF0-\uFF EF])+)*)|( (\x22)(((( \x20|\x09) *(\x0d\x0a ))?(\x20|\ x09)+)?(([ \x01-\x08\ x0b\x0c\x0 e-\x1f\x7f ]|\x21|[\x 23-\x5b]|[ \x5d-\x7e] |[\u00A0-\ uD7FF\uF90 0-\uFDCF\u FDF0-\uFFE F])|(\\([\ x01-\x09\x 0b\x0c\x0d -\x7f]|[\u 00A0-\uD7F F\uF900-\u FDCF\uFDF0 -\uFFEF])) ))*(((\x20 |\x09)*(\x 0d\x0a))?( \x20|\x09) +)?(\x22)) )@((([a-z] |\d|[\u00A 0-\uD7FF\u F900-\uFDC F\uFDF0-\u FFEF])|(([ a-z]|\d|[\ u00A0-\uD7 FF\uF900-\ uFDCF\uFDF 0-\uFFEF]) ([a-z]|\d| -|\.|_|~|[ \u00A0-\uD 7FF\uF900- \uFDCF\uFD F0-\uFFEF] )*([a-z]|\ d|[\u00A0- \uD7FF\uF9 00-\uFDCF\ uFDF0-\uFF EF])))\.)+ (([a-z]|[\ u00A0-\uD7 FF\uF900-\ uFDCF\uFDF 0-\uFFEF]) |(([a-z]|[ \u00A0-\uD 7FF\uF900- \uFDCF\uFD F0-\uFFEF] )([a-z]|\d |-|\.|_|~| [\u00A0-\u D7FF\uF900 -\uFDCF\uF DF0-\uFFEF ])*([a-z]| [\u00A0-\u D7FF\uF900 -\uFDCF\uF DF0-\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("o pen");
setTimeout('$("#div2update ").dialog( "close")', 4000);
});
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeCl ass('ui-st ate-error' );
}
});
$('#create-user').click(fu nction() {
$('#dialog').dialog('open' );
$("input:text:visible:firs t").focus( );
})
.hover(
function(){
$(this).addClass("ui-state -hover");
},
function(){
$(this).removeClass("ui-st ate-hover" );
}
).mousedown(function(){
$(this).addClass("ui-state -active");
})
.mouseup(function(){
$(this).removeClass("ui-st ate-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_pre loadImages .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.o Src;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&&p arent.fram es.length) {
d=parent.frames[n.substrin g(p+1)].do cument; 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.len gth;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.arg uments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+= 3)
if ((x=MM_findObj(a[i]))!=nul l){documen t.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_o n.gif','im ages/nav_r eg_on.gif' ,'images/n av_studio_ on.gif','i mages/nav_ gallery_on .gif','ima ges/nav_ev ent_on.gif ','images/ nav_employ ment_on.gi f')">
<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/na v_home_on. gif',1)" onMouseOut="MM_swapImgRest ore()"><im g src="images/nav_home_off.g if" 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_progr am_on.gif' ,1)" onMouseOut="MM_swapImgRest ore()"><im g src="images/nav_program_of f.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( 'registrat ion','','i mages/nav_ reg_on.gif ',1)" onMouseOut="MM_swapImgRest ore()"><im g src="images/nav_reg_off.gi f" 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_swapImgRest ore()"><im g 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( 'employmen t','','ima ges/nav_em ployment_o n.gif',1)" onMouseOut="MM_swapImgRest ore()"><im g 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_galle ry_on.gif' ,1)" onMouseOut="MM_swapImgRest ore()"><im g src="images/nav_gallery_of f.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_swapImgRest ore()"><im g 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"> </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"> </td >
<td width="20" class="header1"> </td >
<td class="header1"> </td >
</tr>
<tr>
<td width="200" class="header1">CONTACT US</td>
<td class="header1"> </td >
<td class="header1"> </td >
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="bodytext" valign="top"><img src="images/pic12_on.jpg" width="150" height="100"></td>
<td class="bodytext"> </t d>
<td class="bodytext">
<table>
<tr>
<td width="142" valign="top" class="bodytext"><strong>A ddress :</strong></td>
<td width="337" class="bodytext"><p><stron g>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>C ontact 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@gm ail.com">m usicopus1@ gmail.com< /a></td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>P hone:</str ong></td>
<td class="bodytext">(408) 821-5080</td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>H ours:</str ong></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>© 2007
Opus1. www.musicopus1.com All rights Reserved.<br>
2800 W. Bayshore Rd., Palo Alto 94303.<br>
(408)821-5080 Email: <a href="mailto:musicopus1@gm ail.com">m usicopus1@ gmail.com< /a></p></t d>
<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>
<!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.
<script type="text/javascript" src="js/jquery-1.3.2.js"><
<script type="text/javascript" src="jqueryui/ui/ui.core.j
<script type="text/javascript" src="jqueryui/ui/ui.dragga
<script type="text/javascript" src="jqueryui/ui/ui.resiza
<script type="text/javascript" src="jqueryui/ui/ui.dialog
<script type="text/javascript" src="jqueryui/ui/effects.c
<script type="text/javascript" src="jqueryui/ui/effects.h
<script type="text/javascript" src="jqueryui/ui/jquery.bg
<link type="text/css" href="jqueryui/css/demos.c
<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({a
var firstname = $("#firstname"),
email = $("#email"),
lastname = $("#lastname"),
allFields = $([]).add(firstname).add(e
tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highl
}
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-
bValid = bValid && checkLength(firstname,"Fir
bValid = bValid && checkLength(lastname,"Last
bValid = bValid && checkRegexp(firstname,/^([
bValid = bValid && checkRegexp(lastname,/^([0
bValid = bValid && checkRegexp(email,/^((([a-
if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + firstname.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + lastname.val() + '</td>' +
'</tr>');
$.post("joinmailingdb.php"
$("#div2update").html(data
$("#div2update").dialog("o
setTimeout('$("#div2update
});
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeCl
}
});
$('#create-user').click(fu
$('#dialog').dialog('open'
$("input:text:visible:firs
})
.hover(
function(){
$(this).addClass("ui-state
},
function(){
$(this).removeClass("ui-st
}
).mousedown(function(){
$(this).addClass("ui-state
})
.mouseup(function(){
$(this).removeClass("ui-st
});
});
</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_pre
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=
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
}
</script>
</head>
<body bgcolor="#FFBFEF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('
<table width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/bg.gif"
<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"
<tr>
<td width="63"><img src="images/blank.gif" width="59" height="14"></td>
<td width="53"><a href="index.html" onMouseOver="MM_swapImage(
<td width="78"><a href="program.htm" onMouseOver="MM_swapImage(
<td width="95"><a href="registration.php" onMouseOver="MM_swapImage(
<td width="117"><a href="policy.htm" onMouseOver="MM_swapImage(
<td width="100"><a href="employment.htm" onMouseOver="MM_swapImage(
<td width="61"><a href="gallery.htm" onMouseOver="MM_swapImage(
<td width="58"><a href="events.htm" onMouseOver="MM_swapImage(
<td width="73"><img src="images/nav_contact_on
<td width="96"> </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"> </td
<td width="20" class="header1"> </td
<td class="header1"> </td
</tr>
<tr>
<td width="200" class="header1">CONTACT US</td>
<td class="header1"> </td
<td class="header1"> </td
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="bodytext" valign="top"><img src="images/pic12_on.jpg" width="150" height="100"></td>
<td class="bodytext"> </t
<td class="bodytext">
<table>
<tr>
<td width="142" valign="top" class="bodytext"><strong>A
<td width="337" class="bodytext"><p><stron
</tr>
<tr>
<td class="bodytext" colspan="2"><img src="images/map.jpg"></td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>C
<td class="bodytext">Doris N / Sici T</td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>E
<td class="bodytext"><a href="mailto:Musicopus1@gm
</tr>
<tr>
<td valign="top" class="bodytext"><strong>P
<td class="bodytext">(408) 821-5080</td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>H
<td class="bodytext">Monday - Friday 10am-7pm</td>
</tr>
<tr>
<td valign="top" class="bodytext"><strong>
</strong></td>
<td class="bodytext"><p>Sunday
</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>©
Opus1. www.musicopus1.com All rights Reserved.<br>
2800 W. Bayshore Rd., Palo Alto 94303.<br>
(408)821-5080 Email: <a href="mailto:musicopus1@gm
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
html,body,body form
{
height:100%;
}
"body form" is only needed for asp.net generated html pages.