Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tabless design probs using div/css, help pls?

    tabless design probs using div/css, help pls?

    k my first prob is in ie the main table dubbed "table" will not center, however when using the 'margin: auto;' it centers, in firefox the border will not contain the "center" and "right" div's also when lots of text are added into "center" and "right" it will cause the "center" and "right" to go out of bounds on the "table" <--- the wrapper "main table"... i believe i have the correct dtd's above

    the exaple is posted at www.silvermushroom.com

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need a full doctype in there... You also don't have a closing </head>; add that and see what changes.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    Last edited by mark87; 10-02-2006 at 05:36 PM.

  • #3
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still no luck

    heres what i have so far...


    <!DOCTYPE HTML PUBLIC

    "-//W3C//DTD HTML 4.01

    Transitional//EN">
    <html>
    <head>
    <title>example</title>

    <style type="text/css">

    body {background-color: #000000;

    color: #FFFFFF;
    margin: 0;
    padding: 0;
    height: 100%;}

    #table {position: relative;
    width: 752;
    margin: auto;
    border: 1px solid #FFFFFF;}

    #content {position: absolute;
    width: 600px;
    min-hight: 100%;
    border: 0px solid

    #FFFFFF;}

    #right {position: absolute;
    width: 150px;
    min-hight: 100%;
    left: 602px;
    border: 0px solid #FFFFFF;}

    </style>

    </head>

    <body>

    <div id="table">

    <div id="content">111 11 11 1 11 11

    1111 11 11 1 11 11 1111 11 11 1 11

    11 1111 11 11 1 11 11 1111 11 11 1

    11 11 1111 11 11 1 11 11 1111 11 11

    1 11 11 1111 11 11 1 11 11 1111 11

    11 1 11 11 1111 11 11 1 11 11 1111

    11 11 1 11 11 1
    </div>
    <div id="right">111 11 11 1 11 11

    1111 11 11 1 11 11 1111 11 11 1 11

    11 1111 11 11 1 11 11 1111 11 11 1

    11 11 1111 11 11 1 11 11 1111 11 11

    1 11 11 1111 11 11 1 11 11 1111 11

    11 1 11 11 1111 11 11 1 11 11 1111

    11 11 1 11 11 1</div></div>

    </body>

    </html>
    dont know what im doing wrong cant figure out wich dtd is the correct one

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You didn't read Mark's post carefully. You need a FULL valid doctype for margin:auto; to even work in IE. Valid CSS goes along way as well. Check your spelling.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i did read and as i said im not sure wich dtd (document type) to use, if u can pls help as i dont understand the difference between all the styles there are

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need the full doctype (with the url in), which I posted above. Also, as Aerospace_Eng said, check your spelling (min-height).

  • #7
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sry im new to this stuff dont mean to be a noob


    <!DOCTYPE HTML PUBLIC

    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"

    >
    <html>
    <head>
    <title>example</title>

    <style type="text/css">

    body {background-color: #00008b;

    color: #FFFFFF;
    margin: 0;
    padding: 0;
    height: 100%;}

    #table {position: relative;
    width: 752;
    min-height: 100%;
    margin: auto;
    border: 1px solid #FFFFFF;}

    #content {position: absolute;
    width: 600px;
    min-height: 100%;
    border: 0px solid

    #FFFFFF;}

    #right {position: absolute;
    width: 150px;
    min-height: 100%;
    left: 602px;
    border: 0px solid #FFFFFF;}

    </style>

    </head>

    <body>

    <div id="table">

    <div id="content">111 11 11 1 11 11

    1111 11 11 1 11 11 1111 11 11 1 11

    11 1111 11 11 1 11 11 1111 11 11 1

    11 11 1111 11 11 1 11 11 1111 11 11

    1 11 11 1111 11 11 1 11 11 1111 11

    11 1 11 11 1111 11 11 1 11 11 1111

    11 11 1 11 11 1
    </div>
    <div id="right">111 11 11 1 11 11

    1111 11 11 1 11 11 1111 11 11 1 11

    11 1111 11 11 1 11 11 1111 11 11 1

    11 11 1111 11 11 1 11 11 1111 11 11

    1 11 11 1111 11 11 1 11 11 1111 11

    11 1 11 11 1111 11 11 1 11 11 1111

    11 11 1 11 11 1</div></div>

    </body>

    </html>
    is what i have i corrected the height speling erros still i cannot get the main table border to appear correctly

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    background-color: #000000;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.9em;
    }
    
    #table {
    position: relative;
    width: 752px;
    margin: auto;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    min-height:100%;
    }
    * html #table {
    height:100%;
    }
    #content {
    width: 100%;
    float: left;
    margin-right:-150px;
    }
    #main {
    margin-right:150px;
    }
    #right {
    width:150px;
    float:right;
    }
    p {
    margin:0;
    padding:10px;
    text-align:justify;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    </style>
    </head>
    <body>
    <div id="table">
    	<div id="content">
    		<div id="main">
    			<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus lorem, vestibulum lobortis, condimentum a, pulvinar id, nisl. Vivamus a purus. Suspendisse pede neque, viverra ut, interdum quis, faucibus a, lacus. Proin ut lacus. Cras laoreet gravida nisi. Donec in turpis. Integer enim justo, placerat nec, adipiscing ac, facilisis a, felis. Aenean blandit fermentum pede. Cras nec turpis. Maecenas non ipsum quis massa imperdiet varius. Suspendisse non ligula aliquet nisi condimentum sagittis. </p>
    			<p> Nullam mattis dictum turpis. Aliquam congue pellentesque erat. Sed enim ipsum, tristique eu, scelerisque eu, fermentum eget, mi. Ut sollicitudin commodo erat. Praesent sapien nunc, feugiat at, malesuada ac, convallis in, metus. Ut ac sem. Morbi vitae enim. Aliquam fringilla, sem eget aliquam viverra, magna mauris consequat orci, eget placerat nisl erat sit amet arcu. Sed at nulla. Ut vehicula. Pellentesque sit amet orci. Aenean neque sapien, pharetra ac, tempor ut, rhoncus sed, nisl. Proin vestibulum metus nec tortor. Maecenas condimentum tincidunt erat. Mauris id nisl. Donec ipsum lectus, cursus in, euismod nec, scelerisque ut, sapien. Maecenas vel nisl nec diam tempus semper. Aliquam molestie, velit eu iaculis dapibus, magna nisi consequat quam, faucibus iaculis lorem nisi id enim. Nam rutrum euismod purus. </p>
    			<p> Mauris et metus. Sed placerat felis nec diam. Donec porttitor. Mauris faucibus. Cras elementum turpis sagittis diam. Aliquam nibh metus, vehicula in, adipiscing eu, sodales a, libero. Pellentesque ante pede, iaculis sit amet, porta ut, scelerisque sed, urna. Pellentesque tellus. Nunc nisi. Fusce volutpat lacinia lectus. Quisque tempor, neque ut nonummy cursus, tortor ante pellentesque mi, in lacinia turpis augue quis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
    		</div>
    	</div>
    	<div id="right">
    		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lacus lorem, vestibulum lobortis, condimentum a, pulvinar id, nisl. Vivamus a purus. Suspendisse pede neque, viverra ut, interdum quis, faucibus a, lacus. Proin ut lacus. Cras laoreet gravida nisi. Donec in turpis. Integer enim justo, placerat nec, adipiscing ac, facilisis a, felis. Aenean blandit fermentum pede. Cras nec turpis. Maecenas non ipsum quis massa imperdiet varius. Suspendisse non ligula aliquet nisi condimentum sagittis. </p>
    	</div>
    	<div class="clear">&nbsp;</div>
    </div>
    </body>
    </html>
    For min-height:100% to work the html element needs to have a height of 100% as well and min-height in percentages will only be applied to the first element in the body.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks

    i didnt think about just stating left and right borders looks much better anyhows then having all 4 sides...

    also

    what exactrly do these guys do

    * html #table {
    height:100%;
    }

    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }

    just so i can understand for feature reference

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE6 doesn't support min-height but it does treat height the same as min-height. IE7 will not see that part of the CSS if and ONLY IF you use a full valid doctype. That clear thing is there because once you use floats you need to clear your floats or the containing element won't fit to the floats because they are taken out of flow. I repeat for the * html thing to be ignored by IE7 you MUST use a FULL valid doctype.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Jan 2006
    Location
    Texas, USA
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whats the differences betweek html 4.0 and xml, xhtml and all teh other tpyes of dtd's (doctypes

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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