SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I6 Allignment Problem

    Hi guys,

    im having a problem in IE 6.

    screenshot

    it should be like this

    screenthost


    It works in IE 7 above, FF, Google Chrome.

    Thanks

    Code CSS:
       <style type="text/css">    .deviders ol, ul {list-style: none; margin: 0; padding: 0; display: block;}
     
        .dividers li {border-top: 1px solid #d5d5d5; padding-top: 20px;}
     
        .dividers li:first-child {border: 0; padding: 0;}
     
        .content-01 .aside-02 h4 {font-size: 1.188em; font-weight: bold; line-height: 1.4; margin-bottom: 3px; color: #333; font-family: Arial, sans-serif;}
     
         .content-01 .aside-02 h4 a::first-line {line-height: normal;}    
     
         a img {display: block;}
     
         img { 	border:0;}
     
        .promo_collection img {margin-right: 10px;}
     
        .promo_collection img {float: left; margin: 3px 15px 15px 0;}
     
      .promo_collection, .promo_collection ul li {display: block;}
     
    .promo_collection li {margin-top: 20px;}
     
    .promo_collection li:first-child {margin-top: 0;}
     
    .promo_collection {display: block;   }
     
    .promo_collection:after, .promo_collection ol li:after, .promo_collection ul li:after {clear: both; content: "."; display: block; height: 0; visibility: hidden;}
     
        </style>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like IE6 is pushing the header down lower.

    Please post a link to your page if you have one. If not post your html (with doctype so we can rule out any quirksmode issues) that goes with that CSS.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Rayzur,

    I already send you the link n your pm.


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Code HTML4Strict:
    <div class="promo_collection custom" id="none">
      <ul class="dividers ">
        <li class="first"> <a href="#" title=""> <img src="" width="100" height="75" alt="" /></a>
          <h4> <a href="" title="">Title</a></h4>
          <p>text  description</p>
        </li>
        <li> <a href="#" title=""> <img src="" width="100" height="75" alt="" /></a>
          <h4> <a href="#" title="">title</a></h4>
          <p>text  description</p>
        </li>
        <li class="last"> <a href="#" title=""> <img src="" width="100" height="75" alt="" /></a>
          <h4> <a href="#" title="">title</a></h4>
          <p>text  description</p>
        </li>
      </ul>
    </div>

    Thanks
    Last edited by jalmz; Jul 5, 2011 at 20:51. Reason: html code added

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I already send you the link n your pm.
    Yes, I got it. Between it and the html you posted that should be enough to troubleshoot IE6.

    I'll take a look and post back

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    IE6 should comply if you give these selectors "haslayout"

    Code:
    .promo_collection, .promo_collection ul li {
        display: block;
        zoom:1;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur,

    Thank you for the fast support. It works like a charm. =)

    can you explain about the zoom:1; ?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yes, zoom is an IE specific property that causes IE7 and under to gain "layout". It is harmless to other browsers but it will not pass css validation, that's not really a problem though.

    You can learn more about "haslyout" in the CSS Reference.

    There is a list of other valid properties in there that will also cause IE to gain "layout".

    Beware, it's a dark subject though.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you mean it is safe to use the zoom?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jalmz View Post
    you mean it is safe to use the zoom?
    Yes its quite safe to use zoom as a haslayout trigger for IE but only add it when needed as mentioned in the haslayout article. Don't just apply it willy nilly to elements unless you understand why you are doing so

    It won't validate though as it is proprietary IE code but will do no harm.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, this is a very informative and helpful forum

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It won't validate though as it is proprietary IE code but will do no harm.
    Which with all the browser specific prefix nonsense when deploying anything new like CSS3, does using Zoom really make a difference?

    Had a guy the other day arguing that you should never use a IE specific "hack" like zoom, when his page was doped to the gills with -moz, -webkit, -o, and even -ms... Almost pimp-slapped him.

    That said, I'm not sure those qualify as a list (once you have heading tags and paragraph tags those cease to be something I'd put in UL/LI), I'd probably just be padding them on the bottom and then pad the parent container instead of screwing around with all that first/last/first-child nonsense (maybe keep last to remove it's bottom border divider).... much less that clearfix nonsense.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Which with all the browser specific prefix nonsense when deploying anything new like CSS3, does using Zoom really make a difference?
    I used to separate zoom or even use height:1% but I stopped doing that a while ago because zoom is much safer than the height:1%(1px) or dimension hacks and does no harm to anyone. As you say with all the other vendor specific stuff in the code it's not really an issue.

    As an aside Safari and Chrome both support zoom now.

    Code:
    p{zoom:10.0}
    So make sure its zoom:1.0 an not anything else

    I suppose you could argue that zoom should be hidden from good browsers in case it gets implemented as something else and thus breaks the layout although I think that is pretty unrealistic and unlikely.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the comments guys. but the way can we put a DIV inside a LI?

    <li class="first"> <a href="#" title=""> <img src="" width="100" height="75" alt="" /></a>
    <h4> <a href="" title="">Title</a></h4>
    <p>text description</p>
    <div>can we put a div here? is this a valid xhtml? </div>
    </li>

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You can... though at that point I'd stop making it a UL/LI... of course I'm wondering if those should even be H4... While I'd have to see the whole page to be sure, I've got the feeling you're overthinking your layout code.... and possibly wrapping semantic tags around the WRONG elements.

    My question would be what are you putting in that DIV -- content should dictate the markup.


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
  •