Hi, my site is fine in Google Chrome and Firefox, but in IE, I get the main content div overlapping the fixed sidebar div when I zoom the page over 100%.
Any ideas what the issue may be? Here is the css:
* {margin: 0px; padding: 0px;}
*
*
div#test {
background-image: url();
margin-left : 14%;
padding-top : 40px;
padding-left : 32px;
margin-right : auto;
background-repeat: no-repeat;
height: 200px;
width: auto;
line-height : 30px;
text-align : left;
font-size : 11px;
font-weight : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
div#test_1 {
background-image: url(small_green_box.jpg);
margin-left : 157px;
padding-top : 14px;
padding-left : 16px;
margin-right : auto;
background-repeat: no-repeat;
height: 90px;
text-align : left;
font-size : 13px;
}
a:link img {
border-style : none;
}
* {
margin : 0;
padding : 0;
}
* * div#test {
background-image : url();
margin-left : 14%;
padding-top : 40px;
padding-left : 32px;
margin-right : auto;
background-repeat : no-repeat;
height : 200px;
width : auto;
line-height : 30px;
text-align : left;
font-size : 11px;
font-weight : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
div#test_1 {
background-image : url(small_green_box.jpg);
margin-left : 157px;
padding-top : 14px;
padding-left : 16px;
margin-right : auto;
background-repeat : no-repeat;
height : 90px;
text-align : left;
font-size : 13px;
}
a:link img {
border-style : none;
}
body {
margin : 0;
padding : 0;
height : 100%;
color : white;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : medium;
background-image : url(background.jpg);
background-attachment : fixed;
background : url(background.jpg) no-repeat fixed;
}
.invisible {
display : none;
}
#fixed {
font-size : 13px;
position : absolute;
top : 0;
margin-left : auto;
margin-right : auto;
width : 13em;
padding-left : 18px;
padding-top : 12px;
padding-bottom : 20px;
color : #006600;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-align : left;
border : 0 solid black;
}
body > #fixed {
position : fixed;
height : 100%;
}
#content {
position : relative;
margin-left : 17.6em;
margin-right : auto;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 6px;
padding-right : 6px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : normal;
line-height : 1.5;
text-align : center;
background : #ffffff;
color : #000066;
width : 617px;
}
h1 {
font-size : 2em;
text-align : center;
margin : auto;
font-weight : bold;
color : #000066;
width : 340px;
}
h2 {
font-size : 11px;
text-align : center;
margin : auto;
background : #ffffff;
color : #000066;
width : auto;
font-weight : normal;
padding-left : 2px;
}
h3 {
text-align : justify;
font-size : 12px;
width : 260px;
padding-left : 6px;
padding-right : 9px;
padding-top : 0;
font-weight : normal;
border : 0 solid #6633ff;
color : #000066;
font-style : italic;
}
h4 {
color : #0066cc;
text-align : center;
font-size : 13px;
font-weight : bold;
margin-top : 12px;
margin-bottom : 0;
padding-top : 0;
padding-bottom : 26px;
line-height : 30px;
}
h5 {
text-align : center;
color : #000066;
font-size : 11px;
font-weight : normal;
margin-top : 12px;
margin-bottom : 0;
padding-top : 0;
padding-bottom : 12px;
}
h6 {
text-align : center;
font-size : 14px;
font-weight : normal;
color : #000066;
background : #ffffff;
margin-top : 17px;
margin-bottom : 0;
padding-top : 0;
font-weight : bold;
}
a:link {
color : #0033cc;
text-decoration : none;
}
a:visited {
outline : none;
color : #0033cc;
}
a:active {
outline : none;
color : #0033cc;
}
a:hover {
color : #3399ff;
text-decoration : none;
}
a {
text-decoration : none;
}
#fixed a {
color : #0033cc;
padding-top : 3px;
margin : auto;
padding-bottom : 3px;
padding-right : 10px;
width : 112px;
text-align : left;
text-decoration : none;
font-size : 11px;
font-weight : normal;
}
#fixed a:hover {
color : #6699ff;
font-weight : normal;
}
#ffixed a {
color : #fffccc;
padding-top : 3px;
padding-bottom : 3px;
width : 112px;
text-align : left;
text-decoration : none;
background : #ffcc00;
font-size : 11px;
font-weight : normal;
}
#ffixed a:hover {
background : #ffffff;
}
div.address {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
text-align : center;
color : #000033;
border-top : 0 solid #cccccc;
width : auto;
margin : 0 auto;
font-weight : normal;
}
div.address img {
border : 0;
text-align : center;
}
.wrap {
width : 100%;
height : 100%;
clear:both;
}
.scroll {
position : relative;
left : 31px;
color : #000066;
font-weight : normal;
font-size : 12px;
text-align : left;
width : 840px;
}
.scroll2 {
position : relative;
left : 83px;
color : #000066;
font-weight : normal;
font-size : 12px;
text-align : left;
width : 840px;
line-height : 20px;
}
.scroll23 {
position : relative;
left : 74px;
color : #000066;
font-weight : normal;
font-size : 12px;
text-align : left;
width : 840px;
line-height : 20px;
}
.scroll5 {
position : relative;
left : 57px;
color : #000066;
font-weight : normal;
font-size : 12px;
text-align : left;
width : 840px;
}
LI.list1 {
list-style : disc;
color : #0000cc;
}
LI.list2 {
list-style : square inside;
color : black;
background : #ffffcc;
}
.blacktext {
color : #000066;
font-size : 12px;
font-weight : normal;
}
.title1 {
margin : auto;
background : #ffffff;
color : #000066;
width : 399px;
padding-top : 2px;
padding-left : 6px;
padding-right : 12px;
font-size : 15px;
font-weight : normal;
text-align : center;
overflow : auto;
}
.title2 {
margin : auto;
background : #ffffff;
color : #003366;
width : 500px;
padding-right : 0;
font-size : 14px;
font-weight : normal;
text-align : center;
font-style : normal;
}
img {
border-style : none;
vertical-align : middle;
margin-left : auto;
margin-right : auto;
padding-bottom : 4px;
}
#c2 a:link {
color : #3399ff;
text-decoration : none;
}
#c2 a:visited {
color : #3399ff;
}
#c2 a:active {
outline : none;
color : #3399ff;
}
#c2 a:hover {
color : #cccccc;
text-decoration : none;
}
#c2 a {
text-decoration : none;
outline : none;
}
#c3 a:link {
background-color : #ffffff;
color : #3399ff;
text-decoration : none;
}
#c3 a:visited {
background-color : #ffffff;
color : #3399ff;
}
#c3 a:active {
outline : none;
background-color : #ffffff;
color : #3399ff;
}
#c3 a:hover {
background-color : #ffffff;
color : #cccccc;
text-decoration : none;
}
#c3 a {
text-decoration : none;
outline : none;
}
.w3 {
position : absolute;
left : 18px;
width : 140px;
text-decoration : none;
outline : none;
padding-left : 0;
margin-left : 40px;
margin-right : 0;
margin-top : 14px;
border : 0 solid #000000;
}
.logo {
background : #ffffff;
color : #3399ff;
text-decoration : none;
outline : none;
width : 158px;
height : 76px;
text-align : center;
padding-top : 3px;
padding-left : 6px;
padding-right : 7px;
padding-bottom : 0px;
font-size : 18px;
letter-spacing: 0px;
font-weight : bold;
margin-top : 14px;
position : absolute;
left : 10px;
top : 22px;
}
.logo3 {
color : #000099;
text-decoration : none;
outline : none;
width : 160px;
letter-spacing: 0px;
text-align : center;
line-height : 24px;
font-size : 12px;
margin-top : 0px;
position : relative;
padding-left : 1px;
font-weight : normal;
top : 24px;
padding-top : 14px;
}
form table {
margin : 0 auto;
}
h4.c2 {
text-align : center;
}
h3.c1 {
text-align : center;
}
a:hover {
background : none;
text-decoration : none;
}
a.tooltip span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip:hover span {
display : none;
position : absolute;
left : 310px;
top : 304px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;
height : 120px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 10px;
color : #ffffff;
line-height : 22px;
}
a.tooltip2:hover span {
display : inline;
position : absolute;
left : 0px;
top : 4px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;
height : 120px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 10px;
color : #ffffff;
line-height : 22px;
}
a.tooltip span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip2 span {
display : none;
padding : 2px 3px;
margin-left : 12px;
width : auto;
}
a.tooltip:hover span1 {
display : inline;
position : absolute;
left : 330px;
top : 330px;
font-size : 12px;
font-style : normal;
text-align : center;
width : 380px;
background : #ff0000;
border : 0 solid #99ff66;
margin-left : 5px;
margin-right : 7px;
padding-top : 0;
color : #ffffff;
line-height : 22px;
}
#table2 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
margin : 0 auto;
padding-left : 8px;
}
#table2 th {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
}
#table2 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 290px;
text-align : left;
line-height : 25px;
}
#table4 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
margin : 0 auto;
padding-left : 8px;
}
#table4 th {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
}
#table4 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 170px;
text-align : left;
line-height : 25px;
}
#table6 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 18px;
}
#table6 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table6 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}
#table61 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 68px;
}
#table61 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table61 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}
#table63 {
font-size : 11px;
color : #000066;
font-weight : normal;
width : auto;
text-align : left;
margin-left : 0px;
}
#table63 th {
font-size : 11px;
color : #000066;
font-weight : bold;
width : 100px;
text-align : left;
}
#table63 td {
font-size : 11px;
color : #000066;
font-weight : normal;
width : 100px;
text-align : left;
}
#table8 {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 410px;
text-align : left;
padding-left : 50px;
margin : 0 auto;
line-height : 25px;
}
#table8 th {
font-size : 11px;
color : #000000;
font-weight : bold;
width : 205px;
text-align : left;
}
#table8 td {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 205px;
text-align : left;
}
#table18 {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 410px;
text-align : left;
padding-left : 0px;
padding-right : 20px;
margin : 0 auto;
line-height : 25px;
}
#table18 th {
font-size : 11px;
color : #000000;
font-weight : bold;
width : 205px;
text-align : left;
}
#table18 td {
font-size : 11px;
color : #000000;
font-weight : normal;
width : 205px;
text-align : left;
}
.pronunciation {
margin-left : 214px;
margin-right : auto;
padding-top : 1em;
padding-bottom : 1px;
padding-left : 6px;
padding-right : 6px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
line-height : 1.5;
text-align : justify;
background : #ffffff;
color : #000066;
width : auto
}
and I link to this ie hack
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
Thanks.
