Support NeoGAF

[Mr_Zombie]

Webmaster GAF, I need your help.

I'm working on a website and there's a catalog of machines that one can rent.
The category page looks like this:

HTML code (I'm not including the content of each tile, because it seems that's not the issue here)

<div id="content">
  <div id="list">
    <div class="iconW iconLeftW" />
    <div class="iconW iconRightW" />
    <div class="iconW iconLeftW" />
    <div class="iconW iconRightW" />
    <div class="iconW iconLeftW" />
    <div class="iconW iconRightW" />
  </div>
</div>

and the CSS:

#content {
  min-height: 500px;
  padding: 10px 20px 20px;
  width: 710px;
}
#list {
  overflow: hidden;
  padding: 40px 0 31px;
  width: 100%;
}
div.iconW {
  height: 92px;
}
div.iconW {
  float: left;
  margin-bottom: 15px;
  position: relative;
  width: 300px;
}
.iconLeftW {
  margin-left: 33px;
  margin-right: 20px;
}
.iconRightW {
  margin-left: 20px;
  margin-right: 33px;
}

Looks simple, right? Everything work great in Firefox, Chrome, Opera and IE8 & 9.
However, for some reason this is how it looks in IE7:

The left-margin in .iconLeftW class is completely ignored and thus everything is moved to the left side. The margin-left works when either float:left or position:relative property is disabled in .iconW class, but not when both of those are enabled.

Similar thing happens on another page:
Normal browsers:

IE7:

HTML

<div id="content">
  <div id="list">
    <div class="iconM" />
    <div class="iconM iconRightM" />
    <div class="iconM iconRightM" />
    <div class="iconM" />
    <div class="iconM iconRightM" />
    <div class="iconM iconRightM" />
  </div>
</div>

CSS:

#content {
  min-height: 500px;
  padding: 10px 20px 20px;
  width: 710px;
}
#list {
  overflow: hidden;
  padding: 40px 0 31px;
  width: 100%;
}
div.iconM {
  float: left;
  height: 172px;
  margin-bottom: 24px;
  position: relative;
  width: 220px;
}
div.iconRightM {
  margin-left: 24px;
}

I was googling yesterday thinking it must be some sort of bug in IE7, but couldn't find anything (found out about a bunch of other CSS bugs in IE7 - didn't think there's so much of them D. I don't know why is this happening and can't find a way to resolve it. I need the "position: relative" property because of what's happening inside those divs, and obviously I need float property to arrange divs around.

So, can anyone help me with this issue?

 

[kaizoku]

I don't have IE7 so I can't test specifically how to fix this but some tips which I found helped to keep my CSS simple for those more annoying browsers out there.

Use padding on the container rather than margin on the child elements where possible. So here you have 2 list IDs, consider adding a class to them to describe the differences between the lists so you can have more padding on one and less on the other.

This allows you to remove what I think looks like the biggest cause for problems which is lots of margin use on the icon divs. When making stacked divs like this I find its best to avoid using margins as much as possible, I stick to only using margins on the right and bottom. Using margins on both left and right is asking for trouble I think.

If you add padding to the list (and change width to auto, it will expand to fill the space) and remove margin-left completely and up margin-right appropriately your page should behave better.

Similar applies to second problem, I like to work left to right and have my styles so that the element on the left is the one that sets its territory and the new one can't invade it. So instead of two iconRightMs I'd have two on the left with margin-right set and so on. Can't do any real testing without seeing the page though.

 

[Mr_Zombie]

Thanks, simplifying margins or replacing them with padding helped (dunno why haven't I did that in the first place).

I'm still wondering why the previous CSS didn't work in IE7, though.