Member Avatar for scru

This seems like a problem that would have an easy solution, but I just cant figure out what it is.

I made a png concept for a page, and I spilt the banner into multiple parts in order to get it display how I wanted. Only it doesn't in firefox. I'll attach a zip file to show you what i mean, and also a screenshot.

There is a space between the top part of the banner, and the bottom part, which does not appear in IE. I figure this has something to do with how the browsers render tables...but geez...

Is there anyway I can force firefox to eliminate that space without messing up the display in ie?

  • 2 Contributors
  • 4 Replies
  • 76 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This is a classic cross-browser rendering quirk when you stack image slices inside table cells. discovered the symptom and fixed it by forcing cell alignment, and correctly called out that different browsers use different defaults for vertical alignment inside table cells — which is why the slices looked joined in one browser but showed a gap in another.

Why it happens: images are inline-level replaced elements and sit on the text baseline, leaving a tiny gap for descenders. Different engines treat table-cell children slightly differently, so that baseline/centering behavior can produce a visible seam. Two reliable, cross-browser fixes that do not depend on browser defaults are to make the slice images block-level or to collapse the line box inside the cell.

Try one of these approaches:

td img {
  display: block;
}

/* or, if the cell contains only images */
td {
  line-height: 0;
}

Cautions: setting line-height to zero will affect any text in the cell, so prefer the display:block solution when text is present. If keeping images inline is needed for other reasons, explicitly setting the cell alignment to top (as did) is a safe fallback. More on the properties involved at vertical-align on MDN and the img element on MDN.

Member Avatar for scru

Never mind, fixed by changing vertical-align to middle in my style sheet

Member Avatar for scru

wait...now theres a space in IE...a much smaller one about a pixel thin...

Member Avatar for scru

okay..i should have tried this before i talked, vertical-align:top in the style sheet works for both

Member Avatar for MidiMagic

The reason:

IE defaults to top
FF defaults to middle

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.