IE6 - Double left margin?

[burgeamon]

Hi Guys n Gals.

Im working on a site at the moment and am ironing out all the browser issues and have 1 left. In IE6 there seems to be some sort of double margin applied to some of the divs in a certain section.

Its all valid and works great everywhere else but I can't figure out whats going on.

Any help is appreciated.

Andy




<div id="pods">
<div id="podsHeader">
</div><!--podsHeader-->

<div id="leftContent">
<div class="pod">
<div class="podImage"><img src="images/layout/pod_img.jpg" width="68" height="45" />
</div><!--podImage-->
<div class="podText">
<h3>Breakfast with Bob McCreadie</h3>
Join Bob every morning from 6.<br />
<a href="/">More</a>
</div>
<!--podText-->
</div><!--pod-->

<div class="pod">
<div class="podImage"><img src="images/pods/fleckers.jpg" width="68" height="45" />
</div><!--podImage-->
<div class="podText">
<h3>Workday with Fleckers</h3>
Join Fleckers every day from 10.<br />
<a href="/">More</a>
</div><!--podText-->
</div><!--pod-->

<div class="pod">
<div class="podImage"><img src="images/pods/caddy.jpg" width="68" height="45" />
</div><!--podImage-->
<div class="podText">
<h3>Drivetime with Neil Caddy</h3>
Driving you home across Cornwall.<br />
<a href="/">More</a>
</div><!--podText-->
</div><!--pod-->

<div class="pod">
<div class="podImage"><img src="images/pods/sound.jpg" width="68" height="45" />
</div><!--podImage-->
<div class="podText">
<h3>Cornwalls Secret Sound</h3>
Join Fleckers every day from 10.<br />
<a href="/">More</a>
</div><!--podText-->
</div><!--pod-->

<div class="pod">
<div class="podImage"><img src="images/pods/jobspot.jpg" width="68" height="45" />
</div><!--podImage-->
<div class="podText">
<h3>Workday with Fleckers</h3>
Join Fleckers every day from 10.<br />
<a href="/">More</a>
</div><!--podText-->
</div><!--pod-->


<div class="clearfloat">
</div><!-- end clearfloat -->
</div><!--leftContent-->

<div id="rightContent">
<div id="miniPodHeader">
</div><!--miniPodHeader-->
<div class="miniPod"><a href="/"><img src="images/layout/minipod_ph.jpg" border="0" /></a> </div>
<!--miniPod-->
<div class="miniPod"><a href="/"><img src="images/pods/minipod_ph2.jpg" border="0" /></a> </div>
<!--miniPod-->
<div class="miniPod"><a href="/"><img src="images/pods/minipod_ph3.jpg" border="0" /></a> </div>
<!--miniPod-->
<div class="miniPod"><a href="/"><img src="images/pods/minipod_ph4.jpg" border="0" /></a> </div>
<!--miniPod-->
<div id="miniPodFooter">
</div><!--miniPodFooter-->
</div><!--rightContent-->

<div class="clearfloat">
</div><!-- end clearfloat -->

<div id="podsFooter">
</div><!--podsFooter-->
<div class="clearfloat">
</div><!-- end clearfloat -->
</div><!--pods-->




#pods {width:562px; background-color:#FFFFFF; margin-top:8px;}
#podsHeader {height:26px; background-image:url(../images/layout/pods_header.jpg); background-repeat:no-repeat;}
#podsFooter {height:15px; background-image:url(../images/layout/pods_footer.jpg);}
#pods #leftContent {width:73%; float:left; height:100%;}
#pods #rightContent {width:136px; float:right; height:100%; background-color:#919191; margin-right:8px; margin-top:8px;}
.pod {width:125px; height:155px; margin-left:8px; margin-top:8px; float:left; background-image:url(../images/layout/pod_bg.jpg);}
.pod a{text-decoration:none; color:#0000FF;}
.pod a:hover{text-decoration:underline;}
.podImage {text-align:center;margin:6px 6px 6px 6px;}
.podText {text-align:left; margin:0px 6px 0px 6px; height:90px; border-top-width: 1px;border-top-style: solid;border-top-color: #999999; padding-top:4px;}
.bottom{color: #471d55;font-weight: bold;text-decoration: none;height: 15px;background-repeat: no-repeat;position:absolute;bottom:6px;}
.bottom:hover {text-decoration:underline;}
.miniPod {margin:4px 8px 4px 8px;}
#miniPodHeader {width:136px; height:11px; background-image:url(../images/layout/minipod_header.jpg); background-position:top; background-repeat:no-repeat;}
#miniPodFooter {width:136px; height:11px; background-image:url(../images/layout/minipod_footer.jpg); background-position:bottom; background-repeat:no-repeat;}


Site is up at http://piratefm.knightstonedesign.co.uk

Thanks

[boogyman]

this is a vast overuse of the <div> tag.

but since you have just about every element in a dig tag, add the following at the top of your style sheet and see if this fixes your problem



div {margin:0;padding:0;}


that will reset the default padding and margin on the tag and thus unless you specify a margin/padding there will be none. If that doesnt work can you please take a screen shot and post what it is you want to have the "double" margin deleted from.

[burgeamon]

Thanks for your reply Boogyman.

I tried to apply 0 margin/padding to DIV's but still no joy :(

This is one of my first sites using CSS so my code may not be ideal. When you say im overusing the DIV tag which DIV's would you see as unnecessary? Any clue you could give me would be great. Should I be using spans in place of a bunch of them DIVs or am I missing trick somewhere?

Anyway, here is a screenshot as requested.

Thanks for your patience with my n00b-ness.

http://i9.tinypic.com/6q27ga1.jpg