IE7 and widths

HTML & CSS
1

Hi,

I have some kind of IE7 glitch here: http://174.132.115.189/~petsetcv/index.php/products

I think it has something to do with widths. Does IE7 add something like margins, paddings, or borders which alter div widths and is there a conditional statement I could use to adjust for that.

Sometimes I think IE7 is becoming the new IE6. I also acknowledge that my CSS can be pretty ad hoc at times.

Thanks,

luciano

2

Hi,

You have a few issues there. First on is haslayout is needed on the main container.

Add this for IE7:


#mainContent {
    margin: 0 26px 0 231px;
    padding: 0 0 30px 0;
    position: relative;
[B]    min-height:0;/*     haslayout ie7 */[/B]
}

The set your table to 100% width, float the rightcolumn images as a block and the reduce the width on the p element as you have overstated it.


[B]table.contentpaneopen{width:100%;}[/B]
div.rightCol-images {
    width: 400px;
    margin: 0;
  [B]  float:right;[/B]
}
table.contentpaneopen p {
    [B]width: 297px;[/B]
    margin: 5px 0;
}

You can’t wrap divs in a p element as that is invalid so remove the p from around your slideshow div.

I guess you aren’t supporting IE6 as you have a lot of problems in IE6.

3

Thanks for your kind assistance. It is really appreciated. I have been working on your suggestions this afternoon.

First, I found where the <p> tag was surrounding a div and fixed that. I implemented your other changes, correctly I hope, and found that they did not solve my IE7 problem. I should say that I’m using IE Tester, a Windows app that works pretty well sometimes but not always. So if you want to look at the site in IE7 on your machine perhaps the problem is fixed. It’s just that on the products page I think the slideshow at the bottom is too wide and it’s forcing that entire column to the bottom.

I found that setting table.contentpaneopen {width: 100%} broke the front page in Firefox and Chrome.

You are correct in assuming that I have given up on IE6. I know it’s still a perennial debate but that’s where I’m at at the moment.

Thanks again for all your help.

All the best,

luciano

4

Hi,

You made some typos in the code I gave you and you didn’t remove the margins of the rightcolimages. It also looks as though you are overstating the dimensions everywhere. Try something like this.


#mainContent {
   [B] margin: 0 26px 0 220px;[/B]
    padding: 0 0 30px 0;
    position: relative;
   [B] min-height:0;/[/B]*     haslayout ie7 */
}
table.contentpaneopen{width:100%;}
div.rightCol-images {
  [B]  width: 350px;[/B]
  [B]  margin:0;
 float: right;[/B]
}
div.rightCol-images img {
    float: right;
    margin: 20px 10px 0 0;
}
div.moduletable.homeslideshow {
    float: right;
    margin: 100px 0 0 0;
}
div#slidewrap {
  [B]  float:none;
    margin:10px 0 0 -20px;
    width:375px;[/B]
}

That works in Ie7 and Firefox and tested locally.:slight_smile:

The table is really just a nusisance and isn’t really doing anything so you would be better off with just css. The rightcol images should be in a list structure because they are a list of images.

5

Thanks very much for your assistance. It was greatly appreciated.

All the best,

luciano