IE6 image plus div problem

[Nitrodist]

The problem I'm having with IE6 and images is with putting an image of the same dimensions of the div inside that div. The image stretches the div's width past what it should be. FF3 renders it correctly. Below is the html+css I'm using and 2 screenshots comparing the 2 behaviors.

html

Code: Select all

<div id="nav">
   <img src="img/nav.jpg">
</div>


css

Code: Select all

#nav
{
   border:1px solid #000;
   font-size:1px;
   width:700px;
   height:50px;
   margin:50px auto 0px auto;
   padding:0;
   border-bottom:none;
}


The font-size:1px; is in there to fix the -3px IE6 margin error.

Firefox 3 rendering:

http://bayimg.com/kaOnOaabL

IE6 rendering:

http://bayimg.com/kaOnMaAbl


So, does anyone have an idea how to fix this? It's for a computer repair site (granted, the site will probably be redesigned quickly) and IE6 is most likely a mainstay of computers that need repair


edit:

I compared the widths of the frame below (which is of the same width) and it turns out that IE6 is rendering a div with width of 700px as 698, meaning that "stretching" of the div above is actually correct. I've also noticed that when I removed the border, it would render to the full 700px. I guess IE6 sees the border as 700px including the border...

Anyone have a fix for this?

edit2:

Ok, found out the problem. I had

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

At the beginning which triggers IE6 to render CSS boxes as IE5. Or something like that. Removing the line fixes the behavior.

http://www.codingforums.com/archive/ind ... 03714.html

Damn you IE6!