Member Avatar for pataya

Hi there,
The banner shows up fine in IE but not in Firefox...
Any quick fix for this?
The temporary url is:

  • 3 Contributors
  • 2 Replies
  • 77 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

— this is a classic case of relying on implicit browser defaults. was right to call out the spans and table structure, and was right to point at vertical alignment differences. Different user-agent styles and quirks/standards mode can make the same markup render differently in IE and Firefox, so the reliable fix is to make the behaviour explicit and to validate the markup.

Immediate, low-risk fixes:

  • Explicitly set the vertical alignment only on the header cells that contain the banner so all browsers render the same way.
  • If the banner is an inline image, force it to be block-level to remove inline baseline gaps.
/* scope the rule to just the top/header cells */
table.header td { vertical-align: top; }

/* if the banner is an inline image */
table.header img { display: block; }

Longer-term recommendations: ensure a standards DOCTYPE so browsers use the same box model, run the page through the W3C validator to catch unclosed tags or stray spans, and consider replacing table-based layout with CSS layout (flexbox/grid) for predictable cross-browser behavior. See the CSS property reference for vertical-align on MDN for details: vertical-align on MDN. Validate markup at the W3C validator: W3C Validator.

Recommended Answers

All 2 Replies

Member Avatar for pty

Hi there,
The banner shows up fine in IE but not in Firefox...
Any quick fix for this?
The temporary url is:

Its because of the spans in your table at the top. I attached a screenshot with your table cells highlighted.

Firefox is actually handling it correctly.

I suggest that you use CSS rather than tables for layout; you won't run into problems like this.

banner-table.png 83.53 KB
Member Avatar for MidiMagic

The problem is that FF correctly defaults to centering cointent in table cells, IE shoves it to the top instead.

Set the vertical-align style parameter in the td tag, and this stuff will work the way you want it to in both browsers.

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.