2 replies [Last post]
muscle
Offline
newbie
Last seen: 18 years 26 weeks ago
Joined: 2003-07-23
Posts: 9
Points: 0

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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TimeBandit
Offline
Enthusiast
Maryland, USA
Last seen: 17 years 20 weeks ago
Maryland, USA
Joined: 2004-09-02
Posts: 112
Points: 0

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.