Hi Everyone…
I am having problems with this page on IE6 mainly and a slight problem in others…
In IE6 my datebox moves to the left (see the attached…).
This page will have lot of content and when I add content is when I have all the browser shifts.
Right now, in Firefox 7.0.1 and IE 9 my footer also shifts to the right… Is this because I have a page height and the content exceeds the height? I tried to set an absolute positioning to the outer .news div but that messed it all up…
My CSS for that page is
.news {
position:relative;
top:30px;
width:900px;
left:-5px;
text-align:center;
margin:0px;
padding:0px 0px 0px 0px;
min-height:700px;
height:auto!important;
height:700px;
color:#A67445;
width:850px;
}
.news-inner{
position:relative;
top:0px;
padding:0px 0px 0px 0px;
}
.news-content{
position:relative;
bottom:0px;
padding:0px 0px 0px 0px;
}
.ndate {
text-align:left;
font-size:28px;
width:58px;
border-bottom-width:thin;
border-bottom-style:solid;
border-bottom-color:#774937;
position:absolute;
height:20px;
top:-3px;
left:-2px;
margin:0;
padding:0 3px 22px 0;
color:#C48B4E;
}
.nmonth {
text-align:left;
font-size:12px;
border-left-width:thin;
border-left-style:solid;
height:20px;
position:absolute;
top:0;
left:28px;
margin:0;
padding:2px 20px 9px 4px;
color:#774937;
}
.nyear {
text-align:left;
font-size:12px;
position:absolute;
top:0;
left:28px;
margin:0;
padding:20px 20px 0 6px;
color:#774937;
}
.datebox {
position:relative;
text-align:left;
top:90px;
left:23px;
padding:2px 0;
}
.ntitle {
text-align:left;
font-size:22px;
padding:20px 0 0 100px;
color:#ef6702;
}
.nimage {
text-align:left;
margin:0;
padding:2px 2px 2px 100px;
}
.npost {
text-align:left;
font-size:17px;
position:relative;
zoom:1.0;
padding:10px 0 80px 100px;
color:#A67445;
}
.title {
text-align:left;
font-size:17px;
position:relative;
top:0px;
left:10px;
margin:0;
padding:0 0 0 30px;
}
.newpics {
position:relative;
left:150px;
width:700px;
top:-200px;
}
ul.newpics,ul.newpics li {
list-style:none;
margin:0;
padding:0;
}
ul.newpics li {
float:left;
margin-right:2px;
border:5px solid #000;
z-index:1;
padding:0;
}
ul.newpics a {
display:block;
float:left;
width:90px;
height:90px;
line-height:10px;
overflow:hidden;
position:relative;
z-index:1;
}
ul.newpics a img {
float:left;
position:absolute;
top:-20px;
left:-20px;
}
ul.newpics a:hover {
overflow:visible;
z-index:10;
border:none;
}
ul.newpics a:hover img {
border:1px solid #000;
background:#000;
padding:2px;
}
ul.newpics:after,li.newpics:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul.newpics,li.newpics {
display:block;
min-height:1%;
}
* html ul.newpics,* html li.newpics {
height:1%;
}
What am I doing wrong with this page?