and thanks for the help.
I am having a somewhat confusing issue with IE7 when using fields.
I have a contaner, and inside this container I have some floating boxes.
These fields have fields, top, right, left, bottom, except for the first field, which has no field on the left, and the last field, which has no field on the right.
It looks good in all browsers except IE7, where the edge does not apply to the first element on each line (at least this is what I think is happening.
If I remove the marker on the right in ie7 using the dev tools and then return it, it will display correctly.
Has anyone seen anything like this before?
I'm at a dead end.
EDIT
This seems to be caused by the position: relative on containers. Changing this parameter to static fix the margin problem, but now means that my divs are misaligned in ie7. Does anyone know why a relative’s position will blame the edges?
NEW EDIT
Download example can be found here: www.jimplode.co.uk/content/stackoverflow.zip
Incorrect view
Correct the fields by removing and rechecking only one of the field styles.
HTML:
<div class="lowerContent">
<div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h1>Car Insurance</h1>
<ul>
<li>Protected NCD for life</li>
<li>NCD Accelerator</li>
<li>European Cover Included</li>
<li>Multiple Drivers and Vehicles</li>
<li>Breakdown Cover Included</li>
<li>Legal Cover Included</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="imageContainer">
<img src="/images/misc/boxphoto_1.jpg" alt="box image 0" />
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Home Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_2.jpg" alt="box image 2" />
</div>
<ul>
<li>Working at home Equipment</li>
<li>Helmet and Leathers</li>
<li>Legal Cover</li>
<li>Caravan Cover</li>
<li>Personal Accident Cover</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Life Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_3.jpg" alt="box image 3" />
</div>
<ul>
<li>Cover From £5 a month</li>
<li>Your loved ones protected</li>
<li>Immediate cover available</li>
<li>We search, you save</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_4.jpg" alt="box image 4" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_5.jpg" alt="box image 5" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_6.jpg" alt="box image 6" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_7.jpg" alt="box image 7" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
</div>
CSS:
.lowerContent
{
position:relative;
margin:0px 0px 0px 0px;
}
.expandableBox
{
display:block;
width:100%;
}
.expandableBox .top
{
background-image:url("/images/backgrounds/bkg_whitebox_t.png");
background-repeat: repeat-x;
height:10px;
}
.expandableBox .topLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_tl.png");
background-repeat: no-repeat;
background-position:left top;
}
.expandableBox .topRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_tr.png");
background-repeat: no-repeat;
background-position:right top;
}
.expandableBox .middleLeft
{
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_l.png");
background-repeat: repeat-y;
background-position:left top;
}
.expandableBox .middle
{
background-color:#FFFFFF;
}
.expandableBox .middleRight
{
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_r.png");
background-repeat: repeat-y;
background-position:right top;
}
.expandableBox .bottom
{
background-image:url("/images/backgrounds/bkg_whitebox_b.png");
background-repeat: repeat-x;
background-position:bottom;
height:10px;
margin-bottom:7px;
}
.expandableBox .bottomLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_bl.png");
background-repeat: no-repeat;
background-position:left bottom;
}
.expandableBox .bottomRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_br.png");
background-repeat: no-repeat;
background-position:right bottom;
}
.contentBoxMarginLeft
{
margin-left:10px;
}
.contentBoxMarginRight
{
margin-right:10px;
}
.contentBoxMarginTop
{
margin-top:10px;
}
.contentBoxMarginBottom
{
margin-bottom:10px;
}
.fullContentBox
{
width:940px;
float:left;
}
.largeContentBox
{
width:700px;
float:left;
}
.mediumContentBox
{
width:460px;
float:left;
}
.smallContentBox
{
width:220px;
float:left;
}
.mediumContentBox .textContainer
{
float:left;
width:210px;
}
.mediumContentBox .imageContainer
{
float:right;
width:210px;
}
.smallContentBox .textContainer
{
}
.smallContentBox .textContainer .imageContainer
{
float:right;
padding:5px 0px 0px 0px;
}
.smallContentBox .imageContainerAlternate
{
float:left;
padding:0px 0px 0px 0px;
}
a.smallButtonLeft,
a.smallButtonRight
{
display:inline-block;
background-image:url('/images/backgrounds/bkg_sprites_buttons.png');
height:30px;
background-position:left top;
background-repeat:no-repeat;
padding:0px 10px;
line-height:23px;
color: #0F4DBC;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
}
a.smallButtonLeft:hover
{
background-position:left -44px;
}
a.smallButtonRight
{
background-position:right -217px;
color: #4D4F52;
}
a.smallButtonRight:hover
{
background-position:right -262px;
}
.boxButtons
{
float:left;
padding:10px 0px 0px 0px;
}
.smallContentBox .boxButtons
{
width:200px;
text-align:center;
}
Thanks in advance.