SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    basic css layout in N4.7

    Ok, I have one of those situations where the client wants to use CSS-P but insists on supporting N4.7.

    I worked up the following code using css-p and tested it in IE 6, mozillia 1.6 and N7. Of course it doesn't work at all in N4.7.

    Is there a better way to lay this out in css-p so it will not be completely destroyed by N4.7? Even if I use @import and use another css style sheet for n4.7 I don't see how I can give the user a layout thats close to what modern browsers will see.

    Any thoughts would be greatly appreciated.




    Code:
     
    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" 
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>my title</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
     background-color: #999967;
     margin: 0px;
     padding: 0px;
    }
    div#content {
     margin: 20px 158px 0px 0px;
    }
    div#footer {
     background-color: #007349;
     border-top: #000066 1px solid;
     clear: both;
     color: #FFFFFF;
     font: x-small verdana, sans-serif;
     margin-top: 30px;
     padding: 1px 10px 3px 10px;
    }
    div#main {
     background: #FFFFFF;
     border: 1px solid #333333;
     color: #333333;
     text-align: left;
     voice-family: "\"}\"";
     voice-family: inherit;
     width: 750px;
     width: 748px;
    }
    html>body div#main {width:748px;}
    h1 {
     color: #D97C18;
     font: bold 1em arial, sans-serif;
     margin: 10px 0px 0px 10px;
    }
    
    img.floatright{
     float: right;
     margin: 0px 0px 4px 10px;
    }
    p{
     font: 0.7em/1.5 verdana, sans-serif;
     margin: 5px 10px 15px 10px;
    }
    #footerleft{
     float: left;
     text-align: left;
    }
    #footerright{
     float: right;
     text-align: right;
    }
    #navcontainer {
     float: left;
     margin-top: 29px;
     font: bold 0.7em verdana, sans-serif;
     width: 140px;
    }
     #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #navcontainer a
    {
    display: block;
    color: #FFF;
    background-color: #007349;
    width: 140px;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    }
    #navcontainer a:hover
    {
    background-color: #25602F;
    color: #FCB814;
    }
    #navcontainer li li a
    {
    display: block;
    color: #FFF;
    background-color: #66AB92;
    width: 141px;
    padding: 3px 3px 3px 16px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    }
    #spacer {
     clear: left;
    }
    #featureimg{
     text-align: right;
     margin-right: 1px;
    }
    
    -->
    </style>
    </head>
    <body>
    <div id="main">
    <img src="images/top.jpg" width="745" height="26" />
    <div id="navcontainer">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
       <ul>
       <li><a href="#">link</a></li>
       <li><a href="#">link</a></li>
       <li><a href="#">link</a></li>
       </ul>
    </li>
    <li><a href="#">link</a></li>
    </ul>
    </div> 
    <div id="featureimg"><img src="images/mygreatimage.jpg" width="584" height="208" /></div> 
    <img src="images/floatimage.jpg" class="floatright" />
    <div id="content">
    <h1>Title here</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
    Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce 
    feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem.</p> 
    <p>Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, 
    dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat 
    volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
    </div> 
     
    <div id="footer">
    <div id="footerleft">pacific southwest home</div> 
    <div id="footerright">disclaimers | pivacy policy </div> 
    <div id="spacer"></div> 
    </div> 
    </div> 
    </body>
    </html>

  2. #2
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I don't have time to help you out now but you should know that all my tableless sites look just fine in NN 4.79 (though not identical to newer browsers). Sometimes I use a linked stylesheet for NN4.79 and @import for things it can't handle; sometimes I can do it with one stylesheet. It takes a little fiddling with margins (often negative ones) etc. but it can be worked out. Be creative!

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

    I'm afraid its all down to testing every element as you go and seeing what works in NN4.7 and what doesn't.

    I'm afraid that I don't support it anymore and the most I would do would be to import the styles so NN4 doesn't see them.

    If I were you I'd make sure it works in ie5 and 5.5. first as they have about 50% of the market whereas NN4 is probably less than 1%. The page is not correct in these browsers.

    Also you have an incorrect doctype so I would check on these things first

    Sorry I can't offer more solid advice but there are some things to avoid using for NN4 such as:

    avoid a:hover
    avoid display:block
    avoid negative margin-top for headings (H1-H6)
    avoid background shorthand
    border shorthand works in NN4+
    avoid:
    element heights
    list styles

    There are some compliance charts here:
    http://www.westciv.com/style_master/...owser_support/

    Hope that helps anyway.

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'll keep at it. I assume it's failing in IE 5/5.5 because I don't have the width hack on everything that's needed? Is the overall approach to the layout sound or is there a better way?

    Paul - whats wrong with this doctype:

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

  5. #5
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature

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

    Paul - whats wrong with this doctype:
    Nothing wrong with the doctype you just pasted but it's not the same as the one at the top of this thread

    This is from your first post:

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
    The case is all messed up it won't validate and will probably cause quirks mode. You must keep the doctypes in the correct format and case.

    regarding ie5 and 5.5.
    Code:
    div#main {
     background: #FFFFFF;
     border: 1px solid #333333;
     color: #333333;
     text-align: left;
     voice-family: "\"}\"";
     voice-family: inherit;
     width: 750px;
     width: 748px;
    }
    html>body div#main {width:748px;}
    Where is the width for ie5?

    The 750px needs to be before the hack not after it otherwise ie5 won't see it

    Otherwise the page looks more or less ok

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh... thanks!

    Does this look better?

    Sean - I'll take a look at that. Not really a two column layout but may provide some insight thanks.

    Ryan


    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>My title</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    background-color: #999967;
    margin: 0px;
    padding: 0px;
    }
     
     
    /* general divs */
    div#content {
    margin: 20px 158px 0px 0px;
    }
     
    div#footer {
    background-color: #007349;
    border-top: #000066 1px solid;
    clear: both;
    color: #FFFFFF;
    font: x-small verdana, sans-serif;
    margin-top: 30px;
    padding: 1px 10px 3px 10px;
    }
     
     
    div#main {
    background: #FFFFFF;
    border: 1px solid #333333;
    color: #333333;
    text-align: left;
    width: 750px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 748px;
    }
    html>body div#main {
    width: 748px;
    }
     
     
    div#featureimg{
    margin-right: 1px;
    text-align: right;
    }
     
    div#footerleft{
    float: left;
    text-align: left;
    }
     
    div#footerright{
    float: right;
    text-align: right;
    }
     
    div#spacer {
    clear: left;
    }
     
    /* nav divs */
     
    div#navcontainer {
    float: left;
    font: bold 0.7em verdana, sans-serif;
    margin-top: 29px;
    width: 140px;
    }
     
    div#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
     
    div#navcontainer a {
    background-color: #007349;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    width: 160px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 140px;
    }
    html>body div#navcontainer a {
    width: 140px;
    }
     
    div#navcontainer a:hover {
    background-color: #25602F;
    color: #FCB814;
    }
     
    div#navcontainer li li a {
    background-color: #66AB92;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    padding: 3px 3px 3px 16px;
    text-decoration: none;
    width: 160px; 
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 141px;
    }
     
    html>body div#navcontainer li li a {
    width: 141px;
    }
     
     
    /* elements and classes */
    h1 {
    color: #D97C18;
    font: bold 1em arial, sans-serif;
    margin: 10px 0px 0px 10px;
    }
     
     
    p{
    font: 0.7em/1.5 verdana, sans-serif;
    margin: 5px 10px 15px 10px;
    }
     
     
    img.floatright{
    float: right;
    margin: 0px 0px 4px 10px;
    }
     
    -->
    </style>
    </head>
    <body>
     
    <div id="main">
    <img src="images/topbanner.jpg" width="745" height="26" alt="top banner graphic"/>
     
    <div id="navcontainer">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
    </li>
    <li><a href="#">link</a></li>
    </ul>
    </div> 
    <div id="featureimg"><img src="images/mainimage.jpg" width="584" height="208" alt="feature image" /></div> 
     
    <img src="images/floatimage.jpg" alt="float image" class="floatright" />
    <div id="content">
    <h1>title here</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
    Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce 
    feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem.</p> 
     
    <p>Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, 
    dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat 
    volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
    </div> 
     
    <div id="footer">
    <div id="footerleft">link to home</div> 
    <div id="footerright">disclaimers | pivacy policy </div> 
    <div id="spacer"></div> 
    </div> 
    </div> 
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    Doh... thanks!

    Does this look better?
    Yes that's it


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
  •