SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ie 4.01, 5.0, 5.5

    I have designed a layout using CSS here. The CSS file is here.

    It works fine in Mozilla and IE 6, but it breaks in IE 4, 5, and 5.5. I am not sure how well IE 4 will support CSS, at this point, but I would like for it to work in 5 and 5.5.

    Everything validates, so far. I am not sure if this is a box model issue or not. (I am still learning).

    By the time I can work on it, it is usually pretty late at night, so, I am sure I am missing something.

    Any help would be appreciated. (Paul is usually very helpful )

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Only had a quick look as I'm just going out but you need to take into account the broken box model for the padding in these elements listed below. As you have used the box model hack once I have just inserted it into the following elements.

    (Although you could ger rid of them altogether but would require extra nesting etc.)
    Code:
    #middle {
     position: relative;
     float: left;
     width: 380px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #403613;
     background-color: #FFFFFF;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 352px; 
    }
    html>body #middle {
    width:352px;
    }
    }
    #righttop {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #403613;
     background-color: #F7F5C5;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #middle {
    width:132px;
    }
    #rightmiddle {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #5D6C33;
     background-color: #C4D59E;
    	voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #rightmiddle {
    width:132px;
    }
    }
    #rightbottom {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #000000;
     background-color: #8E9B6D;
    	voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #rightbottom {
    width:132px;
    }
    That should make it look a bit better in IE5 (don't have ie4).

    Once that's sorted you should be able to work out the rest as they are probably similar problems.

    I will have a look later if your still struggling.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Had another look and this css should make it look more or less the same in ie5, 5.5 &6 (&moz & opera7).
    Code:
    body {
     height: 100%;
     text-align: center;
     margin: 14px;
    }
    #border {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     background-color: #F7F5C5;
     border: 1px solid #7A8074;
     width: 742px;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 740px; 
    }
    html>body #border {
     width: 740px;
     padding:0;
    }
    #banner {
     position: relative;
     width: 740px;
     height: 40px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 20px;
     font-weight: normal;
     padding: 0;
     color: #000000;
     background-color: #CCCCCC;
    }
    #nav {
     width: 740px;
     height: 18px;
     padding: 0;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #677537;
     border-top: 1px solid #7A8074;
     border-bottom: 1px solid #7A8074;
    }
    #nav ul {
     padding: 0;
     margin: 1px 1px 1px 10px;
     white-space: nowrap;
     color: #FFFFFF;
    }
    #nav ul li {
     display: inline;
     padding-left: 10px;
     padding-right: 10px;
    }
    #nav ul li a {
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #FFFFFF;
     text-decoration: none;
     width:60px;/* for ie5 */
    }
    #nav ul li a:hover {
     text-decoration: underline;
    } 
    #threecontainer {
     width: 740px;
     margin: 0;
     padding: 0;
     color: #FFFFFF;
     background-color: #F7F5C5;
    }
    #left {
     position: relative;
     float: left;
     width: 194px;
     padding: 14px;
     margin: 0;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #403613;
     background-color: #F7F5C5;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
      voice-family: inherit;
      width: 166px; 
    }
    html>body #left {
       width:166px;
    }
    #twocontainer {
     position: relative;
     width: 540px;
     float: right;
     padding: 0;
     margin: 0;
     background-color: #8E9B6D;
    }
     
    
    #middle {
     position: relative;
     float: left;
     width: 380px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #403613;
     background-color: #FFFFFF;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 352px; 
    }
    html>body #middle {
    width:352px;
    }
    #righttop {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #403613;
     background-color: #F7F5C5;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #righttop {
    width:132px;
    }
    #rightmiddle {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #5D6C33;
     background-color: #C4D59E;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #rightmiddle {
    width:132px;
    }
    #rightbottom {
     position: relative;
     float: left;
     width: 160px;
     padding: 14px;
     text-align: left;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #000000;
     background-color: #8E9B6D;
     voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
     voice-family: inherit;
     width: 132px; 
    }
    html>body #rightbottom {
    width:132px;
    }
    #footer {
     position: relative;
     clear: both;
     width: 740px;
     height: 14px;
     padding: 3px;
     margin-bottom: 0;
     text-align: center;
     font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     color: #FFFFFF;
     background-color: #677537;
     border-top: 1px solid #7A8074;
      voice-family: "\"}\"";  /* BOX MODEL HACK FOR IE */
      voice-family: inherit;
      width: 734px; 
    }
    html>body #footer {
     width:734px;
    }
    Most of the ie5 discrepencies were as you thought due to the broken box model where you had not accounted for padding when also specifying width etc.

    The other problem is that Ie5 doesn't seem to like padding on inline lists so I added a width to the a element in the list instead. (Although this may mean you will have to tweak the width it if you have longer words in the list etc.)

    Also, where did you get that doctype? You've mixed transitional and strict together!

    Here is the strict doctype:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    Hope that helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you so much for your input. I am understanding the box model hack much better now, but I wasn't thinking about the divs inside the border div. I had tried your original suggestions and that worked great. The only thing I noticed was the inline list bug in 5.0. I hadn't noticed the doctype being screwed up. (Late nights lead to goofy mistakes.)

    I was going to ask you about IE 5 for Mac, but I seem to recall you mentioning before that you didn't have a Mac. I'll dig through the forums and see if I find a solution. Thanks for your help. It has been wonderful to have someone help me learn CSS better.

    By the way, I have updated the above mentioned links.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you got it sorted. Just looked in ie5 and it looks fine now.
    I was going to ask you about IE 5 for Mac, but I seem to recall you mentioning before that you didn't have a Mac
    You're right, I don't have access to a mac which means I'm not familiar with the bugs associated with it. Perhaps someone else is watching and can check for you.

    (I must get hold of an old mac to test on )

    Paul


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
  •