Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

help with weird image behaviour in IE!

Options
  • 17-05-2005 5:21pm
    #1
    Ardent
    Registered Users Posts: 5,291 ✭✭✭


    Hi all

    I'm having a problem with two image in my web page, they're all over the place in IE yet appear fine in Firefox. You can see the difference between the browsers in the two attached image examples.

    Here is the html code:
    <html>
    <body>
    <table width="212" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="212">
    <img src="../images/spacer.gif" alt="" width="212" height="1">
    </td>
    </tr>
    <tr>
    <td width="212">
    <img src="../images/index024-3.jpg" alt="" width="212" height="22">
    </td>
    </tr>
    <tr>
    <td width="212">
    <img src="../images/index024-5.jpg" alt="" width="212" height="16">
    </td>
    </tr>
    <tr>
    <td align="right" background="../images/index024-6.jpg">
    <table width="196" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="103" valign="top" align="left">
    <table width="196" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="15"></td>
    <td width="181" valign="top" class="text2" colspan="3">
    <strong>Your cart is empty</strong>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td width="212" height="4">
    <img src="../images/cart_spacer.gif" alt="" width="212" height="4">
    </td>
    </tr>
    <tr>
    <td width="212" height="4">
    <img src="../images/cart_spacer.gif" alt="" width="212" height="4">
    </td>
    </tr>

    <tr>
    <td width="212" height="4">
    <img src="../images/cart_end.gif" alt="" width="212" height="4">
    </td>
    </tr>
    </table>
    </body>
    </html>

    The problem is with the images cart_spacer.gif and cart_end.gif which are exactly 4 pixels high and 212 pixels wide each.

    It's driving me insane! Can anyone see anything obvious in the code that might be causing this behaviour in IE?

    Thanks,
    Ardent


Comments

  • Options
    #2
    yeraulone
    Registered Users Posts: 597 ✭✭✭yeraulone


    try setting a table height?


  • Options
    #3
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    The shopping cart is dynamic (i took out the jsp code for clarity) so the table height will be variable depending on the number of items in it. For that reason I can't put in a table height? Anyway, the other images at the top of the table seem to line up fine so why not the one near the bottom?


  • Options
    #4
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    try this

    <html>
<body>
<table width="212" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="212">
<img src="../images/spacer.gif" alt="" width="212" height="1">
</td>
</tr>
<tr>
<td width="212">
<img src="../images/index024-3.jpg" alt="" width="212" height="22">
</td>
</tr>
<tr>
<td width="212">
<img src="../images/index024-5.jpg" alt="" width="212" height="16">
</td>
</tr>
<tr>
<td align="right" background="../images/index024-6.jpg">
<table width="196" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" valign="top" align="left">
<table width="196" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="181" valign="top" class="text2" colspan="3">
<strong>Your cart is empty</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_end.gif" alt="" width="212" height="4"></td>
</tr>
</table>
</body>
</html>


  • Options
    #5
    BizzyC
    Registered Users Posts: 3,012 ✭✭✭BizzyC


    Ph3n0m wrote:
    try this

    <html>
<body>
<table width="212" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="212">
<img src="../images/spacer.gif" alt="" width="212" height="1">
</td>
</tr>
<tr>
<td width="212">
<img src="../images/index024-3.jpg" alt="" width="212" height="22">
</td>
</tr>
<tr>
<td width="212">
<img src="../images/index024-5.jpg" alt="" width="212" height="16">
</td>
</tr>
<tr>
<td align="right" background="../images/index024-6.jpg">
<table width="196" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" valign="top" align="left">
<table width="196" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="181" valign="top" class="text2" colspan="3">
<strong>Your cart is empty</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_end.gif" alt="" width="212" height="4"></td>
</tr>
</table>
</body>
</html>
    Dont seee how that'll fix the cell height, it might, but wont it just move the image to the top of the cell and leave the bottom of it empty?

    Is there jsp on that part of the page?


  • Options
    #6
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    hey until Ardent comes back and says it doesnt work....shhhh :)


  • Advertisement
  • Options
    #7
    BizzyC
    Registered Users Posts: 3,012 ✭✭✭BizzyC


    Ph3n0m wrote:
    hey until Ardent comes back and says it doesnt work....shhhh
    lol

    Since JSP is being used, can't you just use it to set the height of those rows to 4, when the shopping cart is empty?
    That'd solve the problem.


  • Options
    #8
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    Phenom,

    Sorry for taking so long in getting back to you. Thanks for the suggestion, yeah that worked but...

    As you can see from the attached image, the problem has now transferred to the top part of the cart!! I tried copying what you did and took out the height attributes of the <td> tags for each image near the top of the cart and tried putting in valign="top" but no joy.

    Any ideas?

    Ardent.

    Edit: Looks fine in FF. Would it help if I attached the images used by the code?

    Edit: Meant to say "height attributes" instead of "width attributes".


  • Options
    #9
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    yup, include the images you are using - I was working kinda blind with my fix - with the actual images, it might prove easier


  • Options
    #10
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    First five images...


  • Options
    #11
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    Last image.

    Thanks for having a look Phenom, much appreciated. I'm totally out of my depth with this web code/browser stuff.

    Ardent


  • Advertisement
  • Options
    #12
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    any chance of getting

    index024-3.jpg
    index024-5.jpg
    and
    index024-6.jpg


  • Options
    #13
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    Phenom,

    I posted twice. You'll find those images attached to my first post.

    Ardent.


  • Options
    #14
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    Fixed for IE and Firefox

    The problem is that sometimes in IE, the <td> and </td> tags need to be wrapped around the item(s) in question, like what I have done below
    <html>
<body>
<table width="212" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="212"><img src="../images/spacer.gif" alt="" width="212" height="1"></td>
</tr>
<tr>
<td width="212"><img src="../images/index024-3.jpg" alt="" width="212" height="22"></td>
</tr>
<tr>
<td width="212"><img src="../images/index024-5.jpg" alt="" width="212" height="16"></td>
</tr>
<tr>
<td align="right" background="index024-6.jpg">
<table width="196" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" valign="top" align="left">
<table width="196" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="181" valign="top" class="text2" colspan="3">
<strong>Your cart is empty</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_end.gif" alt="" width="212" height="4"></td>
</tr>
</table>
</body>
</html>


  • Options
    #15
    BizzyC
    Registered Users Posts: 3,012 ✭✭✭BizzyC


    Yep, posted a wrong solution cause I got it working, the same way Ph3n0m did, only I had made a change and thought that that was why it worked.


  • Options
    #16
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    Agonisingly close.

    Phenom: check out the attached image to see what I see now. For some reason the background image under the words "Your cart is empty" is not displayed.

    Ardent


  • Options
    #17
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    was going to give out and say do it yourself, since it was a simple change even you could have done - but decided I am way to hungover to care, so here is the fix

    <html>
<body>
<table width="212" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="212"><img src="../images/spacer.gif" alt="" width="212" height="1"></td>
</tr>
<tr>
<td width="212"><img src="../images/index024-3.jpg" alt="" width="212" height="22"></td>
</tr>
<tr>
<td width="212"><img src="../images/index024-5.jpg" alt="" width="212" height="16"></td>
</tr>
<tr>
<td align="right" background="../images/index024-6.jpg">
<table width="196" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" valign="top" align="left">
<table width="196" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"></td>
<td width="181" valign="top" class="text2" colspan="3">
<strong>Your cart is empty</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_spacer.gif" alt="" width="212" height="4"></td>
</tr>
<tr>
<td width="212" valign="top"><img src="../images/cart_end.gif" alt="" width="212" height="4"></td>
</tr>
</table>
</body>
</html>


  • Options
    #18
    Ardent
    Registered Users Posts: 5,291 ✭✭✭Ardent


    OK, I get what was happening now. At first I couldn't see what you had done to fix the html, even though you had explained it (the wrapping of items with <td> and </td>).

    If I take the html from my original post and put the <td><img src=...></td> tags together on the same line, it works perfectly. Left as is, gaps appear between the images.

    Thanks a million for pointing this out Phenom, I could have been messing around with this for the rest of my life (I like to indent my html for clarity) and would never have discovered the problem was due to sloppy html parsing by Internet Exploder.

    Another example of why Firefox is the better browser IMO.

    Thanks again,
    Ardent.


Advertisement