...

View Full Version : Disappearing Right Column



Karen S. Garvin
01-04-2007, 03:28 PM
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:


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


<?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>

Graft-Creative
01-04-2007, 06:44 PM
Try this Karen:



<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:



#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.

_Aerospace_Eng_
01-04-2007, 07:23 PM
Did you by chance add this bit in recently?

<?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?

Graft-Creative
01-04-2007, 07:54 PM
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

Karen S. Garvin
01-04-2007, 08:00 PM
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?

_Aerospace_Eng_
01-04-2007, 08:04 PM
Post a link to your page please. Help us help you.

Graft-Creative
01-04-2007, 08:10 PM
Looks nearly ok here (http://graftcreative.co.uk/KarenTest/) - 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

_Aerospace_Eng_
01-04-2007, 09:18 PM
There are a few places in the CSS causing it not to render properly. These places are where this occurs

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

Karen S. Garvin
01-05-2007, 02:47 PM
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. :p

The website is at www.tangentgraphics.com (http://www.tangentgraphics.com)

ronaldb66
01-05-2007, 03:00 PM
I'd be careful with HTML, or rather SGML comments; stick to CSS comments (http://www.w3.org/TR/CSS21/syndata.html#comments) if you want to add those to your style sheet, just to be safe.

ahallicks
01-05-2007, 04:07 PM
Find:



.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:


.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


.breadcrumb{
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #5c755e;
margin: 0;
padding: 0;
}

:-)

Karen S. Garvin
01-05-2007, 06:26 PM
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. :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum