Personal computing discussed

Moderators: SecretSquirrel, just brew it!

 
Nitrodist
Grand Gerbil Poohbah
Topic Author
Posts: 3281
Joined: Wed Jul 19, 2006 1:51 am
Location: Minnesota

IE6 image plus div problem

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
<div id="nav">
   <img src="img/nav.jpg">
</div>


css
#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

<?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

Who is online

Users browsing this forum: No registered users and 0 guests