• 0

Hand coded shopping site!


Question

7 answers to this question

Recommended Posts

  • 0

That problem is nothing to do with bad HTML. A quicj look at the code will show that.

The problem is with the way the browser renders the tags for that <TR>

If your code for that table row is like (you have to imagine the background and text :) )

<TR>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

then MSIE at least will put extra height on the TR, dunno why, but if you put it all one line like this

<TR><TD></TD><TD></TD><TD></TD></TR>

it will work. Does on the offline version I have here anyway.

Link to comment
Share on other sites

  • 0
then MSIE at least will put extra height on the TR, dunno why,

Man, that's a good question! After a little research, I figured out why. IMG tags are inline by default. According to the CSS2 standard, inline elements need to allow some "footer" space for text (e.g. the "tails" on letters like 'y','p','q','g', etc). That's why there is space below the image.

To get around this correctly without relying on browser quirks, you need to specify a style that will force those IMG tags to behave as block elements instead. In other words, you need to do something like this in your style definition:

img
{
    display: block;
}

I just tried it, and it appears to work regardless of how the TR and TD tags are written. Just realize that the above code changes all your IMG tags. If you want to avoid this, you need to specify and assign a class or id attribute to the IMG tags you want to modify.

The fact that IE renders it "correctly" by changing how the code is written shows that this is a render bug in IE. When MS fixes this in future versions, the web page will most likely render with the extra "footer" space again.

Link to comment
Share on other sites

  • 0

Don't know if it happens in other browsers, seem to remember doing complex tables and trying to get them to work in both MSIE and Netscape was a real chore, both had their little quirks.

Well figured out though. could assign a CLASS called 'menu' to the TR and then have a menu.IMG {display: block} (think that is the right way round) so it would not affect all IMG.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.