Another day with IE6

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?

http://www.rajeevthomas.com/news.php

Hi everyone and Paul…
Referring to one of Paul O’B’s old responses here on the forum, I was able to correct the .datebox shifts in IE6 :slight_smile: Width of my parent element was set wrong without considering width + padding.

But please help me with my footer shift …my footer seems to be shifting to the right in Firefox and IE…only when I add so much content… :confused:

Your #footer element is currently housed inside your #main container which is only 900px while #footer is 1200px, simply moving #footer to sit after #main should fix the issue.

SgtLegend…thank you for your time and patience… I looked at my page again and again…may be I am wrong but I see that the footer is outside the “main” element. I checked every tag and it shows footer is outside of it… am I wrong?

I recommend you double and triple check your markup as your site has a few validation errors including some missing closing DIV’s which are causing #footer to wrap itself inside #main.

SgtLegend…that did it… thank you so much… that was the problem! I was missing the closing divs… :slight_smile:

No problem, always remember the W3C validator is there to help any developer as no matter how many times i build a website or email template i have at least one error i missed because as humans our focus and attention can miss even the most obvious errors.

SgtLegend…I know you are right about W3C validator, I will start using it. I had CSE HTML Validator showing two extra tags…

The end tag for “div” was found, but all “div” start tags already have end tags. This appears to be an extra end tag that should be removed.
But… HTML tidy shows two missing tags!! Would you recommend a validator? Or is it W3C Validator?

I never rely on anything but the online validator, if my project isn’t live i use a tool in Firefox called “web developer” which allows for local validation by using the upload side of the service.

Thank you very much SgtLegend…I just looked at your portfolio …pretty impressive!..thank you for your help…