IE6 image plus div problem

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

IE6 image plus div problem

Postposted on Fri Apr 03, 2009 6:00 am

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 :P


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!
Image
Nitrodist
Grand Gerbil Poohbah
 
Posts: 3280
Joined: Wed Jul 19, 2006 1:51 am
Location: Minnesota

Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 4 guests