IE issues with my Website (Help me fix my CSS)
- by cam77
I'm struggling geting my website to test fully positive in IE, the following problems keep arising, only in IE;
My '#grey box' div displaying 200px to the left out of place, and it seems to move with the adjustment of the IE window size, does this in no other browsers, just IE.
It creates this unnecessary horizontal scroll. I have the width set to pretty large, but have "overflow: hidden" and again, works fine across except for IE.
On a few of my pages, the footer is somewhat cropped and out of place.
My biggest concern is the particular page's CSS, pasted below.
#container {
width : 1265px;
height : 920px;
background-color : #addceb;
overflow : hidden;
padding : 0;
}
#logo {
font-size : 38px;
height : 167px;
width : 427px;
margin-left : 435px;
padding-top : 20px;
margin-bottom : -10px;
margin-top: 10px;
border : none;
}
#menunav {
width : 100%;
background-image : url(../imagesnew/menunav.png);
background-repeat : repeat-x;
height : 40px;
text-align : center;
font-size : 14px;
font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
overflow : auto;
}
#menunav ul {
list-style-type : none;
background-image : url();
height : 40px;
width : 800px;
margin : auto;
}
#menunav ul a {
background-image : url();
background-repeat : no-repeat;
background-position : right;
padding-right : 32px;
padding-left : 15px;
display : block;
line-height : 30px;
text-decoration : none;
font-size : 14px;
}
#mainbox {
position : relative;
background-image : url(../premiumslideimgs/premiumbox.png);
background-repeat : no-repeat;
width : 900px;
height : 800px;
margin-left : 16%;
top : 22px;
padding-top : 5px;
overflow : hidden;
}
#simplegallery1 {
position : absolute;
left : 50%;
width : 800px;
height : 800px;
margin-top : 44px;
margin-bottom: -44px;
margin-bottom : 240px;
margin-left : -397px;
background-color : #a1bbfe;
padding-top : 0;
}
#textbelowbox {
position : absolute;
width : 830px;
height : 45px;
margin-left : 209px;
margin-bottom : 240px;
margin-top : -240px;
overflow : hidden;
}
#footer {
background-image : url(../imagesnew/footerimg.png);
background-repeat : no-repeat;
background-position : right;
height : 275px;
margin-top : -285px;
}
a:hover {
color : #addceb;
}
#right {
float : right;
margin-top : 3px;
}
#left {
float : left;
margin-left : 30px;
}
body {
font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
background-color : #addceb;
margin : 0;
padding : 0;
}
#textabovebox {
width : 920px;
position : absolute;
margin-left : 228px;
margin-bottom : 80px;
margin-top : 38px;
z-index : 2000;
font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
}
a.submenu:hover {
color : #333;
font-weight : bolder;
}
#dialog {
font-size : 12px;
}
#greybox {
position : absolute;
width : 275px;
height : 465px;
margin-left : 715px;
margin-top : 80px;
overflow : hidden;
z-index : 2000;
}
ul {
background-image : url();
height : 40px;
width : 800px;
margin : auto;
}
ul a {
background-image : url();
background-repeat : no-repeat;
background-position : right;
padding-right : 32px;
padding-left : 15px;
display : block;
line-height : 30px;
text-decoration : none;
font-size : 14px;
}
li {
float : left;
}
a:link {
color : #ffffff;
text-decoration : none;
}
a:visited {
color : #ffffff;
text-decoration : none;
}
a:active {
color : #ffffff;
text-decoration : none;
}
a:hover {
color : #addceb;
}
#right {
float : right;
margin-top : 3px;
}
#left {
float : left;
margin-left : 30px;
}
#text {
float : left;
margin-left : 30px;
}
body {
font-family : Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
padding : 0;
margin : 0;
}
body {
background-color : #addceb;
}
a.submenu:link {
color : #333333;
}
a.submenu:active {
color : #333333;
}
a.submenu:visited {
color : #333333;
}
a.submenu:hover {
color : #333333;
font-weight : bolder;
}
{
margin: 0;
padding: 0;
}
Please help if you can, thanks a lot.
