SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    John

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  4. #4
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Knew it as bad, didn't realise how bad.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  5. #5
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. It helps to know that MicroSoft is staying true to its course.
    John

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    From the English nation to a US location.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  8. #8
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  9. #9
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  11. #11
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  13. #13
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  15. #15
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  18. #18
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  19. #19
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Interesting point!

    Theres some comments here that might be of interest.

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

    Paul

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  23. #23
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The plot thickens...

    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?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  25. #25
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    John


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •