ansaurus

Question

Answer 1

A:

The black bar is your background color showing. If you don't want to see the black, one option is to remove the background:#000 from your div's style attribute.

Also, why are you using height: 50px in your style attribute? If you're trying to resize the image itself, use the height attribute instead.

OPTION 2:

This code seems to also remove the black background form showing:

<!DOCTYPE html>
<html>
  <body>
    <div style="background:#000;">
    <img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;">
    </div>
  </body>
</html>

Babak Naffas 2010-09-20 18:50:07

I added the black color for debugging purposes only (the whole code is to show the problem). But I wonder why XHTML and HTML5 display different?

gucki 2010-09-20 18:57:27

Try adding this to the div style: `margin:0;padding:0;border:0;`.

Francisc 2010-09-21 12:05:04

Answer 2

+1 A:

It's not the XHTML doctype as such that changes it, it's more like strict vs transitional.

Using a XHTML 1.0 transitional doctype puts the browser into limited-quirks mode, whereas the HTML5 style doctype selects standards mode. The vertical-align of images is different between the two modes.

You can see the same black line if you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">which also puts the browser into standards mode.

There are a number of ways to remove the black line. One is to set the img to display:block. Another is to set the img to vertical-align:bottom.

Alohci 2010-09-20 19:42:54

If only vertical-align is differen, it doesn't explain why the div gets 4px higher than the image. Normally the image should fit exactly, as the div is positioned absolute without any width/height specified. It seems in html5 the browser silently adds some sort of padding at the bottom?

gucki 2010-09-22 14:53:16

ansaurus

tags:

views:

answers:

strange html5 behavior

related questions