Member Avatar for lifeworks

hi

im making boxes with rounded corners... so i have a container(div); with an image at the top, then a div with the content inside, then an image underneath... In Firefox all is well, but in Internet Exploder there is a gap between the top image and div, looks like about 5px...

any ideas?

Thanks
lworks

  • 1 Contributor
  • 1 Reply
  • 92 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by lifeworks

Dani AI

Generated

Nice catch by — that extra gap is the classic inline-image baseline gap. Images are inline by default, so they sit on the text baseline and leave room for font descenders; some browsers (older IE builds in particular) show that reserved space as a visible gap. See the HTML img element and vertical-align on MDN for details.

Other practical fixes besides making the image a block-level element: set the image vertical-align to top (or bottom), collapse the wrapper whitespace with line-height: 0 or font-size: 0, float the image, or remove the literal newline/space between the image tag and the following element. For modern designs, consider using CSS background images for corner slices or CSS border-radius to avoid image slices entirely (border-radius reference).

If the gap appears only in Internet Explorer, confirm a standards-mode DOCTYPE so IE does not enter quirks mode, and test the page in the actual IE document mode. That will narrow whether the issue is a baseline-spacing rule or an older IE layout quirk.

Member Avatar for lifeworks

aah, i found the issue... seems that images are by default set to 'inline' and changing them to 'display: block' solves the problem...

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.