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
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Disappearing Right Column

    I set up this code for a website I did for my computer science class. We had to hand code everything, but were allowed to use other code as long as we kept the copyright info. So what I have is a little bit of this and that, plus what I added, and minor changes to margin sizes and background colors.

    When I viewed this on my local computer (running Windows XP) in either IE6 or FF, it looked ok; in fact I kept fiddling around with it until it looked good. Now the class is done, I've uploaded the whole think to my web host (Earthlink). Now it's broken in both IE6 and FF. I'm now at work and looking at it in FF on the Mac, and it's broken also, but differently. The right column is completely gone. The photo of the zebra tries to appear, briefly, but then disappears (twilight zone?). It doesn't come back.

    I went to my host site and downloaded the CSS and index.html files so I can work on them some more. I viewed the files locally on Mac FF, and the page looks different again!

    Please help. I expect there are problems with the margin definitions, but when I change them I don't see any improvements.

    Here are my tg.css and index.html files, plus screenshots from Mac FF for local and internet views.

    tg.css file:

    Code:
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }
    
    b{font-size: 110%;}
    em{color: #559999;}
    
    #topsection{
    background: #9c9f84;
    height: 40px; /*Height of top section*/
    }
    
    #topsection h1{
    margin: .6em;
    padding-top: 6px;
    }
    
    #topmain{
    background: #9c9f84;
    height: 40px; /*Height of top section*/
    }
    
    #topmain h1{
    margin: 0em;
    padding-top: 6px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{
    margin: 0 190px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    background: #fff;
    }
    
    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column*/
    margin-left: -100%;
    background: #f7dcb4;
    border-right-width: 4px; border-right-color:#9c9f84;
    border-right-style:dotted;
    }
    
    #rightcolumn{
    float: left;
    width: 180px; /*Width of right column*/
    margin-left: -180px; /*Set left marginto -(RightColumnWidth)*/
    background: #f7dcb4;
    border-left-width: 4px; border-left-color:#bbbbbb;
    border-left-style:dotted;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: #9c9f84;
    color: #000000;
    text-align: center;
    font-size: 65%;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 8px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    
    <!-- ******************************** -->
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    /*MENU BLOCK - this has been edited */
    
    #blueblock{
    width: 180px;
    padding: 3em 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    font-size: 85%;
    color: #ccc;
    }
    
    * html #blueblock{ /*IE 6 only */
    w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
    }
    
    #blueblock ul{
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
    #blueblock li {
    border-bottom: 6px solid #f7dcb4;
    margin: 0;
    }
    
    #blueblock li a{
    display: block;
    padding: 6px 5px 6px 8px;
    border-left: 20px solid #a97d5d;
    background-color: #e6cba3;
    color: #5c755e;
    text-decoration: none;
    width: 100%;
    }
    
    html>body #blueblock li a{ /*Non IE6 width*/
    width: auto;
    }
    
    #blueblock li a:hover{
    border-left: 20px solid #ff9933;
    background-color: #ffcc99;
    color: #000;
    }
    
    <!-- ******************************** -->
    
    /*Credits: Dynamic Drive CSS Library */
    /*BREADCRUMBS - this has been edited for color and size */
    
    .breadcrumb{
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #5c755e;
    }
    
    .breadcrumb a{
    background: transparent url(breadcrumb.gif) no-repeat center right;
    text-decoration: none;
    padding-right: 18px; /*adjust bullet image padding*/
    color: #5c755e;
    }
    
    .breadcrumb a:visited, .breadcrumb a:active{
    color: #5c755e;
    }
    
    .breadcrumb a:hover{
    text-decoration: underline;
    
    
    <!-- Fortune Cookie from javascript.internet.com-->
    
    #fortuneTwo, #numbersTwo {
      height: 41px;
      width: 275px;
      margin: 0px auto 0px auto;
      padding-top: 10px;
    }
    #numbersTwo {
      height: 36px;
      width: 275px;
      margin: 0px auto 0px auto;
      padding-top: 15px;
    }
    }
    
    <!-- ******************************** -->
    
    /* This portion of CSS coded by Karen S. Garvin */
    
    
    h1 {font-size: 1.2em; font-weight:bold; text-align:center; color:#5c755e; padding: .5em 0 0 0;}
    
    h2 {font-size: 1em; font-weight:bold; font-style:italic; color:#5c755e;
    padding-left: 150px;}
    
    h3 {font-size: 1.4em; font-weight:bold; font-style:normal; font-variant:
    small-caps; color:#5c755e; padding: .5em 1em 0 0em;}
    
    h4 {font-size: .85em; font-weight:bold; font-style:normal; color:#5c755e;
    margin: 0 0 -1.5em 0; padding: 0 0 0 0;}
    
    h4 a:visited{
    color: #83a95d;
    }
    
    h5 {font-size: 1em; font-weight:bold; font-style:normal; color:#5c755e;
    margin: .5em 0 0 0; padding: 0 0 0 0;}
    
    p {font-size: .9em; font-weight:normal; padding: 0 0 0 0;}
    
    body {background-color:white; margin:0px; padding:0px; font: .8em verdana,
    arial, sans-serif;}
    
    img {border: none;}
    and index.html

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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" xml:lang="en" lang="en">
    
    <!-- ******************************** -->
    
    <head>
    <title>Welcome to Tangent Graphics</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link href="tg.css" rel="stylesheet" type="text/css" />
    <script src="equalcolumns.js" type="text/javascript"></script> 
    </head>
    
    
    
    <body>
    
    <div id="maincontainer">
    <div id="topmain">
    <div class="innertube">
    <p class="breadcrumb"><br />Home</p>
    <h1></h1>
    
    </div>
    </div>
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube">
    <h1><img src="graphics/tg_rock7.jpg" width="480" height="144" alt="Tangent Graphics"/></h1>
    
    <h5><br />Hello!</h5>
    <p>We're Karen and Bennett Garvin, owners of Tangent Graphics. You'll find our photography featured here, so take a look at what we have to offer and enjoy.<br /><br />
    Our work includes nature scenes, animals, and flowers, as well as rural and urban landscapes. We also have some black-and-white infrared and color infrared images in our portfolio.<br /><br />
    
    For 2007, we will be adding an e-commerce storefront so that you may purchase the images you see here directly from this site. We'll be offering standard size prints, as well as poster sizes for select images. Some images may be made available as gift items... so stay tuned for more info!
    </p>
    <p></p></div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <div class="innertube">
    <div id="blueblock">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="shows.html">Shows</a></li>
    <li><a href="faqs.html">FAQs</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="bios.html">About Us</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    <br /><br /><br /><br /><br /><br />
    
    <!-- XHTML sticker here -->
    <div id="w3c">
    <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0 Transitional" height="31" width="88"/></a>
    </div>
    
    
    </div>
    
    </div>
    
    </div>
    
    <div id="rightcolumn">
    <div class="innertube">
    <h1><img src="graphics/04-Zebra.png" width="120" height="152" title="Portrait of a Zebra" alt="Portrait of a Zebra" /></h1>
    </div>
    </div>
    
    <div id="footer">
    <p><b>Note:</b> All images on this website are copyrighted.</p>
    
    </div>
    
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Disappearing Right Column-internet.jpg   Disappearing Right Column-local.jpg  
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this Karen:

    Code:
    <div style="height: 376px;width:138px;float:right;" id="rightcolumn">
    <div class="innertube">
    <img src="graphics/04-Zebra.png" title="Portrait of a Zebra" alt="Portrait of a Zebra" height="152" width="120" />
    </div>
    Unfortunately I haven't the time to be getting all forensic with code right now, but hopefully this will set you on track.

    I've used inline styles for brevity here, but of course you can sweep them out to your external sheet later.

    Your still left with a few problems with the footer, but hopefully someone else will be along to advise on that

    Kind regards,

    Gary

    EDIT:

    Actually you can ignore the above, and just change the external stylesheet so:

    Code:
    #rightcolumn{
    float: left;
    width: 176px; /*Width of right column*/
    margin-left: -180px;
    background: #f7dcb4;
    border-left-width: 4px; border-left-color:#bbbbbb;
    border-left-style:dotted;
    }
    I just reduced the width of the column to subtract the additonal 4px width that the dotted border was adding.
    Last edited by Graft-Creative; 01-04-2007 at 07:05 PM.

  • #3
    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
    Did you by chance add this bit in recently?
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    If so its the cause of all your problems. Remove it. It puts IE6 into quirks mode causing it to display funky. Chances are when you first coded the page you didn't use a doctype? Did you add in the doctype later?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Aero: very true, but that still leaves the problem in FF (and also in Opera) both of which should handle the xml prologue just fine, as of course you are aware

    The right column just doesn't have enough room to float at 180px wide + 4px for the border with just a -180px margin to accomodate it - hence it is is being pushed down under the other two columns. Why it is dissappearing comletely, I've no Idea - but the code above seems to fix it (in FF at any rate)

    But yes, Karen remove the line that Aero pointed out - for the reason he pointed out

    Kind regards,

    Gary

  • #5
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Sort of missing, now...

    Still no go. I made the changes you guys suggested: changing the right margin from 180 to 176 in the CSS code, and deleting the <?XML line in the HTML code.

    I don't remember when I added the doctype, but it wasn't after I'd loaded it to the university servers for my class project. Don't know why it worked locally then, but not now. Maybe I added it at a later stage and didn't re-check the pages...

    Now the right column does show up when viewed locally with FF on the Mac. The white horizontal band at the top of the pages is still there.

    When I update the file on my web host and view it, the right column is still not there. However, if I play with the browser window, resizing it causes the zebra image to pop up momentarily at the left margin. It's as though something is hiding it or tiling over top of it.

    Any more ideas?
    Last edited by Karen S. Garvin; 01-04-2007 at 08:03 PM. Reason: added info
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #6
    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
    Post a link to your page please. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks nearly ok here - should be the same code Aero if you want to take a look

    Also, tested locally in FF it looked spot on, apart from the white bar at the top.

    Gary
    Last edited by Graft-Creative; 01-04-2007 at 08:13 PM.

  • #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
    There are a few places in the CSS causing it not to render properly. These places are where this occurs
    Code:
    <!-- ******************************** -->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Thanks. I removed these, uh, comments, from the CSS file:

    <!-- ******************************** -->

    and indeed, they were the major culprit. I also made edits to the size of the buttons in the left column.

    Still have the white box at the top issue to deal with, but now at least the artwork on the site is visible. Maybe people will think the white box is part of the design.

    The website is at www.tangentgraphics.com
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Comments

    I'd be careful with HTML, or rather SGML comments; stick to CSS comments if you want to add those to your style sheet, just to be safe.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Find:

    Code:
    .breadcrumb a:hover{
    text-decoration: underline;
    
    
    /* Fortune Cookie from javascript.internet.com */
    
    
    #numbersTwo {
      height: 36px;
      width: 275px;
      margin: 0px auto 0px auto;
      padding-top: 15px;
    }
    }
    And replace with:
    Code:
    .breadcrumb a:hover{
    text-decoration: underline;
    }
    
    /* Fortune Cookie from javascript.internet.com */
    
    #fortuneTwo, #numbersTwo {
      height: 41px;
      width: 275px;
      margin: 0px auto 0px auto;
      padding-top: 10px;
    }
    #numbersTwo {
      height: 36px;
      width: 275px;
      margin: 0px auto 0px auto;
      padding-top: 15px;
    }
    Not the answer but sorts out validation

    To sort out the white space put
    Code:
    .breadcrumb{
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: #5c755e;
    margin: 0;
    padding: 0;
    }
    :-)
    Last edited by ahallicks; 01-05-2007 at 04:10 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Thanks for all your help. The white stripe is now gone.

    Trying to learn XHTML, CSS, JavaScript, and PHP all at once sure makes it easy to get confused! Not to mention those cut-and-paste typing errors.
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com


  •  

    Posting Permissions

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