Why does Opera 9 have a space between these two images?

Asked 23/2, 2011 at 12:36 Answered 23/2, 2011 at 12:40

Every other browser is rendering this correctly.

<body>
    <div>
        <div><img src="img/logo_top.png" width="168" height="85" alt="Logo top" /></div>
        <div><img src="img/logo_bottom.png" width="168" height="83" alt="Logo bottom" /></div>
    </div>
</body>

It's the same thing without the divs, and with a < br /> between images.

Update:

Here is my HTML, with doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            img {border: none;}
            body {font-size: 0px;}
        </style>
    </head>
    <body>
        <div>
            <div><img src="img/logo_top.png"  alt="Logo top" /></div>
            <div><img src="img/logo_bottom.png" alt="Logo bottom" /></div>
        </div>
    </body>
</html>

Chaworth answered 23/2, 2011 at 12:36 Comment(2)

Is it possible that Opera makes breaks after divs ?! Eventually you can fix that with CSS. – Athabaska 23/2, 2011 at 12:38

What doctype are you using? (show your entire file) – Sezen 23/2, 2011 at 12:38

If it's the issue I think it is, it should be fixed if you add this CSS:

img {
    vertical-align: top
}

Or this:

img {
    display: block
}

Sezen answered 23/2, 2011 at 12:40 Comment(5)

<div> display defaults to block. I think you mean to suggest changing it to inline or inline-block. – Aldrin 23/2, 2011 at 12:43

display: block; worked, thanks! :) Stackoverflow says I can accept an answer in 7 minutes so... – Chaworth 23/2, 2011 at 12:44

@Joel Etherton: You're right, <div> does default to block. However, I'm applying it to <img>. – Sezen 23/2, 2011 at 12:45

See here for a good explanation of the issue. That answer deserves more votes! – Sezen 23/2, 2011 at 12:46

You're right, I'm sorry. I didn't read your answer closely enough. – Aldrin 23/2, 2011 at 12:47

Try removing the whitespace between the first </div> and the second <div>. Sometimes these CRLF whitespace characters are interpreted by the browser as an indication of physical space.

Aldrin answered 23/2, 2011 at 12:38 Comment(2)

I tried that, still has a space between the images. Opera 10 and Opera 11 are ok, it's Opera 9 (ver. 9.50) that I'm having trouble with and the one browser my client is using of course... – Chaworth 23/2, 2011 at 12:43

@Chaworth - You might try changing the style on both divs to display: inline;. – Aldrin 23/2, 2011 at 12:44

Update:

Recommended topics

Hot tags