SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot jplatenius's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver Island, Canada
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape 7 problem

    Hi all,

    Anyone know why this goes all wacky in NN 7.0? www.virtuallycertain.com/tsk/layout.htm

    It works great in IE 5.5 and IE 6. Here's the CSS for quick reference:
    HTML Code:
    body {
     background-color: #669999;
     margin-top: 15px;
     margin-right: 0px;
     margin-bottom: 15px;
     margin-left: 0px;
     padding: 0;
     text-align: center;
    }
    div {
     margin: 0px;
     padding: 0px;
    }
    .photo {
     border: 1px solid #000000;
    }
    .BoxHeader {
     background-color: #663300;
     margin: 0px;
     width: 100%;
     border-top-width: 1px;
     border-bottom-width: 1px;
     border-top-style: solid;
     border-bottom-style: solid;
     border-top-color: #000000;
     border-bottom-color: #000000;
     padding: 10px;
     font-size: 10px;
    }
    #BoxWrapper {
     width: 88%;
     margin-right: 6%;
     margin-left: 6%;
     margin-top: 14px;
     margin-bottom: 14px;
    }
    #BoxLeft {
     float: left;
    }
    #BoxRight {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 15px;
     color: #333333;
     text-align: left;
     background-color: #FFFFFF;
     float: left;
     border-top: 1px solid #000000;
     border-right: 1px solid #000000;
     border-bottom: 1px solid #000000;
     padding: 20px;
    }
    .BoxNav {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #CCCC99;
     background-color: #003333;
     width: 100%;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #000000;
     padding-top: 2px;
     padding-right: 8px;
     padding-bottom: 2px;
     padding-left: 8px;
    }
    .BoxNav a:link, .BoxNav a:visited {
     color: #CCCC99;
     padding: 2px 8px 2px 8px;
     text-decoration: none;
     }
    .BoxNav a:hover {
     color: #000000;
     background-color: #CCCC99;
     padding: 2px 7px 2px 7px;
     text-decoration: none;
     border-width: 1px;
     border-style: solid;
     border-color: #000000;
    }
    #BoxSidebar {
     background-color: #CCCC99;
     border: 1px solid #000000;
     padding: 7px;
    }
    .BoxHeaderWrap {
     width: 755px;
    }
    #BoxSidebarWrapper {
     float: right;
     width: 200px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 10px;
     margin-left: 10px;
    }
    #navlist {
     width: 180px;
    }
    #navlist ul {
     margin: 0;
     padding: 0;
     list-style-type: none; /*turns off display of bullet*/
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
    #navlist li {
     margin: 0 0 0 0;
     padding: 0;
    }
    #navlist a {
     display: block;
     padding: 2px 2px 2px 24px;
     border-right: 1px solid #000000;
     border-top: 1px solid #000000;
     border-left: 1px solid #000000;
     width: 200px;
     background-color: #663300;
    }
    #navlist a:link, #navlist a:visited {
     color: #CCCC99;
     text-decoration: none;
    }
    #navlist a:hover {
     border-right: 1px solid #000000;
     border-top: 1px solid #000000;
     border-left: 1px solid #000000;
     background-color: #CCCC99;
     color: #000000;
    }
    .TextComment {
     font-size: 10px;
     text-align: right;
    }
    I'd love some help with this... I just assumed it would work in NN 7... I'll never do that again!

    Thanks,
    -jp

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

    You really need to check in each browser every step of the way otherwise it gets very difficult to sort it out afterwards

    There are number of problems and a lot are related to the broken box model. You are designing in quirks mode which uses the broken box model where padding and borders are inside the specified width. In the correct box model as in netscape/mozilla padding and borders are added to the width.

    This makes some of your elements to big to fit in the allocated space and overflow. You need to either change the way you add padding to elements by using nested elements or inner elements (without width) or use one of the hacks : e.g.

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Other problems on your page are that floats should have a specified width. So work out what they need to be and apply the width. Also after a float you will need a clearing element to make sure content starts after the float:
    Code:
    <div style="clear:both"></div>
    <div class="BoxHeader"> &nbsp; </div>
    Sorry I can't give a full solution but I'm just out for a couple of days but if you work on it I'll take a look when I get back or someone else will chip in.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot jplatenius's Avatar
    Join Date
    Nov 2003
    Location
    Vancouver Island, Canada
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with padding

    Thanks, Paul--I'm getting much closer now. I've worked on the widths, and used the
    HTML Code:
    <div style="clear: both;"></div>
    to clear to the next box.

    Now...Can anyone help me understand the difference between padding in IE and Netscape, or point me to a good article? I'm fairly new to CSS, and I don't understand what is going on with this. I can see that IE is treating my padding very differently than Netscape, and I can't figure out how to get them to act the same.

    Also, I can't understand why the sepia-tone image on the left of the page has a 4(ish) pixel break in between it and the BoxRight (white bg with content). It only does this in IE, not in Netsacape. Is this the padding thing that Paul is referring to as well.

    www.virtuallycertain.com/tsk/layout_netscape.htm (trying to get the same result in modern versions of IE and Netscape). CSS below:

    HTML Code:
      body {
     background-color: #669999;
     margin-top: 15px;
     margin-right: 0px;
     margin-bottom: 15px;
     margin-left: 0px;
     padding: 0;
     text-align: center;
    }
    div {
     margin: 0px;
     padding: 0px;
    }
    .photo {
     border: 1px solid #000000;
     float: left;
     margin: 0px;
     padding: 0px;
    }
    .BoxHeader {
     background-color: #663300;
     margin: 0px;
     width: 100%;
     border-top-width: 1px;
     border-bottom-width: 1px;
     border-top-style: solid;
     border-bottom-style: solid;
     border-top-color: #000000;
     border-bottom-color: #000000;
     padding: 10px;
     font-size: 10px;
    }
    .BoxHeaderWrap {
     width: 700px;
    }
    .BoxNav {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #CCCC99;
     background-color: #003333;
     width: 100%;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #000000;
     margin: 0;
     padding-top: 2px;
     padding-right: 8px;
     padding-bottom: 2px;
     padding-left: 8px;
    }
    .BoxNav a:link, .BoxNav a:visited {
     color: #CCCC99;
     padding: 2px 8px 2px 8px;
     text-decoration: none;
     }
    .BoxNav a:hover {
     color: #000000;
     background-color: #CCCC99;
     padding: 2px 7px 2px 7px;
     text-decoration: none;
     border-width: 1px;
     border-style: solid;
     border-color: #000000;
    }
    #BoxWrapper {
     width: 88%;
     margin: 14px 6% 14px 6%;
    }
    #BoxRight {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 15px;
     color: #333333;
     text-align: left;
     background-color: #FFFFFF;
     width: 65%;
     float: left;
     border: 1px solid #000000;
     padding: 20px;
     margin: 0 0 0 0;
    }
    #BoxSidebar {
     background-color: #CCCC99;
     border: 1px solid #000000;
     padding: 7px;
    }
    #BoxSidebarWrapper {
     float: right;
     width: 200px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 10px;
     margin-left: 10px;
    }
    #navlist {
     width: 180px;
    }
    #navlist ul {
     margin: 0;
     padding: 0;
     list-style-type: none; /*turns off display of bullet*/
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
    #navlist li {
     margin: 0 0 0 0;
     padding: 0;
    }
    #navlist a {
     display: block;
     padding: 2px 0px 2px 20px;
     border-right: 1px solid #000000;
     border-top: 1px solid #000000;
     border-left: 1px solid #000000;
     width: 180px;
     background-color: #663300;
    }
    #navlist a:link, #navlist a:visited {
     color: #CCCC99;
     text-decoration: none;
    }
    #navlist a:hover {
     border-right: 1px solid #000000;
     border-top: 1px solid #000000;
     border-left: 1px solid #000000;
     background-color: #CCCC99;
     color: #000000;
    }
    .TextComment {
     font-size: 10px;
     text-align: right;
    }

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

    I couldn't access your page to see how you're getting on but here's some more info on the box model and why it needs fixing in ie5, 5.5 and ie6 quirks mode.

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

    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
  •