www.webdeveloper.com
Results 1 to 6 of 6

Thread: Yet another ? on layout using CSS

  1. #1
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132

    Yet another ? on layout using CSS

    I'm new to CSS layout. I've used tables in the past so any comments on this simplified code would be appreciated.
    This faily simple CSS layout that works correctly in IE but falls apart in NS4xx. Is there a technique to keep the page ledgible in NS.
    Currently the footer div moves to the right and overlaps the other divisions.

    <html><head><title>CSS Layout</title>
    <style type=text/css>
    body { background:ffffff; margin:0px; }
    #header { text-align:center; width:100%; border:black 1px solid; }
    #leftdiv { float:left; width:200; height:300; border:black 1px solid; }
    #container1 { float:left; width:auto; border:red 1px solid; }
    #centerdiv { float:left; width:70%; height:200px; border:black 1px solid; }
    #rightdiv { float:right; width:30%; height:200px; border:black 1px solid; }
    #footer { float:left; width:100%; height:100px; border:black 1px solid; }
    </style>
    </head>
    <body>
    <div id="header"><h3>header</h3><h1>CSS LAYOUT</h1>The layout needs to work for window widths of 800px and up</div>
    <div id="leftdiv"><h3>leftdiv</h3>FIXED width of 200px.</div>
    <div id="container1">
    <div id="centerdiv"><h3>centerdiv</h3></div>
    <div id="rightdiv"><h3>rightdiv</h3></div>
    <div id="footer"><h3>footer</h3></div>
    </div>
    </body></html>

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    I've had the same problem with NN4.x but with < 1% using 4.x I decided that if they want to view my site, they will just have to upgrade to a browser built this century...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Gotta luv NS 4.x. There's a pretty simple work-around.

    First, you need two style sheets that are imported from .css files. One you import thru the old <link> tag:

    <link rel="stylesheet" type="text/css" href="legacy.css" />

    That you would place in the HEAD of the HTML document. Then erase all the styles you created inside the <style> tags, but keep the style tags. Just add this line of code, a complete example is below:

    <style type="text/css" media="screen">

    @import "default.css";

    </style>

    Of course you can change the .css filenames to anything you want.

    IN DEFAULT.CSS
    This is where you place the styles for formatting the DIVs how you want them.

    IN LEGACY.CSS
    Simply omit all of the position properties in default.css. The only thing that NS4 really supports correctly is text, font, some list, and some background properties in CSS. Here's how the trick works.

    Newer web browsers (IE 5.0 - 6.0 PC, IE 4.5 - 5 MAC, NS 6 - 7, Mozilla, Opera 5 - 7) recognize the @import method for importing an external style sheet. NS 4.x (the troublesome browser in question) and IE 4.0 for the PC and MAC do not recognize @import. But they do recognize importing external style sheets thru the LINK tag.

    Coincidently, fourth generation web browsers do not support enough of CSS 2 to correctly render the page as you want it. So what you've just done is "hide" the advanced CSS layout from mostly incompatible browsers.

    If you're interested in xhtml and CSS layouts, check out http://www.alistapart.com/. It's geared to those who already know CSS. It answers specific questions about xhtml and css layouts. For a complete reference for CSS, visit http://www.w3schools.com/.

    Hope this helps. And by the way, you will soon find that Internet Explorer will be the bain of your existence

  4. #4
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Thank for your thoughts. I think it's finally time to abandon my beloved NS4xx (but not completely ).

    So I designed the page to work in NS4xx but without some of the fancy page formatting and bordered divisions. I hardcoded all the DIV absolute positioning on the HTML page and included all the floating DIV's. BUT the floating DIV styles are now included in an @import style sheet. ( toicontien )
    The page looks pretty fair in NS4xx and is what I want in IE.
    [http://www.fulspec.com/index2.html]

    There is one problem. The last 2 chars 'd.' of the 'copyright' div are repeated below the this div. What did I do wrong?

  5. #5
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132

    Please help me understand what's going on.

    I messed with the code and found that by removing a comment. <!-- copyright -->, the 'repeated' chars went away.
    So, is the probem is solved? I think not! Something is happening that I do not understand.

    Please help!!

  6. #6
    celebguy_dv Guest

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles