Different widths displayed between <img> and <div> tags

**PHP John** · Jan 9, 2003 01:00

I in the process of learning CSS and have found an interesting compatibility conflict.

Here's some of the code:

Code:

      img.firstBar
      {
        position: absolute;
        left:     10px;
        top:      51px;
        height:   25px;
        width:   267px;
      }
      div.secondBar
      {
        position:         absolute;
        background-color: #0033ff;
        font-family:      Arial;
        color:            #ffffff;
        text-align:       center;
        left:             277px;
        top:              51px;
        height:           25px;
        width:            120px;
        padding-top:      4px;
      }

If you view this address:

http://www.appointit.com/appointmentscss.htm

in IE 6 (I don't know about earlier versions) it looks fine. However, if you view this page in NS 7, and Opera 7, the DIV tag is displayed as about 4px taller than what is defined, and the IMG tag is displayed correctly.

If I change the DIV definition to, height: 21px; it displays fine in the last two, but not IE.

Is there anyone who can shed some light on this, and how to write such definitions for cross browser compatibility?

Thanks.

**dale_burrell** · Jan 9, 2003 05:42

I don't know the exact solution, but how I would attempt to resolve it is by explicitly setting all padding & all margins. Then I'd set a border and work from there.

I have this suspicion that the defaults for padding and margins are different between browsers.

**Paul O'B** · Jan 9, 2003 06:21

I think your problem is that the box model in IE is completely broken.

A box width is made up of width + padding + margin which is correctly imlemented by mozilla. IE does it the opposite way and a box width is just the width! The padding and margins are inside this width thus reducing the available content size.

There are some workarounds here:

http://www.glish.com/css/hacks.asp

Hope this helps.

Paul

**dale_burrell** · Jan 9, 2003 07:16

Knew it as bad, didn't realise how bad.

**PHP John** · Jan 9, 2003 21:51

Thanks guys. It helps to know that MicroSoft is staying true to its course.

**awestmoreland** · Jan 10, 2003 03:19

I don't know which way conforms to W3C, but the way that it works in IE is the way that I would expect it to work. Had I had this problem, then I would have been stumped too.

Andy

**Paul O'B** · Jan 10, 2003 05:27

Hi,
The W3C states that padding and border are to be added to the width, and Opera, IE5 Mac, and Gecko (NS6, Mozilla, Galeon) correctly implement the box model. IE6/strict is now also correct.

You can find more info here:

http://css-discuss.incutio.com/?page=BoxModelHack

Paul

**dale_burrell** · Jan 10, 2003 05:48

Originally posted by Paul O'B
IE6/strict is now also correct.
Paul

Does this imply that IE6 has strict/non-strict modes? If so how to configure. Cheers

**redux** · Jan 10, 2003 06:05

Originally posted by dale_burrell
Does this imply that IE6 has strict/non-strict modes? If so how to configure. Cheers

i'd hazard a guess and say "via your DOCTYPE definitions" at the beginning of the document...

**Paul O'B** · Jan 10, 2003 06:12

Hi,

What was meant by strict was to use a valid doctype.

If you use a valid Doctype then IE6 works in standard compliants mode and the box model should be implemented correctly but if you omit the doctype it reverts to quirks mode. (I'm not sure if there is a problem between transitional and strict doctypes but I would assume them both to be correct.)

Unless (and you knew this was coming) if you use xhtml and use the xml prologue: <?xml version="1.0" encoding="iso-8859-1"?> then theres a major bug in IE6 which makes it revert to quirks mode thus defeating the purpose of the doctype. As it is optional it is best to leave it out and everything is ok, although you should add the following to your code (as well as the Doctype)in the correct place.

<html xmlns="http://www.w3.org/1999/xhtml">
and
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Clear as mud I bet.

Paul

**dale_burrell** · Jan 10, 2003 06:20

Originally posted by Paul O'B
Clear as mud I bet.

Clearer! I'm currently using the following doctype: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> Is this current for HTML or is there a more recent one I should use? Cheers.

**Paul O'B** · Jan 10, 2003 06:25

Hi,
You've missed out the URI.

You should be using this for transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

I think (not sure) but if you don't use the URI it may slip back into quirks mode.

Paul

**dale_burrell** · Jan 10, 2003 06:36

Now can you explain the frameset issue to me?

Do I use a doctype of "-//W3C//DTD HTML 4.01 Frameset//EN" in the documents contained in the frames? Or only in the document that defines the frame? Cheers,

**Paul O'B** · Jan 10, 2003 06:55

Hi,

As far as I understand it you must use the Doctype on every page. As a page in a frame can still be accessed as a page out of a frame I would assume that it would need a correct doctype. (I'll see if I can find some clearer info.)

The transitional frameset doctype is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

You can find a list of doctypes here:

http://www.htmlhelp.com/tools/validator/doctype.html

Hope this helps

Paul

**dale_burrell** · Jan 10, 2003 06:59

So if I understand you correctly in my frameset definition I would use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
And in my other pages that are displayed inside the frames I would use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

**Paul O'B** · Jan 10, 2003 07:11

Hmmm!

This is what it says:

Frameset

For framesets only. Use Strict or Transitional for the individual frames inside the frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Therefore I would assume that you use this same definition on all your frame and frameset pages.

Have a look here for starters:
http://hotwired.lycos.com/webmonkey/...l?tw=authoring

I'll see if I can find a link to a clearer explanation.

Paul

**Paul O'B** · Jan 10, 2003 07:13

Correction

Therefore I would assume that you your assumption was correct. Use transitional or strict for the individual frames and the frameset declaration in the frameset.

Paul

**dale_burrell** · Jan 10, 2003 07:15

Originally posted by Paul O'B
For framesets only. Use Strict or Transitional for the individual frames inside the frameset.

Cheers - we got there in the end.

**dale_burrell** · Jan 10, 2003 07:28

Doesn't this pose some problems for people developing at home or for intranets that don't have internet access?

According to what people have been saying the absence of the URL will cause the default mode to kick in.

This might explain why the layout of someones site changed when they uploaded it (there was some post a while back about this).

Am I imagining things? Or is this a problem? If so is there a solution?

**Paul O'B** · Jan 10, 2003 07:29

You can tell I don't use frames much!

It's surprising that something so obvious should be so hard to find info on.

Paul

**Paul O'B** · Jan 10, 2003 07:49

Interesting point!

Theres some comments here that might be of interest.

http://www.alistapart.com/stories/doctype/discuss/3/

Paul

**Paul O'B** · Jan 10, 2003 09:38

Hi,

It seems that, few browsers actually rely on the doctype specified in the doctype in order to render a page. Instead, they rely on their own internal rules to render the page, whether in standards (compliance) mode or in quirks mode. Browsers simply use the presence of the doctype declaration and URI to determine which method to use (and this varies from browser to browser ).
An example of this is that you can use a perfectly valid HTML 4.01 URI in your doctype declaration, but Mozilla/Netscape 6 will still resort to quirks
mode because it is not the particular URI that it expects:

This puts Mozilla/Netscape 6 into quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

But this one puts it into spec-compliance mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

The above was edited from this link:
http://lists.evolt.org/archive/Week-...25/104263.html

As far as I can determine these seem to be the best doctypes to use (until someone says differently of course):

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Hope this helps someone.

Paul

**dale_burrell** · Jan 10, 2003 10:06

Using IE6, if I code the following: <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

When I use the "save as" command from the file menu the resulting file contains: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Mad or what?

**Paul O'B** · Jan 10, 2003 10:23

Not sure whats going on there!

Apparently the first part should always be in uppercase even in xhtml i.e. <!DOCTYPE HTML PUBLIC ....

It's a wonder anybody gets it right.

Paul

**PHP John** · Jan 10, 2003 10:35

To get this discussion back on track, it appears that Opera, NS, and IE all implement CSS slightly differently.

Here is the code: (I removed "height" and added padding to the bottom)

Code:

      img.firstBar
      {
        position: absolute;
        left:     10px;
        top:      51px;
        height:   25px;
        width:   267px;
      }
      div.secondBar
      {
        position:         absolute;
        background-color: #0033ff;
        font-family:      Arial;
        color:            #ffffff;
        text-align:       center;
        left:             277px;
        top:              51px;
        width:            120px;
        padding-top:      3px;
        padding-bottom:   3px;
      }
      div.thirdBar
      {
        position:         absolute;
        background-color: #0066ff;
        font-family:      Arial;
        color:            #dddddd;
        text-align:       center;
        left:             397px;
        top:              51px;
        width:            120px;
        padding-top:      3px;
        padding-bottom:   3px;
      }
      div.fourthBar
      {
        position:         absolute;
        background-color: #0099ff;
        font-family:      Arial;
        color:            #333333;
        text-align:       center;
        left:             517px;
        top:              51px;
        width:            120px;
        padding-top:      3px;
        padding-bottom:   3px;
      }
      div.fifthBar
      {
        position:         absolute;
        background-color: #00ccff;
        font-family:      Arial;
        color:            #000000;
        text-align:       center;
        left:             637px;
        top:              51px;
        width:            122px;
        padding-top:      3px;
        padding-bottom:   3px;
      }

And the address to view:
http://www.appointit.com/appointmentscss.htm

NS get it as it was intended to show, IE and Opera now show the the same, but not as intended.

User Tag List

Thread: Different widths displayed between <img> and <div> tags

Thread Tools

Display

Different widths displayed between <img> and <div> tags

The plot thickens...

Bookmarks

Bookmarks

Posting Permissions