SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Code:
    .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?

    IE6 Datebox Shift.JPGFooter Shift.JPG

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

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One Problem solved...

    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 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...

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help ...

    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?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://validator.w3.org/check?verbos...com%2Fnews.php

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Solved...

    Quote Originally Posted by SgtLegend View Post
    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.

    http://validator.w3.org/check?verbos...com%2Fnews.php
    SgtLegend...that did it... thank you so much.... that was the problem! I was missing the closing divs...

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange...

    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?

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2010
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much SgtLegend....I just looked at your portfolio ..pretty impressive!..thank you for your help...
    Last edited by yathrakaaran; Oct 21, 2011 at 22:39. Reason: spelling mistakes


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •