SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

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