Hi All,
I was wondering if anyone could help me with an issue I’m having with Internet Explorer. It appears to be displaying my maxigallery buttons incorrectly. I know IE doesnt like Padding so I’ve made sure I haven’t used any. I have attached the screenshot for Firefox which is correct & the screenshot for the IE which is incorrect. Also here is my css:
@charset "UTF-8";
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#main {
float: right;
height: 370px;
width: 714px;
margin-top: 4px;
background-image: url(../images/main.png);
}
#maininner {
float: left;
height: 336px;
width: 709px;
margin-top: 10px;
margin-left:10px;
padding: 0px;
}
#wrapper {
width: 970px;
height: 450px;
margin-top: 147px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
padding: 0px;
}
#header {
height: 75px;
width: 970px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
float: left;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#footer {
height: 25px;
width: 970px;
float: left;
}
#nav {
float: left;
display:block;
z-index:1000;
}
#nav ul {
line-height: 24px;
margin: 0px;
padding: 0px;
width: 100px;
}
#nav a:link, #nav a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
}
#nav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;
}
#nav li.here a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;
}
#nav .sub {
top: 0px;
left: 120px;
position: absolute;
display: none;
}
#nav ul li {
position: relative
}
#nav ul li.active ul {
display:block;
}
#footer {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #0099FF;
text-decoration: none;
text-align: right;
}
#footer a:link {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#footer a:hover {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #0099FF;
text-decoration: none;
text-align: right;
}
#maininner p {
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
#maininner a:link {
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
text-decoration: none;
text-align: left;
}
#maininner a:hover {
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
text-align: left;
}
I also edited the css file for Maxigallery which is here:
ul.thumbs li {
list-style: none;
float: left;
display: block;
list-style-image: none !important;
margin: 0px 5px 5px 0px;
}
ul.thumbs {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
ul.thumbs li img {
border: none;
margin: 0 !important;
float: left;
}
ul.thumbs li a {
background: none !important;
text-decoration: none;
border: 0;
}
ul.thumbs li p {
overflow: hidden;
}
.thumbs .clearboth {
clear: both;
}
.childscontainer {
margin-bottom: 20px;
float: left;
}
.thumbscontainer {
margin-bottom: 0px;
float: left;
}
.pagenumbers {
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
position: absolute;
top: 430px;
}
.pagenumbers a {
color: #000000;
text-decoration: none;
}
.pagenumbers a:hover {
color: #FFFFFF;
text-decoration: none;
}
.picturecontainer {
text-align: center;
}
.picturecontainer .title {
font-weight: bold;
margin-top: 20px;
}
.picturecontainer .picture img {
border: none;
margin: 0 !important;
}
.picturecontainer .picture a {
background: none !important;
text-decoration: none;
border: 0;
}
.managecontainer {
float: left;
background-color: #0099ff;
}
.managecontainer textarea {
width: 395px;
}
.managecontainer hr {
width: 400px;
text-align: left;
margin: 20px auto 20px 0;
}
.pictureform .managepicture {
float: left;
clear: left;
}
.pictureform .shortfields {
margin-left: 20px;
float: left;
}
.pictureform .clearboth {
clear: both;
}
.uploadcounter {
width: 20px;
margin-bottom: 10px;
float: left;
clear: left;
}
.uploadfile {
margin-bottom: 10px;
float: none;
}
.uploadfile input {
width: 385px;
}
.uploadform {
margin-top: 20px;
margin-bottom: -10px;
clear: both;
}
.uploadform .clearboth {
clear: both;
}
.slideshowwrapper {
text-align: center;
}
.deleteform {
float: left;
}
.synchform {
float: left;
}
If there is anything else needed to help with this issue please let me know.
Thanks in advance.
