View Full Version : IE css bug

Oct 25th, 2009, 04:39 AM
This has been bugging me for two days.
Somehow IE is creating extra space.
I have done a css reset

<td class="servicesleft">
<span class="about_us">About Us</span><br>

<p style="margin-left:30px;">
<span class="green">Having my roots in the landscaping field for numerous years,</span> I had the opportunity to have worked at some of the finest properties in NY & CT. Ive worked with different landscape designers all of whom had their own style and plant preference. Yet, they all shared a common problem...deer damage.<br>

Through the years, varied trees and shrubs have become limited to a select few deer resistant plants. The colorful gardening beds and beautiful landscapes have now been eclipsed by 8 ft tall fences. This is not the way for homeowners to enjoy their outdoor scenery.<br>
I began experimenting with different methods of deterring deer, while avoiding the "caged in" look of fences or the implementation of expensive ultrasonic devices.<br>
Adaptability is the best approach in correcting this problem. Since all four seasons differ in temperature and conditions - and so should the method of deer control used. Application times and diversified spraying techniques have been the key to success.</p>
<td width="410" align="left" valign="top"><div style="background-image:url(images/no_deer_address_box.jpg); width:299px; height:195px;text-align:left; position:relative; top:20px; left:20px">

<div style="position:relative; top:30px; right: 42px; width:135px; text-align:right;">
<span style="color:#467158;font-size:1.1em; line-height:1.3em;">Deer Control<br>

301 ###### Avenue<br>
####, NY #####<br><br>
(###) ###-####</span>
<div style="font-size:1.6em;color:#56775F;position:relative; top:60px; left: 100px;">call for a free estimate</div>


relevant css

* {
margin:0 auto;
table, caption, tbody, tfoot, thead, tr, th, td, div {
margin: 0 auto;
padding: 0;
border: 0;
outline: 0;
td.servicesleft{padding-bottom:20px;padding-top:15px; width:490px;text-align:left;}
span.about_us{text-align:left; font-size:1.8em; padding-left:30px;}

Whole page is 902.

Somehow this part is pushing the width beyond the 902 in IE

Any clues would be much appreciated.

Oct 25th, 2009, 12:34 PM
This part looks the likeliest candidate:

<div style="font-size:1.6em;color:#56775F;position:relative; top:60px; left: 100px;">call for a free estimate</div>

but I'm guessing really in the absence of preferably a link to your page or, failing that, your full html and css.

Also, what version of IE are you seeing the problem in?

Oct 26th, 2009, 01:54 AM
SB65 what is it that you suspect about that div?
This is the page in question:


IE 6,7 and 8 all push the central part of the page to the left.

Thanks for your time.

Oct 26th, 2009, 06:38 AM
You have given "left:100px" in that dive. Might be it is the reason for the content to shift to left.

Oct 26th, 2009, 04:22 PM
I removed the left:100px; and still the same.
That seems to be working fine as it is relative so is just positioned within that div.

Thanks for the suggestion though.

Just removed all positioning for that div and still the same too.

Oct 26th, 2009, 05:17 PM
OK, after much messing about it seems like IE will only behave itself if you explicitly set the widths of both the table and both the tds in that second row.

I set:

<table width="902" class="main" cellpadding="0" cellspacing="0" style="border:1px outset #032f15;">


<td width="412" align="left" valign="top">

for the div on the right. (IE being IE, if the width on that second td is 411 not 412 then the left hand div collapses to a much smaller width.)

Bit of an odd one...

Your position:left on the div, which I was originally suspicious of will then also be OK, it seems. I was indeed suspicious of the left:100px positioning, which was making the text extend beyond the containing div, although seems like that wasn't the cause.

An alternate approach for that div might be, however:

<div style="font-size:1.6em;color:#56775F;text-align:right;margin-right:10px">

then it won't expand beyond the containing div.

Oct 26th, 2009, 06:21 PM
Much Appreciated. That was killing me.
Cheap site with a stupid bug.

Thanks again.