www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image positioning incorrect in IE.

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    Image positioning incorrect in IE.

    Hi all. This issue has been bugging me for quite some time now.

    I'm building a clan/guild website. It is viewed perfectly in Firefox, Chrome and Opera - however images on the right side of the page are completely out of place in Internet Explorer. When you refresh the page in internet explorer, the position of aforementioned images will also change for reasons which I can not explain.

    You can view the page here: http://www.momentumwow.com/oldsite/2.html

    My knowledge of website coding/creation is limited to what I learnt back in high school. After extensive searching however, I haven't been able to find any solutions.

    Is anybody at all able to tell me what the issue is or even give some form of insight towards the problem as I'm at a complete loss of ideas.

    Any help appreciated in advance. Thankyou.

  2. #2
    Join Date
    Feb 2010
    Posts
    184
    I don't know why but hspace on your banner image seems to make ie8 ignore the width settings that you have provided. To center an inline element I suggest you style the container with style="text-align: center" i.e. add that to your td

    After that is removed the width of the two cells containing your main content and side content will be correct.

    There are also significant problems with your Main_Content_Pos and Side_Content_Pos class in ie8 and ie7. They must be removed and replaced by styling the containing cell (the td) instead. You will need to use vertical-align: top on both cells to move the content up.

    When finished there will be some positioning problems which are relatively easier to fix.
    Last edited by letmehaveago; 04-18-2010 at 01:42 AM.

  3. #3
    Join Date
    Apr 2010
    Posts
    2
    First of all, thanks for the help, I finally seem to be getting some progress now. By fixxing that code on the Side_Content_Pos - it seems to be in the right position in all browsers however, its still jumping up and down when you refresh the page.

    Also, when you said to add style="text-align: center" to the TD, where exactly did you mean to? Tried a few places and couldn't get it to work.

  4. #4
    Join Date
    Feb 2010
    Posts
    184
    Your using hspace="200" to center your banner. In some cases your also using position: relative; left: 200px. You should use text-align: center instead as shown below...

    Code:
    <tr>
        <td colspan="2" style="text-align:center"><span class="background"><img src="image/banner.png" alt="momentum banner" width="517" height="152" style="text-align: center"></span>
        </td>
    </tr>
    My second point may address the jumping up and down.

    There are also significant problems with your Main_Content_Pos and Side_Content_Pos class in ie8 and ie7. They must be removed and replaced by styling the containing cell (the td) instead. You will need to use vertical-align: top on both cells to move the content up.
    That is remove Main_Content_Pos and Side_Content_Pos completely from your code and just style your td as shown below:

    Code:
    <tr>
        <td style="width: 573px; vertical-align: top;">
            <!-- your main content here -->
        </td>
        <td style="width: 337px; vertical-align: top; padding-left: 20px;">
            <!-- your side menu here -->
        </td>
    </tr>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles