IE issues with my Website (Help me fix my CSS)
Posted
by
cam77
on Pro Webmasters
See other posts from Pro Webmasters
or by cam77
Published on 2011-06-28T15:48:38Z
Indexed on
2011/06/29
0:32 UTC
Read the original article
Hit count: 245
css
|internet-explorer
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.
© Pro Webmasters or respective owner