Member Avatar for mdminternet

Hi there,

I'm having an issue with internet explorer that I have come across in the past.

The thing that is really confusing me is that it seems to randomly decide when it's going to do it.

Basically it adds a slight break between my tables (whether it be full tables or just the cells).

This doesn't happen in Firefox.

I use tables to keep images together to help build a flowing website - but I use the same technique on other pages I have (see www.smart-wheels.co.uk for example) and it doesn't have any problems...

However if you look at in both firefox and ie, you'll see what I'm on about.

Anybody have any ideas on how to correct this issue?

Thanks in advance..

  • 4 Contributors
  • 5 Replies
  • 130 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A tiny gap between adjacent images or table cells is almost always coming from how browsers render whitespace and the inline formatting context — a newline or space in the source between inline elements becomes a rendered “space” in the line box. This thread already has useful troubleshooting: showed a source-layout workaround, pointed to display/doctype issues, and flagged the need to modernize markup. Below are a few additional, practical options and a short debugging checklist that are safe to try without redoing the whole layout.

Try these quick CSS-based fixes (not shown earlier in the thread)

  • Collapse the line box where the images live by setting the container’s line-height to zero (use only where there’s no text you need to keep).
    .container { line-height: 0; }
  • Prevent baseline gaps by changing the inline alignment of the images:
    td img { vertical-align: top; }

    Either alone will often remove the “sliver” between stacked inline elements without restructuring your HTML.

Longer-term recommendations

  • Use a modern DOCTYPE (standards mode) and remove deprecated presentational attributes; this avoids many browser inconsistencies. See MDN on DOCTYPE (standards vs quirks): Doctype (MDN).
  • Replace table-based layout with CSS layout (flexbox/grid) when possible; this makes spacing predictable across browsers.

Debug checklist

  • Open devtools, inspect the affected cells/images, and watch computed values for line-height, margin, padding, and vertical-align.
  • Temporarily toggle line-height:0 or vertical-align in devtools to confirm the fix before changing source.
  • Validate markup at the W3C validator to catch stray tags or attributes: W3C Validator.

Background reading on the two CSS properties used above: line-height (MDN) and vertical-align (MDN).

Recommended Answers

All 5 Replies

Member Avatar for ratri

:) there are quite a few IE surprises .... try out the HTML code below ... and it looks fine in IE. I have only formatted the HTML document so that the opening/closing TD tags and its content are in the same line.

<HEAD>
<TITLE>Plumbing, roofing, kitchen fitting, bathroom fitting, property maintenance :: Wyser Maintenance</TITLE>
<LINK rel="stylesheet" type="text/css" href="http://www.movetwo.co.uk/test/style.css" />
</HEAD>
<BODY topmargin='0' rightmargin='0' leftmargin='0' bottommargin='0'>
<TABLE width='800' height='100' cellpadding='0' cellspacing='0' border='0' bgcolor='#003399' ID="Table1">
<TR width='800' height='25' bgcolor='#003399'>
    <TD width='800' height='25' bgcolor='#003399' valign='top'><IMG src='' width='800' height='25' alt='Wyser Maintenance' border='0'></TD>
</TR>
<TR width='800' height='75' bgcolor='#ffffff'>
    <TD width='800' height='75' bgcolor='#ffffff' valign='top'><IMG src='' width='800' height='75' alt='Wyser Maintenance' border='0'></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Member Avatar for mdminternet

That worked...

Many thanks for your help...

I really do question why people use Internet Explorer..

Member Avatar for Troy III

I really do question why people use Internet Explorer..

Well lets elaborate on this a little. Making this kind of declarations based on ignorance and frustration, is acceptable and understandable - but completely untrue...

table{font-size:0}
or
expected <br> tag after the inline element closure (in this case: .../img>)
would have legally fixed your so called problem in no time.

In HTML
IMG is defined as inline element. (unless)
Any rendered element, be it a text character, image or any other inline element followed by a white space character is considered a "word" that a priory requires a divider and should be rendered by browser agent to provide this necessary "white-space" division between them.

Netscape is not following this absolutely unbeatable correct logic, since its beginning.

Not to forget that Tables are not supposed to be used for designing purposes.

Netscape erroneous presumption caused that countless billions of so called Spacer images -mostly GIFs to be produced - and they all had to be downloaded, and every page had at least 10 GIF who's sole role was to provide 1px; 2px; 3px; 4px; 5px ...10px space as needed for particular layout design. Representing trillions of terrabits wasted bandwidth over years.

etc

etc

While your white-space problem could have been corrected easily and with html correct structure by simply providing a BR tag right after img tag closure. Than you could add as much as you desire white-space characters without any impact on your layout.

Or since you've decided to misuse table tags for nontabular means, table{font-size:0} would be more than enough. As Netscape forced us to do with visual elements (images) that were never meant to get rendered, than why not hack this white-space manipulating font?

