Yet Another Browser Difference Problem...sigh

[Microbe]

Hey folks,

Trying to fix this for someone and it has me stumped.


IE bumps divs over by 20px. Divs have border around them for emphasis.

You can see this for yourself at

http://Davis.net.au/css.php

I have stripped out everything except the code and the styles and it is still happening.

I hate too much code in these posts so here is a minimum - exactly what is in the page - maybe you can see something just looking at it...I am becoming hairless and spending way too much time trying to figure it out.

Sorry about formatting below...TGML processing did weird things to the word "link"

The styles:
#quicklink1, #quicklink2, #quicklink3{
width:137px;
text-align:left;
height:220px;
background:url("images/quicklink-courses.gif") no-repeat left top;
float: left;
padding-right: 8px;
}
#quicklink2{
background:url("images/quicklink-retreats.gif") no-repeat left top;

}
#quicklink3{
background:url("images/quicklink-members.gif") no-repeat left top;
padding-right: 0px;

}
.quicklinkcontent{
margin-left:0px;
text-align:left;
padding-left:20px;
padding-top:55px;
padding-right: 20px;
font-size: 0.9em;
line-height: 1.2em;

}
.linkcontentwrapper{
width:136px;
margin:15px 0 0 -20px;
padding:1px 0 1px 0;
border: 1px dashed #FF00FF;
}

.linktext{
text-align:left;
padding-left:20px;
padding-right: 20px;
font-size: 0.9em;
line-height: 1.2em;
}

The HTML:
<div id="quicklink1">
<div class="quicklinkcontent">
<div class="linkcontentwrapper">
<div class="linktext">
<a href="#" class="bodylink">Lorem ipsum dolor sit amet consetetu</a>
</div>
</div>
<br />
<br />
sadipscing elitr, sed diam nonumy<br /><br />
eirmod sadipscing elitr, sed diam <br />
</div>
</div>
<div id="quicklink2">
<div class="quicklinkcontent">
<div class="linkcontentwrapper">
<div class="linktext">
<a href="#" class="bodylink">Lorem ipsum dolor sit amet consetetu</a>
</div>
</div>
<br />
<br />
sadipscing elitr, sed diam nonumy<br />
<br />
eirmod sadipscing elitr, sed diam </p>
</div>
</div>
<div id="quicklink3">
<div class="quicklinkcontent">
<div class="linkcontentwrapper">
<div class="linktext">
<a href="#" class="bodylink">Lorem ipsum dolor sit amet consetetu</a>
</div>
</div>
<br />
<br />
sadipscing elitr, sed diam nonumy<br />
<br />
eirmod sadipscing elitr, sed diam </p>
</div>

</div>

I have tried everything I can. One weird behaviour is that if I set the margin to -20px so I can see what happens, in FF it bumps left but it doesn't budge in IE.

Any thoughts on what is going on here? Thanks very much in advance.

Steve

http://www.ColdCallComedy.com

- I have fun with telemarketers

 

[Bandenjamin]

}
.linkcontentwrapper{
	width:136px;
	margin:15px 0 0 px;
	padding:1px 0 1px 0;
	border: 1px dashed #FF00FF;
	}

.linktext{
	text-align:left;
	padding-left:0px;
	padding-right: 20px;
	font-size: 0.9em;
	line-height: 1.2em;	
}

Try removing the 20px. I did and it looked fine in IE and FF both


--Dan
Whenever you find yourself on the side of the majority, it is time to pause and reflect.
Mark Twain

 

[Bandenjamin]

Sorry lost last part. Removed 20 px from linkcontentwrapper margin AND linktext padding-left.

--Dan
Whenever you find yourself on the side of the majority, it is time to pause and reflect.
Mark Twain

 

[Microbe]

Thanks for that, but I guess I should have explained more fully the expected final result which was the DIV at the left of the container so that a hover behaviour was 100% width.

What I have done is teased out the divs a little more adding finer tuning to the content and have solved it.

I was trying to apply the style at too high a level.

Appreciate your help...a new day and your suggestion gave me the answer.

Steve

http://www.ColdCallComedy.com

- I have fun with telemarketers

 

[jlockley]

IE what? 6/7??