Solved

Internet Explorer CSS height issue

Posted on 2010-08-16
6
1,309 Views
Last Modified: 2012-05-10
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;
}
0
Comment
Question by:cgray1223
6 Comments
 
LVL 9

Expert Comment

by:Shahid Thaika
ID: 33444128
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.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 33444142
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.
0
 
LVL 7

Expert Comment

by:Gene_Cyp
ID: 33444165
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/
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:cgray1223
ID: 33444168
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');
                  }
            });
0
 

Author Comment

by:cgray1223
ID: 33444186
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>
0
 
LVL 9

Accepted Solution

by:
Shahid Thaika earned 500 total points
ID: 33444497
cgray - does IE shrink the main window or the new dialog window that you seem to be opening? We may need a different CSS file accordingly. It'd be better if you could attach the source here as a zip file, if that is OK with you.

In addition IE8 has a nifty Developer tool. You can possibly analyze the problem yourself using the following steps.

1) Open the window that shrinks.
2) With the window in focus, press F12
3) Press CTRL+B, or click on the "Select Element By Click" arrow
4) In the document, select the area that seems to shrink
5) Toggle/Manipulate the style settings to see what is making the window shrink (You can even debug the page)

Sometimes an inline style setting or a class style setting may override another styling. This can be identified using IE's 'Trace Style' feature.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now