Since, for spacing purposes, the amount of rendered white-space between inline elements will always be proportional to a whitespace needed to divide words of the given font-type and font-size value and it can be easily controlled by font-size values.

You should never miss to specify the fontsize in your body. This will make sure that if your client changes the font size on his browser, your layout and page elements will stay in place for both browsers.

Yet another completely legal and standard css isntruction would be "what?" :)
The most standard and most correct instruction to day: To declare and treat these natively inline elements as you require them: block elements!

/*Example: (css)*/
img {display:block}

And you're done! No legal but forgettable html semantics like "<br>"; no css hacks like "font-size:0" - but plain conversion of an inline element into a block element with a standard css attribute declaration. Although for backward compatibility it is allway's better to use a legal html formatting <br> tag.

***

Now let's see. Who is right and who is wrong once again.
If you finally correct that problem with the most standard way possible by declaring your images as block elements to avoid that undesired space, and watch it getting rendered in both browsers "correctly" or as you intend to.

As soon as you decide to go next step and declare
your document as:
HTML 4.01 Strict DTD
-Netscape will come out for you.

You will be reproducing the same "error" you encountered while coding in noncompliance way back then in IE, but this time in Netscape. (That is Firefox) and you will be completely helpless.

Here is the exmp. code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE></TITLE>

<style>
img{display:block}
</style>
</HEAD>

<BODY>

<TABLE width='800' height='100' cellpadding='0' cellspacing='0' border='0' bgcolor='#003399'>
<TR width='800' height='25' bgcolor='#003399'><TD width='800' height='25' bgcolor='#003399' valign='top'>
<IMG src='' width='800' height='25' alt='Wyser Maintenance' border='0'>
</TD></TR><TR width='800' height='75' bgcolor='#ffffff'><TD width='800' height='75' bgcolor='#ffffff' valign='top'>
<IMG src='' width='800' height='75' alt='Wyser Maintenance' border='0'>
</TD></TR></TABLE>

</BODY>
</HTML>

AND THERE'S NOTHING YOU CAN DO ABOUT IT :D
NOTHING WILL HELP YOU. - NOT <BR> TAGS NOT EVEN REMOVING ALL NEW-LINE CHARACTERS, that "IE Specific" ""bug"" will stay in Netscape/firefox - forever. But will not show itself in IE anymore.

Interesting?!!!

***
p.s.:
Well, not at least until you correct all ilegal attributes on your table completely :D :)

Member Avatar for Troy III

Allow me to be helpful
A valid W3C that will render as you desired in all major browsers should look like this:.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<TITLE>Plumbing, roofing, kitchen fitting, bathroom fitting, property maintenance :: Wyser Maintenance</TITLE>

<style type="text/css">
</style>
</HEAD>

<BODY>

<TABLE>
<TR>
<TD>
<IMG src='' width='800' height='25' alt='Wyser Maintenance'>
</TD>
</TR>
<TR>
<TD>
<IMG src='' width='800' height='75' alt='Wyser Maintenance'>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Regards

Member Avatar for MidiMagic

The following code contains many code items that are deprecated (will not be supported in future browsers):

<HEAD>
<TITLE>Plumbing, roofing, kitchen fitting, bathroom fitting, property maintenance :: Wyser Maintenance</TITLE>
<LINK rel="stylesheet" type="text/css" href="http://www.movetwo.co.uk/test/style.css" />
</HEAD>
<BODY topmargin='0' rightmargin='0' leftmargin='0' bottommargin='0'>
<TABLE width='800' height='100' cellpadding='0' cellspacing='0' border='0' bgcolor='#003399' ID="Table1">
<TR width='800' height='25' bgcolor='#003399'>
    <TD width='800' height='25' bgcolor='#003399' valign='top'><IMG src='' width='800' height='25' alt='Wyser Maintenance' border='0'></TD>
</TR>
<TR width='800' height='75' bgcolor='#ffffff'>
    <TD width='800' height='75' bgcolor='#ffffff' valign='top'><IMG src='' width='800' height='75' alt='Wyser Maintenance' border='0'></TD>
</TR>
</TABLE>
</BODY>
</HTML>

The deprecated items are:

- Capital letters in tags. All tags shall be in lowercase.
- Capital letters in attributes and styles.
- All size attributes (width, height). Use CSS for these.
- All box surrounding attributes (margin, topmargin, bottommargin, leftmargin, rightmargin, border, padding). Use CSS for these.
- All color attributes (color, bgcolor). Use CSS for these.
- All alignment attributes. Use CSS for these.
- Nonzero widths and heights without units of measure.
- Double quotes, not single quotes, are supposed to be used for parameters.

In addition. you could have more trouble if you have some tags with both size and nonzero surrounding attributes applied. This causes an IE incompatibility with other browsers, because IE puts the surrounding styles INSIDE the size styles, while all other browsers places them OUTSIDE.

The above code might validate NOW under the old standard, but the day is rapidly approaching when the old style of writing web pages no longer works (like the greedy federal demand that we change to DTV by next February).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.