aeonsky Posted January 2, 2008 Share Posted January 2, 2008 Hello, and thanks for the help. Basically, I have a div and inside the div there is an image. I set the background color with CSS. And in IE (im using ver 7), there is an abnormal border on the bottom of the image. I know that the border is the div which becomes taller than the image, but why??? Here's my code: <div style="background-color:#ccc; height:1000px; width:653px; margin:0px; padding:0px"> <img src="manga/Air Gear/188/001.png" width="653" height="1000"> <div> HERE IS A LIVE LINK! Thanks a bunch! =D Quote Link to comment Share on other sites More sharing options...
djfox Posted January 2, 2008 Share Posted January 2, 2008 IE has issues with png files. The same happens on my site (secrettrance.net) and on Gaia Online when using IE. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 4, 2008 Share Posted January 4, 2008 I tested it on my PC in IE7, and found that your problem should be easily solved. What cursed the "border" (its really not a border). Anyway its cursed by line-breaks, and "Returns" you made while writing your document. IE seam to have a bug, witch renders "extra space" due to this. But i dont think either of you have defined what language you are writing your documents in, and that i belive is the main source; So i cant say if its a bug or not. I tested both with and without the normally needed "!doctype, html, head, body" tags, and found 2 solutions to the problem. And that was before i saw that djfox's website totally where missing all these tags. Im suprized how well it rendered on my PC without them, aside the same problem, which he seam to struggle with aswell. As i said, there are 2 ways to fix this problem, either you can use a doctype such as: <!-- The strict doctype, should put the browser into Standards Mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- The Transitional doctype includes all the elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, such as link targets. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The other way to solve the problem might not be so convenient for obvious reasons, since this requires you to open your document in (nodepad for instance), and delete any "Returns" and "Spaces" you have added. This however should only be needed for the div itself, leaving you with the following code. On a single line: <div style="background-color:#ccc;height:1000px;width:653px;line-height:0;"><img src="fav.png" width="653" height="1000"></div> I would like to recommend using a doctype, like so: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="eng"> <head> <title>Document title<title> </head> <body> <div style="background-color:#ccc;height:1000px;width:653px;line-height:0;"> <img src="fav.png" width="653" height="1000"> </div> </body> </html> If this for whatever reason still dosent eliminate the problem. Then try the "single line solution" and see if that works. You can even try a combination of both if you like. Quote Link to comment Share on other sites More sharing options...
gerkintrigg Posted January 6, 2008 Share Posted January 6, 2008 and another thing to bear in mind, when using CSS backgrounds with transparent PNGs on the top is that IE can't recognise the alpha channel of the overlay graphic and unhelpfully fills it in with a horrible grey colour. Furthermore, Firefox doesn't like the WORD "grey"... There must be a way of changing the default spell checker to English rather than American... Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted January 7, 2008 Share Posted January 7, 2008 and another thing to bear in mind, when using CSS backgrounds with transparent PNGs on the top is that IE can't recognise the alpha channel of the overlay graphic and unhelpfully fills it in with a horrible grey colour. Furthermore, Firefox doesn't like the WORD "grey"... There must be a way of changing the default spell checker to English rather than American... For pngs i used to use the Microsoft.AlphaImageLoader trick. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); But today i wouldent even considre that workaround, the sooner IE6 is unsupported, the better. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.