Border problem: ie7 versus Mozilla Firefox 3.0.1

Paul David Buchan · Aug 30, 2008

I am using:
Windows XP
version 2002, SP 2
Browser: IE 7.0.5730.13 and Mozilla Firefox 3.0.1

The problem:

When defining in style border-width, IE shrinks the box to
adjust to the size of the box for a DIV and
it does not for IMG. The IMG is the correct size, but the
DIVs are too small.

This does not happen in Mozilla. In other words, with Mozilla,
all my boxes are displayed in the same, correct size whether
they are IMG or DIV.

Here is a simplified (but tested) version of my HTML:

<html>
<head>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test borders</title>
<style>
..colorbox {
height: 100; width:100;
border-width: 20px 20px 20px 20px;
border-spacing: 0px;
border-style: solid solid solid solid;
border-color: Red Red Red Red;
border-collapse: separate;
}
</style>
<table>
<tbody id="colortable">
<tr>
<td height="140" width="140">
<div id="divisionBlack" class="colorbox" title="Black"
style="background: rgb(0, 0, 16)"/>
</td>
<td height="140" width="140">
<img id="divisionpicture" class="colorbox" height="120" width="120"
src="F

icture.gif" title="Heather Gray"/>
</td>
<td height="140" width="140">
<div id="divisionPearl" class="colorbox" title="Pearl"
style="background: rgb(254, 250, 237)"/>
</td>
<td height="140" width="140">
<div id="divisionGreen" class="colorbox" title="Green"
style="background: rgb(100, 200, 100)"/>
</td>
</tr>
</tbody>
</table>
</html>

I'm not sure whether this is my mistake and one browser
is more fault-tolerant than the other, or whether there's a bug in
IE or Firefox.

I looked here

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

but couldn't convince myself that my problem was exactly
the same as one of the bugs listed.

Can anybody tell me if this is my mistake, or whether
there's a browser bug I need to work around?
Any suggested solutions are welcome.

Thanks,
Dave Buchan
(e-mail address removed)

John Hosking · Aug 30, 2008

Paul said:
I am using:
Windows XP, SP 2
Browser: IE 7.0.5730.13 and Mozilla Firefox 3.0.1

The problem:

When defining in style border-width, IE shrinks the box to
adjust to the size of the box for a DIV and
it does not for IMG. The IMG is the correct size, but the
DIVs are too small.

This does not happen in Mozilla. In other words, with Mozilla,
all my boxes are displayed in the same, correct size whether
they are IMG or DIV.

What happens when you use valid code?
http://validator.w3.org/check

What happens when you don't provoke quirks mode?
http://hsivonen.iki.fi/doctype/

Try using a doctype of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Here is a simplified (but tested) version of my HTML:

URL please, rather than pasted (even if it were valid) code.

HTH

dorayme · Aug 30, 2008

John Hosking said:
What happens when you use valid code?
http://validator.w3.org/check

What happens when you don't provoke quirks mode?
http://hsivonen.iki.fi/doctype/

Try using a doctype of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

URL please, rather than pasted (even if it were valid) code.

Good advice, everything.

The only sensible looking thing that the OP might want would be the look
you get in quirks mode (in FF) after a bit of tidying up of the code
just to make it adhere to some standard at least. With a good doctype,
the whole thing needs recasting. But lets see if OP does a bit of the
work and posts a URL.

Paul David Buchan · Aug 31, 2008

Hi guys,

ok. I think I've cleaned up most of it.

http://www.pdbuchan.com/borderproblem.html

The links you gave are a goldmine of info. Thanks very much.

I'm getting the same behavior now in Firefox and IE.

The only thing left is this little shift upwards of the second box.

Comments?

Thanks again,

Dave

dorayme · Aug 31, 2008

Paul David Buchan said:
Hi guys,

ok. I think I've cleaned up most of it.

http://www.pdbuchan.com/borderproblem.html

The links you gave are a goldmine of info. Thanks very much.

I'm getting the same behavior now in Firefox and IE.

The only thing left is this little shift upwards of the second box.

Comments?

Thanks again,

Dave

Add img {display: block;} to your styles.

I don't know if you want to know why?

BTW, If it were me I would stick in the body opening and closing tags in
your html.

You might say what you are wanting this layout for? There may be
interesting alternative ways to do it.

Ari Heino · Aug 31, 2008

In other words, with Mozilla,

all my boxes are displayed in the same, correct size whether
they are IMG or DIV.

I experienced the contrary. IE shows it somewhat correctly (?), but FF
shrank the img box.

Here is a simplified (but tested) version of my HTML:

Don't give simplified html, we can't know what you have there and what
not, that might solve (or be part of) the problem.

<html>
<head>
</head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test borders</title>
<style>

Style type missing.

.colorbox {
height: 100; width:100;

What's the unit above? px?

border-width: 20px 20px 20px 20px;
border-spacing: 0px;
border-style: solid solid solid solid;
border-color: Red Red Red Red;
border-collapse: separate;
}
</style>

All above should be inside the head section! And border: 20px solid
#ff0000; would be shorter.

Paul David Buchan · Sep 3, 2008

Add img {display: block;} to your styles.

I don't know if you want to know why?

BTW, If it were me I would stick in the body opening and closing tags in
your html.

You might say what you are wanting this layout for? There may be
interesting alternative ways to do it.

