I6 Allignment Problem

HTML & CSS
1

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

   <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

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

hi Rayzur,

I already send you the link n your pm.

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

<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

4

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 :slight_smile:

5

IE6 should comply if you give these selectors “haslayout”

.promo_collection, .promo_collection ul li {
    display: block;
    [COLOR=Blue]zoom:1;[/COLOR]
}
6

Hi Rayzur,

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

can you explain about the zoom:1; ?

7

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

8

you mean it is safe to use the zoom?

9

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 :slight_smile:

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

10

Thank you Paul, this is a very informative and helpful forum

11

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

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.


p{zoom:10.0}

So make sure its zoom:1.0 an not anything else :slight_smile:

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

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

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.