Help with aspx in dreamweaver - browser compliance... IE9

Question

hi,
creating a site using .aspx and includes. have an issue with cross browser compatiblity with IE9. the left hand menu is overlapping the main content container. any help is appreciated:
CSS for layout:
/* Layout CSS Document */
/* This document contains the CSS rules that control the basic structure of the CS website. This includes CSS normalization, element display and positioning, widths and heights in the liquid layout, menu design and background images. If you do not know what you are doing, then changing these CSS rules below will likely break the layout of the website. See the general.css file for rules that can be more easily changed. */
/***** NORMALIZATION CSS *****/
/* This section overrides all default browser CSS styles, ensuring that the site looks the same across all browsers. */
/* Normalizes margin and padding spacing across all elements */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
margin: 0;
padding: 0;
/* Normalizes font-sizes for headers and paragraphs*/
h1, h2, h3, h4, h5, h6, p
font-size: 100%;
/* Removes list-styles from lists */
ol,ul
list-style: none;
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
font-style: normal;
font-weight: normal;
/* Removes list-style from lists */
table
border-collapse: collapse;
border-spacing: 0;
/* Removes border from form groups (fieldsets) and image tags */
fieldset, img
border: 0;
/* Left-aligns text in caption and table headings */
caption, th
text-align: left;
/* Removes quotation marks from quotation tags */
q:before, q:after
content: '';
/***** /NORMALIZATION CSS *****/
/***** PAGE STYLES *****/
/* (NOTE: the text-align:center style atached to the HTML tag here is being used as part of a centering trick for older browsers. It is corrected for in the body tag below.) */
html
text-align: center; /* A centering trick for older browsers that causes them to center the web page in the middle of the screen */
/* styles on the body tag become the default CSS for all other HTML tags on the page */
body
position: relative; /* keeps all absolutely positioned elements within their parent element */
width: 100%; /* sets the width of the website to the full browser window (liquid layout) */
text-align: left; /* Prevents the text-align:center command (on the html tag above) from centering all text on the website */
min-width: 990px; /* do not allow the area to shrink less than this (720) */
/***** PAGE STYLES *****/
/*** HEADER STYLES ***/
/* the header centered in the page at a fixed width, with a background image behind it */
div#header /* the header (title area) at the top of the page */
position:relative; /* used to keep h1#title inside the header div */
width: 601px; /* sets the width of the header to match the size of the header image */
height: 72px; /* sets the height of the header to match the size of the header image */
margin: 20px auto; /* keeps the header centered on the page */
background-color: transparent; /* ensures that the background color will be visible behind the transparent parts of the PNG image */
background-image: url(../images/header_square.png); /* image for header (the rounded rectangle at top) */
background-repeat: no-repeat; /* prevents the background image from being tiled */
/* the site title is positioned over the round background Chicago Booth image */
h1#title /* the Computing Services title at the top of the site */
display: block; /* puts the title in an invisible box that it is easier to manipulate with CSS */
position: absolute; /* allows one to set the exact psoition of the name inside the header */
top: 17px; /* moves the title 18 pixels in from the top of the header */
right: 20px; /* moves the title 15 pixels in from the right side of the header */
z-index: 1; /* keeps the title visible above the header image */
/*** HEADER STYLES ***/
/***** LINKS MENU STYLES *****/
/* the links menu bar spreads across the top of the content area */
div#groupLinks /* the div that holds the links menu */
border: solid 3px #CCCCCC; /* sets the line, thickness and color (gray) for the borders of the links menu */
margin-left: 252px; /* makes room for the CS navigation menu */
height: 30px; /* sets the height of the link bar */
/* links in the menu bar are centered in the page */
div#groupLinks ul /* list that makes up the actual navigation menu, it is placed inside the groupLinks div (above) */
display: block; /* puts the list in an invisible box that it is easier to manipulate with CSS */
margin-left: 20px; /* distance from side menu and link bar text */
text-align:left; /* keeps the list centered on the page */
/* links in the menu bar are inline and vertically centered in the page */
div#groupLinks ul li /* styles the individual items in the navigation menu */
display: inline; /* displayes menu items horizontally across the menu bar, rather than vertically like a traditional list */
padding: 0px 10px 0px 10px; /* padding around the individual menu items */
line-height: 30px; /* NOTE: This must match the height of the link bar to keep the text vertically centered! */
height: 30px; /* sets the height of the links */
/* the group links menu title is removed (for screen readers only) */
div#groupLinks h3 /* this h3 text is in the HTML for handicap accessibility, the following css trick will hide it */
position: absolute; /* allows me to set the exact psoition of the h3 text inside the page */
top: -9999px; /* push the h3 text far outside the top of the screen */
/***** /LINKS MENU STYLES *****/
/***** AV MENU STYLES *****/
/* on some pages, the AV menu bar spreads across the top of the content area, below the main menu bar */
div#avLinks /* the div that holds the AV links menu */
border: solid 3px #CCCCCC; /* sets the line, thickness and color (gray) for the borders of the links menu */
border-top: none; /* removes (extra) top border */
margin-left: 252px; /* makes room for the CS navigation menu */
height: 30px; /* sets the height of the link bar */
/* links in the menu bar are centered in the page */
div#avLinks ul /* list that makes up the actual menu, it is placed inside the avLinks div (above) */
display: block; /* puts the list in an invisible box that it is easier to manipulate with CSS */
margin-left: 20px; /* distance from side menu and link bar text */
text-align:left; /* keeps the list centered on the page */
/* links in the menu bar are inline and vertically centered in the page */
div#avLinks ul li /* styles the individual items in the navigation menu */
display: inline; /* displayes menu items horizontally across the menu bar, rather than vertically like a traditional list */
padding: 0px 10px 0px 10px; /* padding around the individual menu items */
line-height: 30px; /* NOTE: This must match the height of the link bar to keep the text vertically centered! */
height: 30px; /* sets the height of the links */
/* the av links menu title is removed (for screen readers only) */
div#avLinks h3 /* this h3 text is in the HTML for handicap accessibility, the following css trick will hide it */
position: absolute; /* allows me to set the exact psoition of the h3 text inside the page */
top: -9999px; /* push the text far outside the top of the screen */
/* NOTE: This class is used to hide the AV menu on non-AV pages */
div.removeMenu /* class added to the menu on non-AV pages (to hide it) */
position: absolute; /* allows me to set the exact psoition of the h3 text inside the page */
top: -9999px; /* push the text far outside the top of the screen */
display: none; /* also hides the div content from screen readers */
/***** /AV MENU STYLES *****/
/***** NAV MENU STYLES *****/
/* the cs website navigation is to the left of the content, out of the document flow */
div#navCS /* the div that holds the main navigation menu */
position:absolute; /* allows one to set the exact psoition of the menu div on the page while letting the text flow around it */
width: 250px; /* sets the menu width */
top: 92px; /* moves the menu down from the page top */
border: solid 3px #CCCCCC; /* sets the line, thickness and color (gray) for the borders of the menu */
z-index: 10; /* keeps the side menu above other elements of the page (so that the sub-menus stick out properly) */
padding-top: 30px; /* positions the menu just below the black links bar */
/* add extra top padding when on an AV page (to accomodate the AV menu */
div.withAV /* added to the navCS div on AV pages only! */
padding-top: 63px !important; /* repositions the menu just below the second black links bar for AV */
/* the CS website navigation boxes are created for each menu list item */
div#navCS ul li /* styles the individual items in the navigation menu */
display: block; /* puts the menu items in an invisible box so that it is easier to manipulate with CSS */
position:relative; /* ensures that all submenus are positioned relative to their respective menu links */
width: 250px; /* sets the width of the navigation boxes (accomodates padding, below) */
height: 30px; /* sets the height of the navigation menu items */
line-height: 30px; /* NOTE: This must match the height of the menu items to keep the text vertically centered! */
border-top: solid 1px #CCCCCC; /* sets the line, thickness and color (gray) for the top border of the menu boxes */
margin: 0px; /* remove margins from box */
padding: 0px; /* remove margins from box */
/* adds the thick top border above the first menu element */
div#navCS > ul > li:first-child /* the FIRST menu item only! */
border-top: solid 3px #CCCCCC; /* sets the line, thickness and color (gray) for the top border of the menu */
/* the menu title is removed (for screen readers only) */
div#navCS h3 /* this h3 text is in the HTML page for accessibility reasons, the following css trick will hide it */
position: absolute; /* allows me to set the exact psoition of the h3 text inside the page */
top: -9999px; /* push the text far outside the top of the screen */
/* ensures that the submenus are clickable on iOS devices (iPhones, iPad, etc.) */
div#navCS ul li a { /* makes the anchors into invisible boxes */
display: block; /* puts link in a box */
height: 30px; /* specifies height of link (MUST MATCH CONTAINING LI ABOVE!!) */
padding: 0px 7px; /* pads the menu text */
margin: 0px; /* ensures that no extra margins upset the layout */
/***** /NAV MENU STYLES *****/
/***** SUBMENU STYLES *****/
/* navigation submenus are hidden by default, and show as a side menu when hovered over */
/* NOTE: The popup submenus are normally controlled by JavaScript. A backup "nojs" class exists to allow popup menus to be controlled by by CSS when JavaScript is deactivated. */
div#navCS ul li.nojs > div.submenu, /* (no javscript version) */
div#navCS ul li > div.hide /* affects only the submenu div in a menu list */
position: absolute; /* allows me to set the exact psoition of the h3 text inside the page */
top: -9999px; /* push the text far outside the top of the screen */
/* the classes below display the navigation submenu when the parent menu item is hovered over */
div#navCS ul li.nojs:hover > div.submenu, /* (no javscript version) */
div#navCS ul li > div.show /* affects the submenu div when its corresponding menu list item is hovered over */
display: block; /* puts the submenu in an invisible box that it is easier to manipulate with CSS */
position: absolute; /* allows me to set the exact psoition of the submenu in the page without affecting the rest of the main menu (works with "position:relative" on the "div#navCS ul li" item */
background-image: url(../images/arrow.png); /* adds the grey arrow on the side of the menu */
background-position: top left; /* sets the arrow to the top-left of the menu */
background-repeat: no-repeat; /* ensures that only one arrow is shown */
background-color: transparent; /* makes the div transparent so that the submenu is away from the main menu, yet still reachable from the menu */
top: 0px; /* positions the submenu flush with the top of the menu item */
left: 100%; /* positions the submenu just to the left of the main menu */
z-index: 1; /* ensures that the submenu is always visible above the content and links menu (z-index must be added separetely to all child elements) */
div#navCS ul li.nojs:hover > div.submenu ul, /* (no javscript version) */
div#navCS ul li > div.show ul /* affects the submenu list when its corresponding menu list item is hovered over */
display: block; /* puts the submenu in an invisible box that it is easier to manipulate with CSS */
margin-left: 12px; /* pushes the list to the left enough to make room for the background "arrow" image */
border: 3px solid #999999; /* places grey border around submenu */
overflow: hidden; /* prevents long text from stretching the submenu */
padding: 1px 5px 1px 5px; /* adds padding to submenu sides */
z-index: 1; /* ensures that the submenu is always visible above the content and links menu (z-index must be added separetely to all child elements) */
div#navCS ul li.nojs:hover > div.submenu ul li, /* (no javscript version) */
div#navCS ul li > div.show ul li /* affects the submenu list items when its corresponding menu list item is hovered over */
display: block; /* puts the submenu in an invisible box that it is easier to manipulate with CSS */
border-top: 1px dotted #000000; /* adds a border above the menu item */
height: 22px; /* specifies height of menu item */
line-height: 22px; /* vertically centers sub-menu text (MUST BE SAME AS HEIGHT!) */
z-index: 1; /* ensures that the submenu is always visible above the content and links menu (z-index must be added separetely to all child elements) */
/* removes the top border above the first submenu element */
div#navCS ul li.nojs:hover > div.submenu ul li:first-child, /* (no javscript version) */
div#navCS ul li > div.show ul li:first-child /* the FIRST menu item only! */
border-top: none; /* do not place a border in front of the first item */
/* ensures that the submenus are clickable on iOS devices (iPhones, iPad, etc.) */
div#navCS ul li.nojs:hover > div.submenu ul li a, /* (no javscript version) */
div#navCS ul li > div.show ul li a { /* makes the anchors into invisible boxes */
display: block; /* puts link in a box */
height: 22px; /* specifies height of link (MUST MATCH CONTAINING LI ABOVE!!) */
padding: 0px 7px; /* pads the menu text */
margin: 0px; /* ensures that no extra margins upset the layout */
/***** /SUBMENU STYLES *****/
/***** CONTENT STYLES *****/
/* the main content in the center of the page */
div#content /* sets the styles for the main content div */
position: relative; /* used to keep everything that is placed inside the content div, inside the content div */
border: solid 3px #CCCCCC; /* sets the line, thickness and color (gray) for the right border of the content area */
border-top: none; /* removes top border (since links bar already has one */
margin-left: 253px; /* places enough space on the left side of the page to fit the menu */
padding: 40px 0px 20px 0px; /* sets the (top and bottom only) white space around items placed in the content div */
min-height: 200px; /* sets an absolute minimum height for the content div */
/***** /CONTENT STYLES *****/
/***** FAQ AND AV STYLES *****/
/* On the FAQ pages, questions are laid out using a Definition List and displayed using toggleFAQ.js */
/* On the AV facilities pages, sections are laid out using a Definition List and displayed using toggleAV.js */
div#content dl.av dd,
div#content dl.faq dd /* sets the desfult style for the answers in the FAQ and sections in the AV list */
display: block; /* by default, question answers are visible to non-javascript browsers */
div#content dl.av dd.hidden,
div#content dl.faq dd.hidden /* hides the answers (when needed by the javascript) */
position:absolute; /* allows me to set the exact psoition of the text inside the page */
left:-9999px; /* push the text far outside the left of the screen */
/***** /FAQ AND AV STYLES *****/
/***** FOOTER STYLES *****/
/* the footer is in the center of the page */
div#footer /* sets the styles for the footer */
position: relative; /* used to keep things placed inside the footer div, inside the footer div */
margin-left: 252px; /* places enough space on the left side of the page to fit the menu */
height: 30px; /* sets the height of the footer box */
/* the university menu title is removed (for screen readers only) */
div#navUniversity h4 /* this h4 text is in the HTML page for accessibility reasons, the following css trick will hide it */
position: absolute; /* allows one to set the exact psoition of the h4 text inside the page */
left: -9999px; /* push the h4 text far outside the left of the screen */
/* the university menu is displayed inline to the left on the footer*/
div#navUniversity ul /* styles for the university menu in the footer */
position: absolute; /* allows me to set the exact psoition of the menu inside the page */
top: 4px; /* moves the menu 4 pixels in from the top of the footer */
left: 0px; /* moves the menu flush with the left side of the footer */
div#navUniversity ul li /* styles for the university menu in the footer */
display: inline; /* displayes menu items horizontally across the foooter, rather than vertically like a traditional list */
/* add | separators before each menu element */
div#navUniversity ul li:before /* affects the area BEFORE each menu item in the footer */
content: " | "; /* adds a vertical bar character ( | ) before each menu item */
/* do not add a | before the first menu element */
div#navUniversity ul li:first-child:before /* affects the area BEFORE the FIRST menu item in the footer */
content: " "; /* adds nothing before the first menu item (overrides the prior CSS, which adds a line before each item) */
/* the copyright info is to the right of the university navigation */
p#copyright /* styles the copyright paragraph */
position:absolute; /* allows one to set the exact psoition of the copyright inside the page */
top: 4px; /* moves the copyright 4 pixels in from the top of the footer */
right: 6px; /* moves the copyright to the right side of the footer */
/***** /FOOTER STYLES *****/
index:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<%-- The nav_active variable is used to light up the appropriate navigation button --%>
<%
dim nav_active As String
nav_active = "none"
%>
<head profile="http://computing.chicagobooth.edu/includes/metaDataDef.html">
<title>Booth Computing Services</title>
<!-- Include header here: -->
<!-- #include virtual = "/includes/inc_header.aspx" -->
<style type="text/css">
/* <![CDATA[ */
/* PLACE SPECIAL STYLES FOR USE ON THIS PAGE BELOW */
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* PLACE SPECIAL SCRIPTS FOR USE ON THIS PAGE BELOW */
/* ]]> */
</script>
</head>
<!-- Include navmenu here: -->
<!-- #include virtual = "/includes/inc_navmenu.aspx" -->
<div id="content">
<!-- DO NOT CHANGE ANYTHING ABOVE THIS LINE!!! -->
<h2>Computing Services</h2>
<p>Welcome to Booth Computing Services. Whether you are <a href="faculty.aspx">faculty</a>, <a href="students.aspx">student</a> or <a href="staff.aspx">staff</a>, our goal is to provide you with the highest level of information technology to help you achieve excellence. We provide networking services, application services, training and more, all of which you can learn about through our website.</p>
<p>We welcome your comments and suggestions for how we can improve the computing environment at Chicago Booth to better suit your needs. Please feel free to review our <a href="helpdesk/stats.aspx">Customer Satisfaction Survey</a> or <a href="contact.aspx">contact us</a> with any feedback you would like to share.</p>
<!-- DO NOT CHANGE ANYTHING BELOW THIS LINE!!! -->
</div><!-- /content -->
<!-- Include footer here: -->
<!-- #include virtual = "//includes/inc_footer.aspx" -->
menu CSS
/* Listmenu CSS Document */
/* This document contains the CSS rules for the alphabetical list menu which appears on the tools.asp page. This document styles the HTML generated by the IHWY jQuery Listmenu Plugin (v1.1, 5/24/2010).
For more information, visit: http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx
/* optional hack for IE 6 so that menu appears under letters, if you want to support IE 6... */
/********************* CSS HACK ********************
* html .lm-wrapper .lm-letters
zoom: 1;
********************* /CSS HACK ********************/
/*** LISTMENU STYLES ***/
body
min-width: 1236px !important;
div#content .lm-wrapper /* a wrapper around the generated menu */
margin: 20px 20px 80px 20px; /* places a 20px margin around the menu */
padding-top: 20px; /* adds space above the menu so that the counts can be seen */
position: relative; /* ensures that everything is displayed inside the menu */
min-width: 920px;
div#content .lm-wrapper .lm-letters /* the letters in the alpha menu */
overflow: hidden; /* prevents letters from overwriting the menu if they get too large */
div#content .lm-wrapper .lm-letters a,
div#content .lm-wrapper .lm-letters a:link /* the letters in the alpha menu */
font-family: Verdana,Arial,Geneva; /* sets the font style (and alternate fonts) for the letters */
font-size: 0.9em; /* sets the font size */
display: block; /* used to center letters in boxes */
float: left; /* used to center letters in boxes */
padding: 2px 11px; /* used to center letters in boxes */
border: 1px solid #C0C0C0; /* used to create box around letters */
border-right: none; /* removes the right border (see lm-last, below) */
text-decoration: none; /* used to remove lines below the letters */
div#content .lm-wrapper .lm-letters a:hover,
div#content .lm-wrapper .lm-letters a:active,
div#content .lm-wrapper .lm-letters a.lm-selected /* moused-over and selected letters in the menu */
background-color: #CCCCCC; /* sets the background color of the box (grey) */
div#content .lm-wrapper .lm-letters a.lm-disabled /* empty letters in the menu */
color: #CCCCCC; /* sets the color of the letters (grey) */
div#content .lm-wrapper .lm-letters a.lm-last /* the last letter in the list */
border-right: 1px solid #C0C0C0; /* puts the final border to close the menu */
div#content .lm-wrapper .lm-letter-count /* styles the count above each letter (if enabled) */
top: -10px; /* forces the text to appear above the letters */
font-size: 6pt; /* sets the font size */
font-family: Verdana,Arial,Geneva; /* sets the font style (and alternate fonts) for the counts */
text-align: center; /* centers the number above the letter */
margin: 2px 0px 2px 0px; /* sets required spaceing around the numbers */
color: #666666; /* sets the color of the numbers */
div#content .lm-wrapper .lm-menu /* styles the pop-up menu that appears below the letters */
border: 1px solid #C0C0C0; /* creates a border around the pop-up menu */
border-top: 1px solid #C0C0C0; /* creates a border around the pop-up menu */
padding: 5px; /* padding around the pop-up menu edge */
z-index: 15; /* ensures that the pop-up menu is visible above the rest of the menu */
position: absolute; /* used to correctly position the menu */
margin-top: -1px; /* lines the top border of the menu correctly */
background-color: #F1F1F1; /* colors the background of the menu (light grey) */
display: none; /* hides the menu (until needed) */
div#content .lm-wrapper .lm-menu ul li,
div#content .lm-wrapper .lm-menu ol li /* styles the individual list items in the pop-up menu */
list-style-type: disc; /* adds bullets to the menu items */
color:#660000; /* colors the menu items (maroon) */
font-family: Verdana,Arial,Geneva; /* sets the font style (and alternate fonts) for the menu text */
text-align: left; /* aligns the pop-up menu text to the left */
font-size: 0.9em; /* sets the text size for the menu items */
padding: 0px; /* removes all extra padding from items */
margin: 0px; /* removes all extra margins from items */
div#content .lm-wrapper .lm-menu .lm-no-match /* Styles the text shown when no items match a letter */
font-family: Verdana,Arial,Geneva; /* sets the font style (and alternate fonts) */
color: #666666; /* colors the text (dark grey) */
font-style: italic; /* makes the text italic */
font-size: 0.9em; /* sets the text size for the text */
div#content .lm-wrapper .lm-menu a,
div#content .lm-wrapper .lm-menu a:link /* styles the pop-up menu links */
text-decoration: none; /* removes lines under the links */
div#content .lm-wrapper .lm-menu a:hover,
div#content .lm-wrapper .lm-menu a:active /* styles the pop-up menu links when hovered over */
text-decoration: underline; /* underlines the link */
color: #CCCCCC; /* sets the color of the link (grey) */
div#content .lm-wrapper .lm-menu .lm-submenu /* styles the columns (submenus) in the pop-up menu */
/* overflow: hidden; */ /* prevents large text from breaking the menu */
/** popup submenus **/
div#content .lm-wrapper .lm-menu .lm-submenu ul li /* database listing in alpha menu */
position: relative; /* used to keep popup menu (below) next to database listing */
/* hide submenu by fefault */
div#content .lm-wrapper .lm-menu .lm-submenu ul li > div.popup
position: absolute; /* allows me to set the exact psoition of the menu */
top: -9999px; /* push the menu far outside the top of the screen */
/* show submenu to right when related database name is hovered over */
div#content .lm-wrapper .lm-menu .lm-submenu ul li:hover > div.popup
position: absolute;
top: 5px;
left: -51%;
height: 45px;
width: 50%;
display: block;
background-color:#999999;
border: solid 1px #000000;
z-index: 20;
font-size: 9px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin: 0px;
overflow: hidden; /* prevents large text from breaking the menu */
/* change specific columns */
div#content .lm-wrapper .lm-menu .lm-submenu .c3 ul li:hover > div.popup
/* USE INVISIBLE DIV IF YOU NEED TO SPACE MENU DIFFERENTLY!! */
/*** /LISTMENU STYLES ***/

Answer 1

If your container has a width in %,  add one of these rules to your CSS code.
/**This re-scales images to any size browser width**/
img {width:100%}
/**this re-scales images  up to the native file size only**/
img {max-width:100%}
Also remove height and width attributes from your <img> HTML code.  Otherwise this won't work.
Nancy O.