Jump to content

Weird border in IE


aeonsky

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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... ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.