IE6 image plus div problem
Posted: 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
css
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
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!
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!