Formatting issue with IE6 working well with IE 6+

Question

Hi All,

I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.

With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.

You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.

URL: http://anujtripathi.net/BlogListing.aspx?Id=2

Answer 1

I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.

Answer 2

Your code (default.css):

.bg1 {
    padding: 0 7px 20px 0px;
    border-top: 1px solid #FFFFFF;
    background: #FFFFFF url(images/img4.gif) repeat-x;
        width: 95%; 
}

Try shrinking down 95% to like around 92%.

You can use a IE6 hack like so:

.bg1 {
  padding: 0 7px 20px 0px;
  border-top: 1px solid #FFFFFF;
  background: #FFFFFF url(images/img4.gif) repeat-x;
  width: 95%;
}

* html .bg1 {
  width: 92%; /* Star Html Hack IE6 only */
}

*+html .bg1 {
  width: 93%; /* Star Html Hack IE7 only */
}

But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility: http://stackoverflow.com/questions/2863136/what-is-the-best-way-to-deal-with-ie-compatibility-issue