Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: IE css bug

  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE css bug

    This has been bugging me for two days.
    Somehow IE is creating extra space.
    I have done a css reset

    Code:
    <tr>
        <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>
        <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>
            <div style="font-size:1.6em;color:#56775F;position:relative; top:60px; left: 100px;">call for a free estimate</div>
            
        </div></td>
    </tr>
    relevant css
    Code:
    * {
    margin:0 auto;
    padding:0;
    }
    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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    This part looks the likeliest candidate:

    Code:
    <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?

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    SB65 what is it that you suspect about that div?
    This is the page in question:

    http://nydeercontrol.com/index.php?services

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

    Thanks for your time.

  • #4
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You have given "left:100px" in that dive. Might be it is the reason for the content to shift to left.
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by mapleleaf; 10-26-2009 at 04:27 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

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

    Code:
    <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:

    Code:
    <div style="font-size:1.6em;color:#56775F;text-align:right;margin-right:10px">
    then it won't expand beyond the containing div.

  • Users who have thanked SB65 for this post:

    mapleleaf (10-26-2009)

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Perfect.
    Much Appreciated. That was killing me.
    Cheap site with a stupid bug.

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •