Thu, 2004-09-09 16:17
I've got the following page setup as a demo of my problem...
http://www.imagetechnicalservices.tv/template/module_1/001.html
The problem is the background images are repeating in IE, in mozilla and netscape, no problems. I've heard this termed a the 3 pixel IE bug. Not sure if this is accurate. My question is this, is there someway to solve this problem with CSS and change my code. I'm desperate for ANY insight.
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td align="left" bgcolor="#E8EDF3" background="../images/pn_slice.gif" valign="top" style="background-repeat: repeat-x;">
<a href="020.html"><img src="../images/previous.gif" border="0" alt="Jump to Previous Page" /></a>
</td>
<td align="center" bgcolor="#E8EDF3" background="../images/pn_slice.gif" valign="top" style="background-repeat: repeat-x;">
<font face="Arial, Helvetica, sans-serif" size="-2" color="#FFFFFF">21 of xx</font>
</td>
<td align="right" bgcolor="#E8EDF3" background="../images/pn_slice.gif" valign="top" style="background-repeat: repeat-x;">
<a href="022.html"><img src="../images/next.gif" border="0" alt="Jump to Next Page" /></a>
</td>
</tr>
</table> 
Thu, 2004-09-09 17:00
#1
Desperate for help
I don't think that it's the 3 pixel jog problem as this applies to floats as far as I'm aware, it's more likely an image size/ padding problem but the fact that your test page has no proper structure is probably not going to help no dtd means that the browsers are rendering in quirks mode and I don't know how that would effect things; for starters I would pull out the style decs into an external sheet and drop deprecated table styling in favour of CSS that's if you must use tables
a pure CSS layout would be preferable, easier to help with.
Hugo.
Fri, 2004-09-10 02:11
#2
Desperate for help
1) Always put something inside your most-nested tag, such as a non-breaking space. Some TAGS will collapse in certain browsers if you do not put something inside them.
2) When you have space or text inside tags, browser defaults sometimes assume a size for this space, like 16px i think.
3) what's happening to you here is that IE is assuming you want the empty space in your A tag to be its default size since u didn't declare a size.
4) declare a size for "empty" tags, or because of rule 1 above, declare a font-size for all tags that have near-to-no content, even if it is a non-breaking space.
5) now that you've read all this and absorbed it and it is now a part of your essence, you get the short answer, Grasshopper:
use style="font-size: 1px" in addition to your other inline styles. Obviously you may not want "21XX" to be 1px high so set that at whatever u want.