internet explorer, divs, css and images

pontovic · 24-09-2005 9:42pm #1

I didnt know how to sum up this problem but here goes.

Basically I have a div on my webpage that is a certain height and width. It is positioned absolutely and it has a black border of 1px in width. Now when I insert an image into this div, it shows up ok in firefox with the black border around it, but in internet explorer, the border looks out of place with the other bordered div's around it. is there any hack out there to counter this ?

Also another thing I notice is that when I put images into an absolutely positioned div with a border, there is a little white margin at the bottom of them when they are rendered in IE, but theyre fine in firefox. Any ideas ??

any help appreciated, thanks

NeVeR · 24-09-2005 10:51pm

can you post the HTML so i can have a look.

pontovic · 25-09-2005 10:26am

NeVeR wrote:

can you post the HTML so i can have a look.

yeah sure

basically it goes like

<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
</head>
<body>
<div id="imagebox">
<img src="./images/image.jpg">
</div>
</body>
</html>

and in my styles.css file i would have


div#imagebox
{
    position: absolute;
    border: 1px solid #000000;
    top: 100;
    left: 30;
    width: 130;
    height: 90;
}

The image I insert in the DIV element is 130 * 90.

pontovic · 26-09-2005 7:25am

have a look at this page in firefox and then in internet explorerhttp://www.mdal.ie/karl and you will see exactly what I mean

seamus · 26-09-2005 8:48am

Ah yes. This is the biggest pain. IE doesn't calculate element size correctly, so you get left with this. If you try and fix it in IE, it stops working in FF, and vice-versa.

The only thing I can think of is to try and make the dividers into 0-padding and 0-margin divs.
so it'll go like

<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles/style.css"/>
</head>
<body>
<div id="imagebox">
          <img src="./images/image.jpg">
</div>
<div id="imageSpacer">&nbsp;</div>
<div id="imagebox">
          <img src="./images/image2.jpg">
</div>
</body>
</html>

Etc. Then it should be possible to caculate the exact height and width correctly. Someone else may have a better fix.

Gordon · 26-09-2005 9:03am

I took out the width and height attributes on the div for the images and it looks ok now on IE for Mac.

pontovic · 26-09-2005 9:14am

Gordon wrote:

I took out the width and height attributes on the div for the images and it looks ok now on IE for Mac.

really ? i initially had them out but I put them in to see would IE render them correctly and it didnt work. you removed the height and width attributes for the images ?

seamus · 26-09-2005 9:19am

Doesn't sort it for IE on WinXP

pontovic · 26-09-2005 9:30am

i tried putting into my css code for the divs

padding: 0;

and it made no difference.

Gordon · 26-09-2005 10:09am

Why doin't you just make the image have a border of "1px" <img source "blah" border="1"> and contain them within one div that has the same amount of padding around it. Then you just need one div as opposed to img1div img2 div etc. That would work instead no?

pontovic · 26-09-2005 10:28am

ok gordon i have made the changes based on your suggestion and it looks better so thanks for that. is IE renowned for being a pain in the arse re: not following standards ? or something ?

Gordon · 26-09-2005 10:30am

I think so yeah.

canker · 26-09-2005 11:31am

is IE renowned for being a pain in the arse re: not following standards ? or something ?

Only firefox ppl think this!

Follow IE's standards and you wont have any problems!

pontovic · 26-09-2005 11:38am

well from what i see internet explorer isn't doing exactly as it should, and firefox is. unless i'm mistaken in my code, doesnt that make firefox more compatible ?

canker · 26-09-2005 2:13pm

more compatible with what?

The only thing a website needs to be compatible with is its users. The vast majority of users use IE. Therefore if you want a more compatible website => design to work in IE first.

Ideally of course you should design to work in all. But if there is an issue with something not happening right make sure you get ot right in IE first.

isn't doing exactly as it should

It can't not (bad grammer to emphasise the point) do what it should, surely you mean It's not doing as firefox should.

pontovic · 26-09-2005 2:50pm

look mate im not going to get into this, all i want is to fix this problem.

Serbian · 26-09-2005 4:29pm

canker wrote:

stuff

It's pretty obvious that you are just saying this stuff because you have a chip on your shoulder about Firefox users; your signature just reinforces this. Maybe it's the over-zealous minority that try to force the browser down your throat, maybe it's a lack of understanding of the difference between IE and Firefox or most likely, it's just plain trolling.

No matter what it is, the facts cannot be denied that IE does not follow web standards. You can read about Internet Explorer's efforts to become standards compliant in the Internet Explorer Blog on the MSDN which is written by the IE developers.

You should design to the standards and then employ whatever hacks or workarounds needed to make it work in all browsers. You'd be suprised how much easier it is to follow the W3C guidelines and then employ hacks rather than vice-versa.

canker · 27-09-2005 12:59pm

I have no chip on my shoulder. Apologies If I came across too strong on this subject. I agree entirely that if web browsers implemeted mutually agreed standards in a uniform manner everyone (web users and developers) would be a whole lot happier. The point I tried to make (to help out pontovic with his original query) is that this is not currently the case and in order to deliver the best website possible he should make sure it works in IE (rather than follow the standards 100% because IE doesnt implement them properly) because the majority of his users are going to be using it.

the nature of this quote

Only firefox ppl think this!

Follow IE's standards and you wont have any problems!

was supposed to be funny (see the grinning face?). Guess I'm not that funny

now smiley face makes everyone happy again!

rsynnott · 27-09-2005 3:50pm

canker wrote:

I have no chip on my shoulder. Apologies If I came across too strong on this subject. I agree entirely that if web browsers implemeted mutually agreed standards in a uniform manner everyone (web users and developers) would be a whole lot happier. The point I tried to make (to help out pontovic with his original query) is that this is not currently the case and in order to deliver the best website possible he should make sure it works in IE (rather than follow the standards 100% because IE doesnt implement them properly) because the majority of his users are going to be using it.

Has it occurred to you that if they ever do fix IE, "IE-only" sites will be viewable on nothing?

canker · 27-09-2005 5:14pm

Yes, that is why I would never promote building an "IE-only" website.

canker · 27-09-2005 5:20pm

This is what I ment to say

Serbian wrote:

You should design to the standards and then employ whatever hacks or workarounds needed to make it work in all browsers. You'd be suprised how much easier it is to follow the W3C guidelines and then employ hacks rather than vice-versa.

It is exactly the way I design websites and I would encourage everyone else to do likewise.

internet explorer, divs, css and images

Comments