Question

One of my users is having this weird problem that I cannot seem to replicate or figure out the issue.

He has reported a lot of various problems of images not showing up correctly which I was able to fix by adding “px” to the width and height. It seems like IE7 was not able to set a default unit.

However, this problem is one that I cannot figure out.

Here are the two images, the blurry one being his (cell phone image).

I have tried using IE NetRenderer as well as Adobe BrowserLabs with no luck. I have also ran the W3 Validator and only got errors relating to my Facebook Like button code.

Here is the code for the chat:

  <div id="content">
    <h1>Chat</h1>
        <div style="padding-left: 100px;">
        <div class="wrapper_product"> 
            <div class="wrapper_product_inner">
                <div style="padding-left: 5px; padding-right: 5px;" id="usersOn">
                </div>
                <br />
            </div> 
        </div>
<br />
        <div class="wrapper_product"> 
            <div class="wrapper_product_inner">
                <div style="padding-left: 5px; padding-right: 5px; padding-bottom: 5px; overflow: auto; height: 300px;" class="chatActual" id="actual"><!--COMMENTEED OUT BECAUSE NOT NECESSARY!--></div>

            </div> 
        </div>
        <br />
        <div style="padding-left: 100px;">
    <input type="text" name="message" id="message" value="" style="float:left; padding:6px 10px; width:292px; height:14px; border:none; background:url(http://www.mydomain.com/images/bg-input-2.gif) no-repeat left top;" />&nbsp;&nbsp;&nbsp;<input type="image" name="post" value="Post" id="sendMessage" style="float:left; padding-left: 5px;"  src="http://www.mydomain.com/images/post.png" alt="Post" />
    </div>
    </div>
<!--JAVASCRIPT CODE COMMENTED OUT-->
</div>

I am starting to wonder if this issue could be caused by the padding-left being used?

Answer 1

I concluded that IE does not like input text boxes with images and just reverted to using a normal input text box.