SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height not showing at 100% because of nested DIVs?

    See http://vusn.net/shows/ocoddities/

    I am trying to make the black background for the main column of my site to be as long as the content. To do this, I set the following:

    Code:
    #container {
    height:100%;
    }
    However, the black background is only covering as far down as the header, I'm assuming because all of the content of my page are in DIVs nested within the #container.

    How can I make the black background automatically stretch to be the height of my content? (Right now, I have it set at height:1100px; to cover everything!

    Thanks.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    height:100% makes it fill 100% of the height of its container. Whatever your #container is contained in needs to be made bigger. If it doesn't have a height specified then it will only be as high as its contents.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing outside of #container is the body - no more DIVs. What do I do now?

  4. #4
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, after a bit of messing around and false information found on Google (curse you internet for allowing such filth!), I've got a bit of help.

    Basically, different browsers are going to treat height attributes differently. For instance, if you set the #container to a height of 100%, IE will make it the length of the content, whereas Firefox will display it only the height of the original window size (i.e. 1024 x 768 or whatever).

    So pretty much what you're going to have to do is create a conditional (or more than one if you find other browsers acting up) to get each one functioning properly.

    While testing I put this together, and it seems to work fine. It'll obviously need some tweaking to fit your layout and to get rid of margins on <h1> and <p> tags and whatnot, but hopefully it helps solve your problem. If you have any other questions about conditionals, I'm sure this forum is full of them.

    Code:
      <style>
      
      html {
        margin: 0px;
        padding: 0px;
      }
      
      body {
        min-height: 100%;
        text-align: center;
        background-color: #FFF;
      }
      
      #container {
        background-color: #000;
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
      }
      
      #header {
        width: 800px;
        height: 150px;
        background-color: #CCC;
      }
      
      #rightcolumn {
        float: right;
        width: 200px;
        background-color: #999;
      }
      
      #content {
        margin-right: 210px;
        background-color: #BBB;
      }
      
      h1 { font-size: 18pt; }
      
      </style>
      
      <!--[if lt IE 7]>
      
      <style>
      
      #container { height: 100%; }
      
      </style>
        
      <![endif]-->
    Last edited by Aken; Nov 2, 2007 at 01:25. Reason: Provide correct information. :)

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no need for conditional comments with that. Just use the * html hack and be done with it.

    Code:
    * html #container {
        height: 100&#37;;
    }
    But anyway, I'd go about attacking the 100% document height differently than you did. I'd start by setting the height of the HTML element to 100% then set the min-height on the body and work my way down from there.

  6. #6
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally like to avoid using hacks wherever possible. I've used them in the past, and got very confused when I needed to make minor changes later on down the road.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what a comment is for then. As for hacks, I consider conditional comments to be one. Especially when you use it to import or link to an external file, which just adds an additional HTTP request to the mix. If I can get away with fewer HTTP requests, even if it means using a safe hack on a dead browser, then so be it.

    Oh, and it also keeps the file size and weight down as well (less code).

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aken
    Code:
      body {
        min-height: 100&#37;;
        text-align: center;
        background-color: #FFF;
      }
      
      #container {
        background-color: #000;
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
      }
    Doesn't anybody read the faq anymore

    This won't work and the faq on 100% height explains the reasons why. There was no need to search on google as the answer is right here in the forums from the person who invented this method (me)

    If you put min-height:100% on the body then that is the only element that will be 100% high. No other elements can base their height on the min-height as they can only base their height on real height. The nested container will collapse to height:auto.

    The faq explains this and shows how to make it work properly. The three column demo sticky thread is also full of loads of examples of this in action.

    So here it is again:

    Code:
    html,body{height:100%;margin:0;padding:0;}
    #container{min-height:100%}
    * html #container{height:100%}
    That's all you need and as much as you can do.

    If you want further nesting carrying 100% height then you are out of luck (for cross browsers support). You have to use background image trickery and utilize the body and #container elements where appropriate to get your repeating backgrounds.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by musicory
    I am trying to make the black background for the main column of my site to be as long as the content. To do this, I set the following:
    Remove all the height:100&#37; from your code except for the routine I placed in my last post. Add the 2 closing divs that are missing from your page.

    Then clear the floats (see faq.)

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VUSN.NET</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/css/calendar.css" rel="stylesheet" type="text/css" />
    <link href="/css/tabber.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/toggle.js"></script>
    <script type="text/javascript" src="/js/swfobject.js"></script>
    <script type="text/javascript" src="/js/load.js"></script>
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/tabber.js"></script>
    <script src="../../Scripts/AC_ActiveX.js" type="text/javascript"></script>
    <script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <style>
    
    /* 
    // *************************************************************************************************
    // Title:         VUSN Stylesheet
    // Developed by: Cory Watilo
    // Email:        cory@soundlightproductions.net
    // Website:        soundlightproductions.net
    // Copyright:    (c) 2007 Cory Watilo
    // Licence:        GPL, You may distribute this software under the terms of this General Public License
    // *************************************************************************************************
    */
    
    body {
        background: url('http://www.vusn.net/g/bg_grad1.png') repeat-x #ffffff;
        color:#000000;
        margin:0 auto;
        font:normal 9pt 'lucida grande','trebuchet ms',arial,helvetica, sans-serif;
    
    }
    
    
    img { border:0px; }
    
    html,body{height:100%}
    
    #container {
    background: url('http://www.vusn.net/g/bg.png') repeat-y;
    width:1016px;
    min-height:100%;
    position:relative;
    margin:0 auto;
    }
    * html #container{height:100%}
    
    #inner {
    background:#000000;
    color:#ffffff;
    width:952px;
    margin:0 auto;
    text-align: left;
    }
    
    #header {
    
    }
    
    #main {
    background:#000000;
    }
    
    #frame-l {
    width:314px;
    float:left;
    background:#fff url('http://www.vusn.net/g/vusn_angle1.jpg') no-repeat top right;
    }
    
    #join-l {
    width:399px;
    float:left;
    color:#000000;
    background:#fff;
    }
    
    #join-l p {
    margin:0px 4px;
    padding:0px 4px;
    }
    
    #frame-l p,ul {
    color:#000000;
    margin:0px;
    }
    
    #frame-c {
    color:#000000;
    width:628px;
    float:right;
    }
    
    #flash {
    color:#fff;
    width:550px;
    height:250px;
    float:right;
    background:#fff url('http://www.vusn.net/g/vusn_angle1.jpg') no-repeat top right;
    }
    
    #flash p {
    padding:0px;
    margin:0px;
    }
    
    #ad181 {
    margin:3px 0px 3px 3px;
    float:right;
    }
    
    #ad160 {
    margin:0px 0px 3px 3px;
    float:right;
    }
    
    #news {
    width:789px;
    float:left;
    color:#fff;
    background:#000000;
    }
    
    #shows {
    width:789px;
    float:left;
    color:#000000;
    background:#fff;
    }
    
    #shows .section {
    float:left;
    width:97%;
    padding:5px 0px 5px 5px;
    margin:5px 0px 5px 5px;
    border:solid 1px #909090;
    }
    
    #shows .shows-button {
    float:left;
    width:200px;
    padding:0px;
    margin:0px;
    }
    
    #shows .shows-blurb {
    float:right;
    width:550px;
    padding:0px;
    margin:0px;
    }
    
    #shows h4 {
    padding:0px;
    margin:0px;
    color:#000000;
    font:normal 10pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    }
    
    #shows .link {
    float:right;
    padding:5px;}
    
    #shows p {
    margin:5px;
    }
    
    .video {
    float:left;
    }
    
    .video-desc {
    float:right;
    width:375px;
    margin:0px 10px;
    padding:10px;
    border:solid 1px #909090;
    }
    
    .video-desc h3 {
    font:bold 11pt 'lucida grande',tahoma,verdana,arial,sans-serif;
        padding-left:0px;
        width:355px;
        margin:0px;
        color:#000000;
        border:0px;
    font:bold 12pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    text-align:right;
    }
    
    #frame-lc {
    margin-right:10px;
    background:#fff;
    }
    
    
    #frame-lc h3 {
        padding-left:5px;
        margin:0px;
        color:#000000;
        font:bold italic 12pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    }
    
    #logo {
    width:952;
    height:201;
    margin-bottom:3px;
    }
    
    TD {
    
    }
    
    
    /* START RSS */
    
    .box{
    border:1px solid #6699FF;
    }
    a.rsstitle{
    color:#FF9900;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    text-decoration:none;
    }
    a.rsstitle:hover{
    color:#FF9900;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    text-decoration:underline overline;
    }
    a.rsslink{
    color:#6699FF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    letter-spacing:1px;
    text-decoration:none;
    }
    a.rsslink:hover{
    color:#6699FF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    letter-spacing:1px;
    text-decoration:underline;
    }
    .rsstext{
    color:#666666;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    .rssdate{
    color:#999999;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    
    /* END RSS */
    
    #logobar {
    position:absolute;
    top:130px;
    left:31px;
    background:url('http://www.vusn.net/g/header.gif') no-repeat;
    height:42px;
    width:952px;
    cursor:pointer;
    }
    
    #search-box {
    position:relative;
    top:-136px;
    left:-54px;
    float:right;
    padding:10px 10px 0px 10px;
    width:200px;
    height:70px;
    background:#292929;
    border:thin dashed #fff;
    color:#ffffff;
    }
    
    #login-box {
    position:relative;
    top:-164px;
    left:-8px;
    float:right;
    padding:10px;
    width:200px;
    height:100px;
    background:#292929;
    border:thin dashed #fff;
    color:#ffffff;
    cursor:default;
    }
    
    #login-box form input.form-text {
    length:100px;
    height:15px;
    font:11px arial,helvetica;
    border:thin solid #000000;
    padding:4px;
    }
    
    #login-box form input.check {
    width:15px;
    height:15px;
    font:10px arial,helvetica;
    }
    
    #login-box form input.button {
    font:10px arial,helvetica;
    padding:2px;
    }
    
    h1 {
    padding-left:10px;
    font:bold 16pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    }
    
    h2 {
    padding:8px;
    margin:0px;
    color:#000000;
    font:bold 16pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    }
    
    h3 {
        padding-left:10px;
        width:200px;
        margin:0px;
        color:#000000;
    font:bold italic 12pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    border-top:solid 1px #000000;
    border-bottom:solid 1px #000000;
    
    }
    
    h4 {
    padding:0px;
    margin:0px;
    color:#000000;
    font:bold 12pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    }
    
    p {
    padding:0px;
    color:#000000;
    font:normal 9pt 'lucida grande',tahoma,verdana,arial,sans-serif;
    line-height:1.5;
    text-align:justify;
    }
    
    p.error {
    border:medium dashed #ff0000;
    padding:10px;
    margin:10px;
    color:#ff0000;
    }
    
    a:link,a:visited {
    text-decoration: underline;
    }
    
    a:hover {
    text-decoration: none;
    }
    
    #h-news {
    
    }
    
    #h-news .n-title {
    font-weight:bold;
    padding-left:5px;
    }
    
    #h-news .n-title a:link,a:visited {
    color:blue;
    text-decoration:underline;
    }
    
    #h-news .n-title a:hover {
    color:blue;
    text-decoration:none;
    }
    
    #h-news .n-date {
    padding-left:5px;
        font:italic 8pt 'lucida grande','trebuchet ms',arial,helvetica, sans-serif;
    }
    
    #h-news p {
    padding-bottom:5px;
    }
    
    #leftsec {
    float:left;
      width: 240px;
      margin: 0;
      padding: 0;
      overflow:hidden;
      background:#fff;
    }
    
    #feedArticles
    {
      float: right;
      height: 180px;
      width: 544px;
      margin:0px 0px 4px;
      border: 1px solid #fff;
      background: #e5e5e5;
      overflow:hidden;
    }
    
    #feedTxt
    {
      float: right;
      height: 500px;
      width: 544px;
      border: 1px solid #555;
      background: #fff;
      overflow: auto;
    }
    
    
    .feedtitle
    {
      float: left;
      width: 100%;
      height: 1.2em;
      font-size: 85%;
      text-indent: .5em;
      backgroun:#fff;
    }
    .feedtitle ul
    {
      margin: 0;
      padding: 0;
      list-style-type: none;
      background: #fff;
    }
    .feedtitle li a
    {
      width: 100%;
      cursor: pointer;
    }
    .feedtitle ul li a:hover, .feedtitle ul li a:visited,  .feedtitle ul li a:active
    {
      width: 100%;
      color: #000000;
      text-decoration:underline;
    }
    .feedbod
    {
      float: left;
      width: 100%;
      background: transparent;
    }
    .feedtxt
    {
      width: 100%;
    line-height:1.5em;
        }
    .feedbod ul
    {
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 99%;
      margin-bottom: 2px;
    } 
    .feedbod li
    {
      text-decoration: none;
      font-size: 80%;
      padding-bottom: 2px;
      padding-left: 7px;
      width: 100%;
    }
    .feedbod li a
    {
      display: block;
      color: #000000;
      cursor: pointer;
    }
    .feedbod li a:hover, .feedbod li a:visited
    {
      color: #000000;
      background: #fff;
    }
    
    #globalheader0 #globalnav0 #login-box a, #globalheader1 #globalnav1  #login-box a{
        background:transparent;
        color:#ffffff;
        overflow:visible;
        width:auto;
        height:auto;
        float:none;
        text-indent:0;
        font:normal 8pt arial,'trebuchet ms',helvetica, sans-serif;
    }
    
    /* GLOBALHEADER */
    #globalheader0, #globalheader1 { width: 388px; height: 42px; position: relative; top:0px; left:573px;}
    #globalheader0 #globalnav0, #globalheader1 #globalnav1 { margin: 0; padding: 0; }
    #globalheader0 #globalnav0 li, #globalheader1 #globalnav1 li { display: inline; }
    #globalheader0 #globalnav0 li a, #globalheader1 #globalnav1 a { float: left;  width:76px; height:42px; overflow: hidden; text-indent: -5000px;}
    #globalheader0 #globalnav0 li a, #globalheader0 #globalnav0 { background-image: url('http://www.vusn.net/g/nav0.png'); background-repeat: no-repeat; }
    #globalheader1 #globalnav1 li a, #globalheader1 #globalnav1 { background-image: url('http://www.vusn.net/g/nav1.png'); background-repeat: no-repeat; }
    
    /* BUTTONS */
    #globalheader0 #globalnav0 li#n-shows a, #globalheader1 #globalnav1 li#n-shows a { background-position: 0 0; }
    #globalheader0 #globalnav0 li#n-news a, #globalheader1 #globalnav1 li#n-news a { background-position: -78px 0; }
    #globalheader0 #globalnav0 li#n-events a, #globalheader1 #globalnav1 li#n-events a { background-position: -154px 0; }
    #globalheader0 #globalnav0 li#n-search a, #globalheader1 #globalnav1 li#n-search a { background-position: -232px 0; }
    #globalheader0 #globalnav0 li#n-login a, #globalheader1 #globalnav1 li#n-login a { background-position: -310px 0; }
    
    /* OVER STATES */
    #globalheader0 #globalnav0 li#n-shows a:hover, #globalheader1 #globalnav1 li#n-shows a:hover { background-position: 0 -42px; }
    #globalheader0 #globalnav0 li#n-news a:hover, #globalheader1 #globalnav1 li#n-news a:hover { background-position: -78px -42px; }
    #globalheader0 #globalnav0 li#n-events a:hover, #globalheader1 #globalnav1 li#n-events a:hover { background-position: -154px -42px; }
    #globalheader0 #globalnav0 li#n-search a:hover, #globalheader1 #globalnav1 li#n-search a:hover { background-position: -232px -42px; }
    #globalheader0 #globalnav0 li#n-login a:hover, #globalheader1 #globalnav1 li#n-login a:hover { background-position: -310px -42px; }
    
    /* PRESSED STATES */
    #globalheader0 #globalnav0 li#n-shows a:active, #globalheader1 #globalnav1 li#n-shows a:active { background-position: 0 -84px; }
    #globalheader0 #globalnav0 li#n-news a:active, #globalheader1 #globalnav1 li#n-news a:active { background-position: -78px -84px; }
    #globalheader0 #globalnav0 li#n-events a:active, #globalheader1 #globalnav1 li#n-events a:active { background-position: -154px -84px; }
    #globalheader0 #globalnav0 li#n-search a:active, #globalheader1 #globalnav1 li#n-search a:active { background-position: -232px -84px; }
    #globalheader0 #globalnav0 li#n-login a:active, #globalheader1 #globalnav1 li#n-login a:active  { background-position: -310px -84px; }
    
    .daysfont {  font-family: Verdana, Arial; font-size: 10px; font-style: normal; font-weight: bold; text-decoration: none; color: #000000}
    .month {  font-family: Verdana, Arial; font-size: 24px; font-style: normal; line-height: normal; font-weight: bold; color: #FFFFFF}
    .number {  color:#000000; font-family: Verdana, Arial; font-size: 12px; font-style: normal; font-weight: bold; text-decoration: none}
    .event {  font-family: Verdana, Arial; font-size: 10px; color: #000000; text-decoration: none}
    .addleft {  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #333333; text-decoration: none}
    .addHead {  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none}
    .addEvent {  font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; text-decoration: none}
    .AddRight {  font-family: Arial; font-size: 14px; color: #000000}
    .eventLink {  font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #000000; text-decoration: none}
    .back {  font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000000; text-decoration: none}
    .toplink {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; text-decoration: none}
    .topnonlink { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; text-decoration: none }
    .viewEvent {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #CC0000; text-decoration: none}
    .delete {  font-family: Verdana, Arial; font-size: 10px; font-weight: bold; color: #CC0000; text-decoration: none}
    .viewall { font-family: Verdana, Arial; font-size: 12px; font-weight: normal; color: #000000; text-decoration: none }
    .popup {
    width: 185;
    height: 145;
    padding-left:5;
    padding-right:5;
    overflow: auto;
    }
    
    /*
        this is the css for the help popup
    */
    blockquote.helpContents
    {
        text-align: left;
        width:200px;
        font-family: Verdana, Arial;
        font-size: 11px;
        margin: 0;
        padding: 5px;
        position: absolute;
        top: -1000px;
        left: -1000px;
        border: 1px solid #000;
        z-index: 100;
        background-color: #ABD9E2;
        -moz-border-radius: 5px;
        -moz-opacity: .85;
        opacity: .85;
        filter: alpha(opacity=85);
    
    }
    blockquote.helpContents a{
        font-family: Arial;
        color: #000000;
        font-weight: bold;
    }
      
    hr {
      background: none;
      border: none;
      border-top: 1px dotted #6351B6;
      height: 1px;
      margin: 0 0 0;
      width: 100%;
      }
    
    
    #subnav {
      list-style-type: none;
      margin: 0 .2em 2.2em;
      padding: 0;
      }
    #subnav a {
      display: block;
      padding: 2px 4px 2px 0px;
      text-decoration: none;
      text-align: right;
      width: 145px;
      }
    #subnav a:hover {
      background: #008C9B;
      color: #fff;
      }
    #subnav li {
      border-top: 1px dotted #6351B6;
      }
    #subnav li#snlast {
      border-bottom: 1px dotted #6351B6;
      }
        
        /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
    
    /*--------------------------------------------------
      REQUIRED to hide the non-active tab content.
      But do not hide them in the print stylesheet!
      --------------------------------------------------*/
    .tabberlive .tabbertabhide {
     display:none;
    }
    
    /*--------------------------------------------------
      .tabber = before the tabber interface is set up
      .tabberlive = after the tabber interface is set up
      --------------------------------------------------*/
    .tabber {
    }
    .tabberlive {
     margin-top:1em;
    }
    
    /*--------------------------------------------------
      ul.tabbernav = the tab navigation list
      li.tabberactive = the active tab
      --------------------------------------------------*/
    ul.tabbernav
    {
     margin:0;
     padding: 3px 0;
     border-bottom: 1px solid #778;
     font: bold 12px Verdana, sans-serif;
    }
    
    ul.tabbernav li
    {
     list-style: none;
     margin: 0;
     display: inline;
    }
    
    ul.tabbernav li a
    {
     padding: 3px 0.5em;
     margin-left: 3px;
     border: 1px solid #778;
     border-bottom: none;
     background: #DDE;
     text-decoration: none;
    }
    
    ul.tabbernav li a:link { color: #448; }
    ul.tabbernav li a:visited { color: #667; }
    
    ul.tabbernav li a:hover
    {
     color: #000;
     background: #AAE;
     border-color: #227;
    }
    
    ul.tabbernav li.tabberactive a
    {
     background-color: #fff;
     border-bottom: 1px solid #fff;
    }
    
    ul.tabbernav li.tabberactive a:hover
    {
     color: #000;
     background: white;
     border-bottom: 1px solid white;
    }
    
    /*--------------------------------------------------
      .tabbertab = the tab content
      Add style only after the tabber interface is set up (.tabberlive)
      --------------------------------------------------*/
    .tabberlive .tabbertab {
     padding:5px;
     border:1px solid #aaa;
     border-top:0;
    
     /* If you don't want the tab size changing whenever a tab is changed
        you can set a fixed height */
    
     /* height:200px; */
    
     /* If you set a fix height set overflow to auto and you will get a
        scrollbar when necessary */
    
     /* overflow:auto; */
    }
    
    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
     display:none;
    }
    .tabberlive .tabbertab h3 {
     display:none;
    }
    
    /* Example of using an ID to set different styles for the tabs on the page */
    .tabberlive#tab1 {
    }
    .tabberlive#tab2 {
    }
    .tabberlive#tab2 .tabbertab {
     height:200px;
     overflow:auto;
    }
    
    
    </style>
    </head>
    <body>
    <div id="container">
        <div id="inner">
            <div id="header">
                <!-- header -->
                <div id="logo"> <a href="/index.php"><img src="http://vusn.net/h/h03.jpg" alt="Welcome to VUSN.NET" /></a> </div>
                <div id="logobar"><a href="index.php"></a>
                    <div id="globalheader0"><a href="/index.php"></a>
                        <ul id="globalnav0">
                            <li id="n-shows"><a href="/">Home</a></li>
                            <li id="n-news"><a href="/shows/">Shows</a></li>
                            <li id="n-events"><a href="/news.php">News</a></li>
                            <li id="n-search"><a href="/events.php">Events</a></li>
                            <li id="n-login"><a href="#" onclick="toggleVisible('login'); return false;">Login</a>
                                <div id="login" style="display: none;">
                                    <div id="login-box">
                                        <form name="form1" method="post" action="">
                                            <table>
                                                <tr>
                                                    <td align="right">Login:</td>
                                                    <td><input name="username" type="text" id="username" class="form-text" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right">Password:</td>
                                                    <td><input name="password" type="password" id="password" class="form-text" /></td>
                                                </tr>
                                                <tr>
                                                    <td align="right"></td>
                                                    <td><input type="submit" name="Submit" value="Submit" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </form>
                                        <div align="center"><a href="/join.php">Join Now</a> | <a href="/forgot.php">Forgot Password?</a></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- end header -->
                </div>
                <div id="main">
                    <!-- left column -->
                    <div id="shows">
                        <h2>OC Oddities</h2>
                        <div id="h-news"> <span class="n-title"><a href="http://ocoddities.blogspot.com/2007/11/blackstar-canyon-road-irvine.html" target="_blank">Blackstar Canyon Road - Irvine</a></span><br />
                            <span class="n-date">11/01/2007 06:24 PM</span><br />
                            <p class="n-desc"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp2.blogger.com/_E8Sqiizei-c/Ryp2MotQeVI/AAAAAAAAAAs/DmpqMF_0idE/s1600-h/foggy+blackstar.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="http://bp2.blogger.com/_E8Sqiizei-c/Ryp2MotQeVI/AAAAAAAAAAs/DmpqMF_0idE/s400/foggy+blackstar.jpg" alt="" id="BLOGGER_PHOTO_ID_5128041085172480338" border="0" /></a>Perhaps it is the local lore that surrounds this spot that is to blame for the eerie vibes one gets upon visiting it, but I would be lying if I said that Black Star Canyon Rd. didn't give me the heebie-jeebies from the get-go.<br />
                                <br />
                                Some legends about the road include a bearded man with no teeth called "Black Star Bill" who chases any visitors he finds away, creatures shrouded in black with a penguin-like gait, witchcraft and KKK rituals, ghost cars, and your regular run-of-the-mill squatters. To be quite honest, it's that last one that worried me the most.<br />
                                <br />
                                Upon my voyage I saw no penguins, toothless men, or pagan rituals, but the consistent chill running up my spine was enough to inspire me to make my visit brief. Black Star is the kind of place where you constantly feel like you're being watched, and if it is true that there are various people residing here, it is quite possible.<br />
                                <br />
                                For more info:<br />
                                <a href="http://www.blackstaradventures.com/ghosts.php">http://www.blackstaradventures.com/ghosts.php</a><br />
                                <a href="http://www.ghosts.org/stories/tales/blackstar-canyon.html">http://www.ghosts.org/stories/tales/blackstar-canyon.html</a><br />
                                <a href="http://www.warriorssociety.org/Blackstar_info.html">http://www.warriorssociety.org/Blackstar_info.html</a><br />
                                <a href="http://en.wikipedia.org/wiki/Black_Star_Canyon">http://en.wikipedia.org/wiki/Black_Star_Canyon</a><br />
                                <br />
                                Getting there from VU:<br />
                                <br />
                            <table id="maneuvers" border="0" cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/icon-dirs-start" border="0" height="17" width="32" /></td>
                                        <td class="num">1:</td>
                                        <td>Start out going EAST on FAIR DR toward NEWPORT BLVD.</td>
                                        <td class="nowrap">0.2 miles</td>
                                        <td class="textc"><a name="ManAnchor0" href="javascript:showManMap('0','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:0');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow0"><img id="mmIMG0" name="mmIMG0" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_left" border="0" height="32" width="32" /></td>
                                        <td class="num">2:</td>
                                        <td>Turn LEFT onto NEWPORT BLVD.</td>
                                        <td class="nowrap"><0.1> </td>
                                        <td class="textc"><a name="ManAnchor1" href="javascript:showManMap('1','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:1');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow1"><img id="mmIMG1" name="mmIMG1" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://mqsigns.aolcdn.com/?s=rs&amp;t=RS00003BW&amp;n=55&amp;d=NORTH&amp;v=" /></td>
                                        <td class="num">3:</td>
                                        <td>Merge onto CA-55 N via the ramp on the LEFT.</td>
                                        <td class="nowrap">1.7 miles</td>
                                        <td class="textc"><a name="ManAnchor2" href="javascript:showManMap('2','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:2');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow2"><img id="mmIMG2" name="mmIMG2" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://mqsigns.aolcdn.com/?s=rs&amp;t=RS00001CO&amp;n=405&amp;d=SOUTH&amp;v=" /></td>
                                        <td class="num">4:</td>
                                        <td>Merge onto I-405 S via EXIT 6A toward SAN DIEGO.</td>
                                        <td class="nowrap">1.8 miles</td>
                                        <td class="textc"><a name="ManAnchor3" href="javascript:showManMap('3','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:3');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow3"><img id="mmIMG3" name="mmIMG3" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://mqsigns.aolcdn.com/?s=rs&amp;t=RSEXITRIGHTNUM&amp;n=7&amp;d=&amp;v=" /></td>
                                        <td class="num">5:</td>
                                        <td>Take the JAMBOREE ROAD exit- EXIT 7.</td>
                                        <td class="nowrap">0.3 miles</td>
                                        <td class="textc"><a name="ManAnchor4" href="javascript:showManMap('4','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:4');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow4"><img id="mmIMG4" name="mmIMG4" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_left" border="0" height="32" width="32" /></td>
                                        <td class="num">6:</td>
                                        <td>Turn LEFT onto JAMBOREE RD.</td>
                                        <td class="nowrap">3.6 miles</td>
                                        <td class="textc"><a name="ManAnchor5" href="javascript:showManMap('5','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:5');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow5"><img id="mmIMG5" name="mmIMG5" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://mqsigns.aolcdn.com/?s=rs&amp;t=RS00003BW&amp;n=261&amp;d=NORTH&amp;v=" /></td>
                                        <td class="num">7:</td>
                                        <td>Stay STRAIGHT to go onto CA-261 N (Portions toll).</td>
                                        <td class="nowrap">5.7 miles</td>
                                        <td class="textc"><a name="ManAnchor6" href="javascript:showManMap('6','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:6');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow6"><img id="mmIMG6" name="mmIMG6" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://mqsigns.aolcdn.com/?s=rs&amp;t=RSEXITRIGHTNUM&amp;n=6A&amp;d=&amp;v=" /></td>
                                        <td class="num">8:</td>
                                        <td>Take the SANTIAGO CANYON RD / CA-241 S exit- EXIT 6A- toward CHAPMAN AVE.</td>
                                        <td class="nowrap">0.2 miles</td>
                                        <td class="textc"><a name="ManAnchor7" href="javascript:showManMap('7','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:7');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow7"><img id="mmIMG7" name="mmIMG7" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_gr_exitleft" border="0" height="32" width="32" /></td>
                                        <td class="num">9:</td>
                                        <td>Take the SANTIAGO CYN RD exit on the LEFT toward CHAPMAN AVE.</td>
                                        <td class="nowrap"><0.1> </td>
                                        <td class="textc"><a name="ManAnchor8" href="javascript:showManMap('8','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:8');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow8"><img id="mmIMG8" name="mmIMG8" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_right" border="0" height="32" width="32" /></td>
                                        <td class="num">10:</td>
                                        <td>Turn RIGHT onto SANTIAGO CANYON RD.</td>
                                        <td class="nowrap">5.3 miles</td>
                                        <td class="textc"><a name="ManAnchor9" href="javascript:showManMap('9','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:9');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow9"><img id="mmIMG9" name="mmIMG9" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_left" border="0" height="32" width="32" /></td>
                                        <td class="num">11:</td>
                                        <td>Turn LEFT onto SILVERADO CANYON RD.</td>
                                        <td class="nowrap">0.1 miles</td>
                                        <td class="textc"><a name="ManAnchor10" href="javascript:showManMap('10','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:10');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow10"><img id="mmIMG10" name="mmIMG10" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/icon-dirs-end" border="0" height="17" width="32" /></td>
                                        <td class="num">12:</td>
                                        <td colspan="2">End at <span class="adr"><span class="street-address"><b>Black Star Canyon Rd &amp; Silverado Canyon Rd</b></span><br />
                                            <span class="locality">Silverado, CA 92676, US</span></span> </td>
                                        <td class="textc"><a name="ManAnchor11" href="javascript:showManMap('11','http://www.mapquest.com/apart/loadmanmap.adp?id=46e47714-0028a-05adf-548d0c40:1193966320:1:2:END');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow11"><img id="mmIMG11" name="mmIMG11" style="" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /></td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="totals"><b>Total Est. Time:</b> 25 minutes <b>Total Est. Distance:</b> 19.47 miles</td>
                                    </tr>
                                </tbody>
                            </table>
                            <span style="font-family:Comic Sans MS,Arial,Helvetica;"></span>
                            </p>
                            <br />
                            <span class="n-title"><a href="http://ocoddities.blogspot.com/2007/10/prehistoric-pets-fountain-valley.html" target="_blank">Prehistoric Pets - Fountain Valley</a></span><br />
                            <span class="n-date">10/16/2007 12:43 PM</span><br />
                            <p class="n-desc"> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp1.blogger.com/_E8Sqiizei-c/RxURXJl6QjI/AAAAAAAAAAM/s9RA5L0Aciw/s1600-h/prepets.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="http://bp1.blogger.com/_E8Sqiizei-c/RxURXJl6QjI/AAAAAAAAAAM/s9RA5L0Aciw/s400/prepets.jpg" alt="" id="BLOGGER_PHOTO_ID_5122019240613397042" border="0" /></a>If you're like me, you've never had any aspiration to host a "jurassic party," or to get up close and personal with small, hairy insects or large, clawed reptiles. However, if the inclination were to seize you, well, you're in luck. <a href="http://www.prehistoricpets.com/">Prehistoric Pets</a> in Fountain Valley is a truckload of weird with a side order of holy smokes.<br />
                                <br />
                                Boasting a cast of characters that includes various stages of <a href="http://en.wikipedia.org/wiki/Bearded_Dragon">bearded dragons</a>, all sizes of <a href="http://en.wikipedia.org/wiki/Monitor_lizard">monitor lizards</a>, and some mischievous and abnormally large catfish (among many other delights), Prehistoric Pets is a treasure trove of unusual and unorthodox creatures. It may not be <a href="http://snopes.com/disney/disney.asp">Disneyland</a>, but on a lazy Saturday afternoon, it could be just as exhilarating... or nauseating.<br />
                                <br />
                                <span style="font-weight: bold;">Getting There from VU:<br />
                                <br />
                                </span>
                            <table id="maneuvers" border="0" cellpadding="0" cellspacing="0">
                                <tbody>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/icon-dirs-start" border="0" height="17" width="32" /></td>
                                        <td class="num">1:</td>
                                        <td>Start out going WEST on FAIR DR toward FAIRGROUNDS.</td>
                                        <td class="nowrap">0.3 miles</td>
                                        <td class="textc"><a name="ManAnchor0" href="javascript:showManMap('0','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:0');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow0"><img id="mmIMG0" name="mmIMG0" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_right" border="0" height="32" width="32" /></td>
                                        <td class="num">2:</td>
                                        <td>Turn RIGHT onto FAIRVIEW RD.</td>
                                        <td class="nowrap">0.2 miles</td>
                                        <td class="textc"><a name="ManAnchor1" href="javascript:showManMap('1','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:1');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow1"><img id="mmIMG1" name="mmIMG1" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_left" border="0" height="32" width="32" /></td>
                                        <td class="num">3:</td>
                                        <td>Turn LEFT onto MERRIMAC WAY.</td>
                                        <td class="nowrap">0.6 miles</td>
                                        <td class="textc"><a name="ManAnchor2" href="javascript:showManMap('2','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:2');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow2"><img id="mmIMG2" name="mmIMG2" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_right" border="0" height="32" width="32" /></td>
                                        <td class="num">4:</td>
                                        <td>Turn RIGHT onto HARBOR BLVD.</td>
                                        <td class="nowrap">0.3 miles</td>
                                        <td class="textc"><a name="ManAnchor3" href="javascript:showManMap('3','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:3');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow3"><img id="mmIMG3" name="mmIMG3" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_left" border="0" height="32" width="32" /></td>
                                        <td class="num">5:</td>
                                        <td>Turn LEFT onto ADAMS AVE.</td>
                                        <td class="nowrap">1.9 miles</td>
                                        <td class="textc"><a name="ManAnchor4" href="javascript:showManMap('4','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:4');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow4"><img id="mmIMG4" name="mmIMG4" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/rs_right" border="0" height="32" width="32" /></td>
                                        <td class="num">6:</td>
                                        <td>Turn RIGHT onto BROOKHURST ST.</td>
                                        <td class="nowrap">1.1 miles</td>
                                        <td class="textc"><a name="ManAnchor5" href="javascript:showManMap('5','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:5');">Map</a></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td class="manmap" colspan="5" id="mmaprow5"><img id="mmIMG5" name="mmIMG5" style="display: none;" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /><br /></td>
                                    </tr>
                                    <tr>
                                        <td class="rs"><img src="http://img.mqcdn.com/mqsite/icon-dirs-end" border="0" height="17" width="32" /></td>
                                        <td class="num">7:</td>
                                        <td colspan="2">End at <span class="adr"><span class="street-address"><b>18822 Brookhurst St</b></span><br />
                                            <span class="locality">Fountain Valley, CA 92708-7304, US</span></span> </td>
                                        <td class="textc"><a name="ManAnchor6" href="javascript:showManMap('6','http://www.mapquest.com/apart/loadmanmap.adp?id=471513cc-00288-061fa-87c10c40:1192563723:1:2:END');">Map</a></td>
                                    </tr>
                                    <tr>
                                        <td class="manmap" colspan="5" id="mmaprow6"><img id="mmIMG6" name="mmIMG6" style="" src="http://img.mqcdn.com/mq/space_white" height="0" width="0" /></td>
                                    </tr>
                                    <tr class="bgc">
                                        <td colspan="5" class="totals"><b>Total Est. Time:</b> 9 minutes <b>Total Est. Distance:</b> 4.83 miles</td>
                                    </tr>
                                </tbody>
                            </table>
                            </p>
                            <br />
                        </div>
                    </div>
                    <!-- main column -->
                    <div id="ad160"> <a href='http://vusn.net/banners/adclick.php?bannerid=2&amp;zoneid=1&amp;source=&amp;dest=http%3A%2F%2Fwww.vanguard.edu%2Fcommunity%2F' target='_blank'><img src='http://www.vusn.net/a/160_homecoming.gif' width='160' height='600' alt='Homecoming' title='Homecoming' border='0'></a>
                        <div id="beacon_2" style="position: absolute; left: 0px; top: 0px; visibility: hidden;">
                            <!--                                                                                                                                                                                                                        -->
                        </div>
                    </div>
                </div>
                <div style="clear:both;height:1px;overflow:hidden"></div>
            </div>
        </div>
    </div>
    </body>
    </html>
    That will display as you wanted but there are still 64 errors in there that I haven't got time to fix so go to the validator and tidy it all up.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    BTW you also need to add the white background for the left column to this image as well.

    http://www.vusn.net/g/bg.png

    (Note that ie6 doesn't understand transparent pngs and you will need to use the proprietary alpha image loader for that or just give iE6 a normal gif.)

  11. #11
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I appreciate your input and am glad to learn something new. However I'd like to point out that in my trials with that code, my final version that I posted worked fine in Firefox and IE 6 on my computer. So while it is unnecessary and "wrong", it is still functional.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Aken
    However I'd like to point out that in my trials with that code, my final version that I posted worked fine in Firefox and IE 6
    Then you were mistaken I'm afraid for the reasons I already posted .

    You probably didn't test it with content less than 100&#37; height which is where problems in your code would be visible. Once the content is greater than the viewport then your code would have appeared to work. Please read the faq on 100% height if you are still unsure. It is an important point to understand.


    The code you posted cannot possibly work and here is the proof. This is the exact css you posted.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
     html {
        margin: 0px;
        padding: 0px;
        }
      
      body {
        min-height: 100%;
        text-align: center;
        background: #FFF;
        }
      
      #container {
        background-color: #000;
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
      }
      
      #header {
        width: 800px;
        height: 150px;
        background-color: #CCC;
      }
      
      #rightcolumn {
        float: right;
        width: 200px;
        background-color: #999;
      }
      
      #content {
        margin-right: 210px;
        background-color: #BBB;
      }
      
      h1 { font-size: 18pt; }
      
      </style>
    <!--[if lt IE 7]>
      <style>
      #container { height: 100%; }
      </style>
      <![endif]-->
    </head>
    <body>
    <div id="container">
        <p>test</p>
    </div>
    </body>
    </html>
    As you can see #container is only content height because the height:100% collapses to height auto because it has nothing to base its height on and cannot use a parent with min-height for this purpose.


    You would need to use the code I offered in post #8.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
     html {
        margin: 0px;
        padding: 0px;
         height:100%;
        }
      
      body {
        height: 100%;
        text-align: center;
        background: #FFF;
        }
      
      #container {
        background-color: #000;
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
      }
      
      #header {
        width: 800px;
        height: 150px;
        background-color: #CCC;
      }
      
      #rightcolumn {
        float: right;
        width: 200px;
        background-color: #999;
      }
      
      #content {
        margin-right: 210px;
        background-color: #BBB;
      }
      
      h1 { font-size: 18pt; }
      
      </style>
    <!--[if lt IE 7]>
      <style>
      #container { height: 100%; }
      </style>
      <![endif]-->
    </head>
    <body>
    <div id="container">
        <p>test</p>
    </div>
    </body>
    </html>
    As you can see the container now stretches the full height of the viewport and will also increase when more content is added.

    Hope that explains your mistake

  13. #13
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had tested it both ways, and appeared fine to me both times. I understand where you're coming from, and like I said before I appreciate any new wisdom, but please just don't tell me I'm wrong when I saw it with my own eyes.

    Please use Paul's recommendations, as apparently mine are all wrong, even though they worked. *shrug*

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    just don't tell me I'm wrong when I saw it with my own eyes.
    I appreciate you were trying to help so don't take it the wrong way

    I only pointed it out in case other people locked on to it and started using the wrong method. I can tell you 100&#37; without fail that your method would have failed and that you are completely mistaken. I don't mean this with any malice but it just happens to be true because the techniques you documented cannot possibly work. Maybe there was something else that you forgot to post that was making your example work. If for instance there was a height also defined for html,body then it would have worked.

    Without 100% height on html,body then there is no way it can work. You can see for yourself in the examples I posted.

    I don't get any joy from correcting people because we all mistakes and I don't want you to feel I'm picking on you in any way. I just like to make sure things are as accurate as they can be. Please don't let this deter you from posting again as this example will help others now that we've discussed it in detail

  15. #15
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not offended nor am I any less eager to post on SP, I'm just the type of person where when I know something worked, I don't like to be told it won't. Perhaps you're right, maybe I did miss a step or changed something inadvertently.

    It's all gravy

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul et all -
    I tried incorporating the different codes you guys suggested and none of it fixed the problem.
    Any other suggs?
    Thx,
    Cory

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I tried incorporating the different codes you guys suggested and none of it fixed the problem.
    Then you didn't do it right

    I have given you a fully working example in post #9.

    Step 1) Copy the code exactly

    Step 2) Paste it into your editor (or save it as an html file)

    Step 3) Preview it in a browser of your choice while you are online.

    Step 4) Sit back and admire my genius.

    Once you have done that come back and tell me what you think isn't working.

    (You still have some work to do as there are a lot of errors in there and you need to sort out the pngs for Ie6 also)

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Step 4) Sit back and admire my genius.
    Off Topic:

    Worship, Paul. Worship your genius.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dan
    Worship, Paul. Worship your genius.
    lol - I didn't think anyone would notice I slipped that in

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see everything. Yes, even that. You know what I'm talking about. No sense in trying to hide it from me, Paul.

  21. #21
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Then you didn't do it right

    I have given you a fully working example in post #9.

    [B]Step 1) Copy the code exactly

    Step 2) Paste it into your editor (or save it as an html file)

    Step 3) Preview it in a browser of your choice while you are online.

    Step 4) Sit back and admire my genius.
    Hahahahahahaha


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
  •