Hi,

I made the change and it works as promised.

http://www.pdbuchan.com/borderproblem.html

I would indeed be interested to know why.
As you can see, I'm new this html business.

Here's what's going on. There's a commercial
site that needs some fixing up. It's old and
broken; errors are reported when you visit
the site.

They asked to have this one thing fixed, but
actually, a lot more needs to be fixed. Those
boxes are color swatches people can use when
choosing the color of clothing. They sit below
the image of the garment. They used to be click-able,
and they'd change the color of the garment. But
that's broken too.

One thing that worries me is, the rest of
the site is doc-type transitional. I can
see that, if possible, people recommend to
use strict for maximum compatability. On the
other hand, that means a lot of rework of the
site. Rework that probably should be done,
mind you.

What would you guys do?

Thanks for everybody's suggestions. I hope you see this.
I'm a bit late replying.

Dave

dorayme · Sep 3, 2008

Paul David Buchan said:
Hi,

I made the change and it works as promised.

http://www.pdbuchan.com/borderproblem.html

I would indeed be interested to know why.
As you can see, I'm new this html business.

In short, images by default are inline (they are treated rather like a
character, like a letter, like an A or Y or 7, usually quite a big one
compared). With inline text there is room for the descenders as in y, g,
p. So, even though there are no descenders in images* they stay in
character (so to speak) and take their place like any other character in
lines.

They are subject to line-height specifications just as text is...

<http://dorayme.890m.com/alt/imagesInline.html>

where you will see the yellow div having a normal line height set for
its inline boxes while the yellow div has an unusually large one. The
blue div illustrates how the odd tall image stretches the imaginary line
box. All this is inline behaviour. Block behaviour is different.

By displaying as block, it changes the character of the image element to
make it not behave like a character or word on a line of text. It is
formatted as a block box (within which you can have inline images among
other things) and the rules for these things you will gather as you go.

You can read

<http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

and more generally

<http://www.w3.org/TR/CSS21/visuren.html#x0>

Too boring? OK, just simply think of "inline" as a violin sound and
"block" as a sort of thud when a huge block of concrete falls on Jerry
with Tom not being at all innocent but looking as if he had nothing to
do with it.

Here's what's going on. There's a commercial
site that needs some fixing up. It's old and
broken; errors are reported when you visit
the site.

They asked to have this one thing fixed, but
actually, a lot more needs to be fixed. Those
boxes are color swatches people can use when
choosing the color of clothing. They sit below
the image of the garment. They used to be click-able,
and they'd change the color of the garment. But
that's broken too.

I saw a very nice Flash application of this concept once, to help people
order products.

One thing that worries me is, the rest of
the site is doc-type transitional. I can
see that, if possible, people recommend to
use strict for maximum compatability. On the
other hand, that means a lot of rework of the
site. Rework that probably should be done,
mind you.

What would you do?

Leave it as transitional until and unless you are guaranteed to have
this job as a longer term project. And then sort it out and get out of
transitional. Once you have transitioned, that is.

------------------------
* Don't let cartoons where things hang out of the boxes fool you. There
was a nice cartoon I saw a few years back where the characters were
aware they were in the cartoon and one of them decided to take a look
outside by popping his head out under the bottom border.

We stared at each other, transfixed. Till he decided to dart back in his
box. I was about to flee too, he looked a bit finni... mean.

dorayme · Sep 3, 2008

dorayme said:
while the yellow div has

while the green div has

Irina Rempt · Sep 4, 2008

dorayme said:
while the green div has

Just out of curiosity, are you a tetrachromat?

Irina

dorayme · Sep 4, 2008

Irina Rempt said:
Just out of curiosity, are you a tetrachromat?

You sense a frustration on my part about my using #ffccff; and such, eh?
Supposing perhaps I would have preferred to be able to use #88UUccZZ
where the capitals denote ultraviolet...?

An interesting thought.

But it is not like any of this for me. I have no normal sensory
channels, a bit like a god really, I'm big on simply just knowing things
by no means at all. Except, unlike with a god, there is the awkward
thing that I do get things wrong now and then. It is a trait that gods
rather envy, did you know that they get terribly bored with always being
right? I know this because I have seen them weep with anguish at me.

Paul David Buchan · Sep 4, 2008

while the green div has

Thanks very much for all your help.
I really appreciate you taking the
time. Of course, now you run the risk that I
might ask more questions. "No good deed goes
unpunished, etc etc."

Dave

dorayme · Sep 4, 2008

Paul David Buchan said:
Thanks very much for all your help.
I really appreciate you taking the
time. Of course, now you run the risk that I
might ask more questions. "No good deed goes
unpunished, etc etc."

Honest questions and discussion is not the biggest risk around here...

:-|

Help with Visual Lightbox: Scripts	2	May 3, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Please Help?	0	Jul 23, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 21, 2023
Having trouble centering contents of td ?	3	May 2, 2023
Simple, but difficult to me. Image border property	1	Sep 22, 2022
Need help with <rowspan> in an HTML table	1	Nov 6, 2024

Border problem: ie7 versus Mozilla Firefox 3.0.1

Paul David Buchan

John Hosking

dorayme

Paul David Buchan

dorayme

Ari Heino

Paul David Buchan

dorayme

dorayme

Irina Rempt

dorayme

Paul David Buchan

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads