SitePoint.com

RockOfVictory · Aug 2, 2004, 13:06

I have my site home page working with three columns, spaced by % (adapted from FU2K.org 3Col_NN4_FMFM). The left two columns are actually in one div, so the remaining pages use that div without three total columns. Here is a simplified version of the basic code:
www.zepfanman.com/temp/emcol.php

I would like to make two main changes:

(1) Fixed-width nav (right-column) instead of percentage (preferably around 9em).

(2) Hide Nav/Show Nav toggle like in SitePoint. I'd really only like this if it's not too complicated. I have yet to work on a "Print" format icon (just a different CSS template?) that I'd like to do for each page, so that might be as good as the Nav toggle.

* I want to be able to fix my CSS document and leave the content .php files the same, i.e. ordered as header, content, nav.

(3 - low priority) The following code seemed to be buggy as it made IE freeze after some font resizing. Is there an easy way to set it up where the fluid layout stops at the point where the browser window is too small to fit the text (eg. depending on the size of the text, if the browser window is, say, less than 600px, the formatting starts to drop all over the page making the content virtually illegible). Min-width:600 equivalent?

Code:

.box-wrap {
width:expression(document.body.clientWidth < 600? "599px": "auto" );}

Brak · Aug 2, 2004, 13:15

Lucky for you, someone already has done this

All you need to do is add in a footer, and remember to put in clear:both; into it so it stays at the bottom.

Also, you said you wanted fixed width, but gave a percentage-based unit (em). Nonethless, just set it in pixels - width:200px;

2- This is pretty easy, all you're going to have to find some javascript that basically says "when this object is clicked, set this class to my right nav. Then in that additional class put in display:none;

3- unfortunately this isn't supported (semantically) with any method. What I would advices is including a spacer gif (I know, I almost puked) the minimum width. That way your page remains that size when shrunk down to accomidate the wide spacer gif.

I've oversimplified all my explinations... let me know if you don't understand what I'm getting at.

RockOfVictory · Aug 2, 2004, 13:35

Quote:

Originally Posted by Brak

Lucky for you, someone already has done this

I had already fooled with that code and it wasn't working, for some reason. How can I set width:9em when .column-three is currently sized only as margin-left:79% while the main column (.columns-float) is set at float:left; width:79%?

I'll try out 2 & 3 later on. 1 is my biggest problem for now....

Brak · Aug 2, 2004, 13:49

I made this REALLY quickly, so it's got a lot of issues, but it should give you the jist of it. Also, you'll have to implement faux columns (search on google for the ALA article).

http://www.neathdesign.com/resources/magic.html

Paul O'B · Aug 3, 2004, 03:38

Hi,

If you use expressions then you need to use the appropriate script for quirks mode or standards mode as there are differences otherwise your code does freeze the browser.

I believe this will work for standards mode whereas the code you were using was for quirks mode (but js isn't my area).

Code:

.box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 
0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );}

Your hiding script works if you use id's instead of classes for the appropriate columns. They need to be unique anyway.

You could float the right column and give it a width and let the left be fluid but you would have to change the order of the html which I believe you didn't want to do.

Anyway I've put all the above into the file below so you can mess around with it. The columns will hide now and the min-width is applied for ie. (If you copy the format then you can use it for the other expressions that you wanted.)

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>emcol</title>
<style type="text/css">
/*.box-wrap {
width:expression(document.body.clientWidth < 500? "499px": "auto" );}*/
.box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth ==
0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );}
.box-wrap {min-width:500px}/* for mozilla etc */
.box-wrap, #columns-float, .column-one, .column-two, #column-three, h2
{position:relative}
.box-header {margin:0px;
border:2px solid red;
padding:3px;
border:none}
.box-footer {text-align:center;
background:#996;
padding:0.3em;
clear:both;
border:none}
#columns-float {
margin-right:204px;
border:2px solid red;
} /*cols 1 & 2 interchange*/
#column-three {
float:right;width:196px;
border:2px solid blue;}
.column-three-content {margin:3px}
.column-one {float:right; width:66%}
.column-two {margin-right:66%; background:blue;
/* max-width:10em;
min-width:8em;
width:expression(document.body.clientWidth < 600? "8em": "auto" );
width:expression(document.body.clientWidth > 700? "10em": "auto" )*/}
.column-one-content, .column-two-content, .columns-float-content {
margin:3px;
/* border: thin dotted;*/}
 
</style>
<script type="text/javascript">
function toggle()
{
if (!(document.getElementById)) { return; }
var right = document.getElementById('column-three'),
ctn = document.getElementById('columns-float');
if (right.style.display == "none"){
right.style.display = "";
ctn.style.width = "auto";
} 
else {
right.style.display = "none";
ctn.style.width = "100%";
}
}
</script>
</head>
<body>
<div class="box-wrap"> <a style="text-align:right; float:right" href="styles.cfm"
onclick="toggle() ;return false;">Hide/Show Sidebar</a> Zepfanman.com - header 
	<div id="column-three">
	<!-- right column _______-->
	<div class="column-three-content"> bahlkja alkj alkjs lkja sdlkj lkajs dlkj 
	 asldj asdiugou 14n5lkjas lkj iwh n lakjsd oij qwenoinas joij w;lkj fiq nnwe 
	 joain wfenm oinwef nqwe </div>
</div>
<!-- end column-three -->
<div id="columns-float"> 
	<div class="column-one">
	 <!-- center column _______-->
	 <div class="column-one-content"> Column center content </div>
	</div>
	<div class="column-two">
	 <!-- left column _________-->
	 <div class="column-two-content"> left column </div>
	</div>
	<!-- end column-two & col2-content -->
</div>
<!-- close columns-float -->
<div class="clear">&nbsp;</div>
<div class="box-footer"> footer </div>
</div>
<!-- close box-wrap -->
</body>
</html>

You might want to look at my 3 col demo sticky thread for more complicated layouts and techniques.

Hope the above helps anyway.

Paul

RockOfVictory · Aug 3, 2004, 06:42

Quote:

Originally Posted by Paul O'B

You could float the right column and give it a width and let the left be fluid but you would have to change the order of the html which I believe you didn't want to do.

Thanks for all the hard work! I did indeed discover that getElementByClass doesn't work.... I'm also bummed that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it the main content is loaded before the menu (the way I currently have it set up).

Compromises, compromises....

Oh, about the hide nav feature: is there an easy way to set it as a cookie so it stays that way from page to page?

Paul O'B · Aug 3, 2004, 06:55

Quote:

Oh, about the hide nav feature: is there an easy way to set it as a cookie so it stays that way from page to page?

Have a look at ther cookie function here which you should be able to adapt in the same manner.

http://www.alistapart.com/articles/alternate/

Quote:

that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it

Well there are ways around it but they can get complicated. I'll see if I can come up with something.

Paul

Paul O'B · Aug 3, 2004, 07:22

Quote:

that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it

If you add an extra wrapper you can get the effect you wanted.

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>emcol</title>
<style type="text/css">
/*.box-wrap {
width:expression(document.body.clientWidth < 500? "499px": "auto" );}*/
.box-wrap {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 
0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );}
.box-wrap {min-width:500px}/* for mozilla etc */
.box-wrap, #columns-float, .column-one, .column-two, #column-three, h2
{position:relative}
.box-header {margin:0px;
border:2px solid red;
padding:3px;
border:none}
.box-footer {text-align:center;
background:#996;
padding:0.3em;
clear:both;
border:none}
#columns-float {
float:left;width:98%;
border:2px solid red;
margin-right:-4px;
 
} /*cols 1 & 2 interchange*/
#wrapper {margin-right:204px}
#column-three {
float:right;width:196px;
border:2px solid blue;}
.column-three-content {margin:3px}
.column-one {float:right; width:66%}
.column-two {margin-right:66%; background:blue;
/* max-width:10em;
min-width:8em;
width:expression(document.body.clientWidth < 600? "8em": "auto" );
width:expression(document.body.clientWidth > 700? "10em": "auto" )*/}
.column-one-content, .column-two-content, .columns-float-content {
margin:3px;
/* border: thin dotted;*/}
 
</style>
<script type="text/javascript">
function toggle()
{
if (!(document.getElementById)) { return; }
var right = document.getElementById('column-three'),
ctn = document.getElementById('columns-float');
if (right.style.display == "none"){
right.style.display = "";
ctn.style.width = "auto";
} 
else {
right.style.display = "none";
ctn.style.width = "100%";
}
}
</script>
</head>
<body>
<div class="box-wrap"> <a style="text-align:right; float:right" href="styles.cfm"
onclick="toggle() ;return false;">Hide/Show Sidebar</a> Zepfanman.com - header 
<div id="wrapper">
<div id="columns-float"> 
<div class="column-one">
<!-- center column _______-->
<div class="column-one-content"> Column center content </div>
</div>
<div class="column-two">
<!-- left column _________-->
<div class="column-two-content"> left column </div>
</div>
<!-- end column-two & col2-content -->
</div>
<!-- close columns-float -->
	</div><!-- end wrapper -->
<div id="column-three">
<!-- right column _______-->
<div class="column-three-content"> bahlkja alkj alkjs lkja sdlkj lkajs dlkj 
asldj asdiugou 14n5lkjas lkj iwh n lakjsd oij qwenoinas joij w;lkj fiq nnwe 
joain wfenm oinwef nqwe </div>
</div>
<!-- end column-three -->
<div class="clear">&nbsp;</div>
<div class="box-footer"> footer </div>
</div>
<!-- close box-wrap -->
</body>
</html>

Hope that helps.

Paul

Paul O'B · Aug 3, 2004, 07:39

Of course you will now have to change the hiding routine as follows:

Code:

<script type="text/javascript">
function toggle()
{
  if (!(document.getElementById)) { return; }
var right = document.getElementById('column-three'),
ctn = document.getElementById('wrapper');
  if (right.style.display == "none"){
  right.style.display = "";
ctn.style.marginRight = "204"+"px";
  } 
else {
  right.style.display = "none";
ctn.style.marginRight = "0";
  }
}
</script>

Paul

RockOfVictory · Aug 3, 2004, 13:08

Quote:

Originally Posted by Paul O'B

Have a look at the cookie function here which you should be able to adapt in the same manner. http://www.alistapart.com/articles/alternate/

I'll have to work on that next. I've only been able to test the toggle on IE6 so far, which I know isn't good practice, but it's all I have to work on when I'm not at my home PC. I'd like to work out the bugs nonetheless:
(1) On the test toggle page I created (the format identical to all but the home page), my "FULL MENU" header is off-center; it also disappears when the window is resized.

(2) The test toggle page footer isn't laying out right, either.

(3) On the test home page, Hide Nav results in the main content overlapping the header.

I can't make sense of any of the above three changes since all I did was change a couple elements to ID instead of CLASS - and added the columns-wrap ID.

(4) I can't figure out how to float the "Hide/Show Sidebar" link to the right of the header: pathetic, I know.

(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?

FYI, I think I'm going to forget about the whole min-width thing as it's kind of pointless. Also, Paul, you might want to edit that one line of long code in half so this page isn't so wide. Thanks again for being patient in working this out with me.

Paul O'B · Aug 3, 2004, 14:53

Quote:

1)...it also disappears when the window is resized.

Add position:relative as follows:

Code:

#column-three {float:right;width:9.4em;
 border:0px solid blue;position:relative;}

Quote:

(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?

I've already shown you the code to use for this in the expression in my first post

. Just use it on the body to keep the whole screen at a set min-width. (Personally I don't see the need as the idea with floats is that they drop down when space is small - but I know some people prefer to fix the width.)

Most of your other issues can be solved if you followed the format of my first post whic corrected all theses issues

.

I'll have a look at your home page in a little while and see whats going on.

Paul

Paul O'B · Aug 3, 2004, 15:34

Hi,

You need to use the javascript I posted above which sorts out the columns.

I'll have to post all the code again so sorry to anybody reading this.

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zepfanman.com - When you can't find it on Google</title>
<style>
html {margin:0px; padding:0px;
 font-family:sans-serif; font-size:small}
body {margin:0px; padding:0px;min-width:750px;}
body {width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "749" : "auto") : "749px") : "auto" );}

div {margin:0px; padding:0px}
p {padding:0px; margin:0 .3em .7em .3em;}
a {color:black}
a:visited {color:#99c}
a img {border-color:#99c}
a:visited img {border-color:#99c}
h1 {margin:0px;
 font-weight:bold; font-size:1.2em}
h2 {font-size:.9em;
 margin:0 0 0.5em 0;
 padding:0.25em}
form {margin-bottom:2px; padding-bottom:1px}
.clear {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
} 
div.box-header {
 background:white !important;
 border-width:0 0 8px 0;
 border-style:solid}
.box-header {margin:0px;
 padding:3px;
 border:none}
div.box-header h1, div.box-header h2,
div.box-header h1 a:visited {
 display:inline;
 color:black;
 text-decoration:none}
div.box-header h1 {font-size:1.5em}
div.box-header h1 span {color:#f33;
 display:inline}
div.box-header h2 {color:gray; padding-left:.7em; font-size:1.2em}
.toggle {font-size:x-small;float:right;width:10em;position:relative;}
.box-footer {text-align:center;
 background:#996;
 padding:0.3em;
 clear:both;
 border:none}
#columns-wrap {margin-right:9.5em;}
#column-three {float:right;width:9.4em;
 border:0px solid blue;position:relative;}
#columns-float {float:left;width:99.9%;
 border:0px solid red;
 margin-right:-4px;}
.column-three {margin-left:79%;position:relative}
.columns-float {float:left; width:79%} /*cols 1 & 2 interchange*/
.column-three-content {margin:3px;
/* max-width:10em;
 min-width:8em;
 width:expression(document.body.clientWidth < 600? "8em": "auto" );
 width:expression(document.body.clientWidth > 700? "10em": "auto" )*/}
.overview {border:2px solid #bbb; font-size:medium}
.overview a, .overview a:visited {border:2px solid white;
 display:block;
 color:gray;
 text-decoration:none;
 text-align:center;
 font-weight:bold;
 margin:1px;
 padding:0}
.overview a:hover,.overview a:active {
 border:2px solid #bbb !important} /*outset*/
#navbel {background:#fcc}
#navled {background:#ffc}
#navgal {background:#cff}
#navblo {background:#cc9}
#navlin {background:#cfc}
.search {margin:2px; text-align:center}
.search input {font-size:smaller; margin:1px -2px}
.toc a {text-decoration:none}
.toc ul {padding:0;
 margin:.1em 0 .3em .2em}
/******* .toc li { x-small} only for debug ******/
.toc li{margin:0 0 .8em 0; padding:0;
 list-style-type:none;
 font-weight:bold;
 line-height:90%}
.toc ul li ul {margin:0 0 0 1em;
 list-style-type:disc}
.toc ul li ul li {margin:0 0 0 .3em;
 list-style-type:disc;
 font-weight:normal;}
.toc ul li ul li ul, .toc ul li ul li ul a {color:#888}
.toc p {margin:.1em;
 border-width:.1em 0 0 0;
 border-style:solid;
 border-color:#bbb}
.section {border:2px solid #bbb; margin-bottom:.4em;}
.section h2 {background:#bbb;
 font-size:small;
 padding:0 0 1px 0;
 margin:2px; margin-bottom:0;
 text-align:center;
 text-transform:uppercase;
 
}
.section h2 a:visited {color:black}
.synd {text-align:center; color:#888;
 margin-top:1em;
 vertical-align:bottom}
.linknew, .linkedit {font-style:italic; font-size:smaller}
.linknew {color:red}
.linkedit {color:#888}
.title {font-style:italic}
.details {font-size:smaller}
.column_padding_after {height:0px;
 font-size:1px;
 line-height:0px;
 clear:both}
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2
 {position:relative}
 
div.box-header, div.box-footer, p.here{
 background:#bbb; border-color:#bbb}
.column-one {float:right; width:66%}
.column-two {margin-right:66%}
.column-one-content, .column-two-content, .columns-float-content {
 margin:3px;
 /* border: thin dotted;*/}
.ledzep h2 {background:#ffc;
 text-align:center;
 text-transform:none;
 font-family:Georgia, serif}
.lzintro {font-family:sans-serif;
 font-size:x-small;
 text-align:center}
.lznav {font-family:sans-serif;
 font-size:small;
 line-height:140%;
 margin:0 .2em 0 2px;
 padding:0 .2em .2em .2em;
 float:left;
 background:#ffc}
.blognew {border:2px solid #bbb; margin-bottom:.4em}
.bloghead {background:#cc9;
 padding:0 0 1px .3em;
 margin:2px}
.bloghead h3, .bloghead div div div {text-decoration:underline}
.bloghead h2, .bloghead h2 a, .bloghead h2 a:visited {
 font-size:small;
 color:#f33; text-transform:uppercase;
 text-align:center;
 padding:0 .3em 0 0;
 margin:0;
 display:block}
.blogentry {margin: .4em;
 padding:0 0 .4em 0} 
.blogentry h3, .bloghead h3 {font-weight:bold; font-size:small;
 display:inline}
.blogentry div, .blogcat, .bloghead div div {
 font:normal small sans-serif;
 display:inline;
 white-space:nowrap;
 color:#aaa;
 text-transform:none}
.blogentry p {display:inline; font-size:small}
.blogcat a {text-transform:uppercase}
.galrand h2 {background:#cff}
.galrand p {text-align:center;
 margin:2px}
.linkbox h2 {background:#cfc}
.welcome p {margin:.3em; text-align:center; font-size:small}
.words h2 {background:#fcc}
.words h3 {font-size:small;
 display:inline}
.words p {margin:.3em .3em .9em .3em}
.wordscom {font:normal small sans-serif;
 color:#888}
.wordshead {margin:.2em .1em 0 .3em}
.wordsmore {font:normal small sans-serif;
 display:block;
 text-align:right;
 color:#888;
 margin:0 0 .2em 0}
.wordsmore a {color:#888}

</style>
<script type="text/javascript" src="ResizeReloadNN4.js"></script>
<script type="text/javascript" >
function toggle()
{
  if (!(document.getElementById)) { return; }
var right = document.getElementById('column-three'),
ctn = document.getElementById('columns-wrap');
  if (right.style.display == "none"){
  right.style.display = "";
ctn.style.marginRight = "9.5"+"em";
  } 
else {
  right.style.display = "none";
ctn.style.marginRight = "0";
  }
}
</script>
<script language="javascript" type="text/javascript">
function OpenComments (c) {
 window.open(c,'comments',
  'width=480,height=480,scrollbars=yes,status=yes');}
function OpenTrackback (c) {
 window.open(c,'trackback',
  'width=480,height=480,scrollbars=yes,status=yes');}
</script>
</head>
<body>
<div class="box-wrap"> 
  <div style="text-align:center">(Zepfanman.com is <a href="/normore.php#css">UNDER 
	CONSTRUCTION</a>)</div>
  <div class="box-header"> 
	<h1><a class="toggle" href="/toggle.php"
 onclick="toggle() ;return false;">Hide/Show Sidebar</a><a href="http://zepfanman.com">Zepfanman<span>.com</span></a></h1>
	<h2> When you can't find it on Google</h2>
  </div>
  <div id="columns-wrap"> 
	<div id="columns-float"> 
	  <div class="column-one"> 
		<!-- center column _______-->
		<div class="column-one-content"> 
		  <div class="section"> 
			<div class="ledzep"> 
			  <h2><a href="ledzep">Led Zeppelin Evermore</a></h2>
			  <div class="lznav"> -<a href="lednews.html">News</a><br />
				-<a href="#">Discs</a><br />
				-<a href="#">Ref.</a><br />
				-<a href="#">Lyrics</a><br />
				-<a href="#">Sounds</a><br />
				-<a href="#">Gallery</a><br />
				-<a href="#">Links</a> </div>
			  <p class="lzintro">~ Map to the Zeppelin WWW ~</p>
			  <div class="lznews"> 
				<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000017.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/22"
	dc:title="New *A to Zeppelin* DVD"
	dc:identifier="http://zepfanman.com/archives/000017.php"
	dc:subject="LedZep"
	dc:description="Lots of interviews, but NO music."
	dc:creator="rockofvictory"
	dc:date="2004-06-29T17:45:36-06:00" />
</rdf:RDF>
-->
				<div class="blogentry"> 
				  <div>Jun29 </div>
				  <h3><a href="http://zepfanman.com/archives/000017.php">New *A 
					to Zeppelin* DVD</a></h3
 >
				  <p>Lots of interviews, but NO music.</p>
				  <div>Comment(0) </div>
				</div>
				<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000015.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/20"
	dc:title="Remember the Honeydrippers?"
	dc:identifier="http://zepfanman.com/archives/000015.php"
	dc:subject="LedZep"
	dc:description="Plant&apos;s first post-Zeppelin band looking to release a second album."
	dc:creator="rockofvictory"
	dc:date="2004-06-16T08:36:06-06:00" />
</rdf:RDF>
-->
				<div class="blogentry"> 
				  <div>Jun16 </div>
				  <h3><a href="http://zepfanman.com/archives/000015.php">Remember 
					the Honeydrippers?</a></h3
 >
				  <p>Plant's first post-Zeppelin band looking to release a second 
					album.</p>
				  <div>Comment(1) </div>
				</div>
				<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000014.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/19"
	dc:title="JPJ Joining MAS&apos;s August Tour"
	dc:identifier="http://zepfanman.com/archives/000014.php"
	dc:subject="LedZep"
	dc:description="7/27-8/19 US tour (Seattle to DC)."
	dc:creator="rockofvictory"
	dc:date="2004-06-16T08:29:09-06:00" />
</rdf:RDF>
-->
				<div class="blogentry"> 
				  <div>Jun16 </div>
				  <h3><a href="http://zepfanman.com/archives/000014.php">JPJ Joining 
					MAS's August Tour</a></h3
 >
				  <p>7/27-8/19 US tour (Seattle to DC).</p>
				  <div>Comment(0) </div>
				</div>
			  </div>
			</div>
			<div class="clear"></div>
		  </div>
		  <!-- end ledzep section -->
		  <div class="blognew"> 
			<div class="bloghead"> 
			  <h2><a href="/blog">NEW BLOGS</a></h2>
			  <div> 
				<h3>Title</h3>
				&nbsp; 
				<div>(Comments) 
				  <div>Category</div>
				  &nbsp;Date</div>
			  </div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000026.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/31"
	dc:title="Primped Out"
	dc:identifier="http://zepfanman.com/archives/000026.php"
	dc:subject="Gallery"
	dc:description="<![CDATA[<a href="/archives/000026.php"><img src="/albums/04july/P7311063.thumb.jpg" alt="MegsnJJ Masked" align="right" vspace="2" hspace="7"></a> A healthy Saturday: YMCA, massage, steaks on the grill, clean shave, and... masks?]]>"
	dc:creator="rockofvictory"
	dc:date="2004-08-01T08:26:33-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000026.php">Primped Out</a></h3>
			  &nbsp; 
			  <div>(1)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_gallery.php">Gallery</a> 
			  </div>
			  <div>Aug01</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000025.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/30"
	dc:title="Bourne Still Going Strong"
	dc:identifier="http://zepfanman.com/archives/000025.php"
	dc:subject="Links"
	dc:description="Not having read any of the four Bourne books, it&apos;s hard to say how well the movies are being adapted...."
	dc:creator="rockofvictory"
	dc:date="2004-07-25T16:07:22-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000025.php">Bourne Still 
				Going Strong</a></h3>
			  &nbsp; 
			  <div>(0)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_links.php">Links</a> 
			  </div>
			  <div>Jul25</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000024.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/29"
	dc:title="Ode To Megan"
	dc:identifier="http://zepfanman.com/archives/000024.php"
	dc:subject="News"
	dc:description="Thank you for giving me a person worth sharing things with. No matter how much instruction other people give me,..."
	dc:creator="rockofvictory"
	dc:date="2004-07-25T15:40:37-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000024.php">Ode To Megan</a></h3>
			  &nbsp; 
			  <div>(2)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_news.php">News</a> 
			  </div>
			  <div>Jul25</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000023.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/28"
	dc:title="*Revenge of the Sith* Announced"
	dc:identifier="http://zepfanman.com/archives/000023.php"
	dc:subject="Links"
	dc:description="Star Wars III has an official title. It is set to be relesed in May 2005. As the title suggests,..."
	dc:creator="rockofvictory"
	dc:date="2004-07-25T14:00:13-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000023.php">*Revenge 
				of the Sith* Announced</a></h3>
			  &nbsp; 
			  <div>(0)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_links.php">Links</a> 
			  </div>
			  <div>Jul25</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000022.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/27"
	dc:title="Election 04 Websites"
	dc:identifier="http://zepfanman.com/archives/000022.php"
	dc:subject="Links"
	dc:description="It&apos;s about time I start looking for a candidate to vote for. In addition to the two rich candidates (you..."
	dc:creator="rockofvictory"
	dc:date="2004-07-23T14:34:16-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000022.php">Election 
				04 Websites</a></h3>
			  &nbsp; 
			  <div>(1)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_links.php">Links</a> 
			  </div>
			  <div>Jul23</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000021.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/26"
	dc:title="Zepfanman.com REDESIGNED!"
	dc:identifier="http://zepfanman.com/archives/000021.php"
	dc:subject="News"
	dc:description="I finally decided to get rid of the /beta site and just go for it. MovableType blog and Gallery.Menalto are..."
	dc:creator="rockofvictory"
	dc:date="2004-07-09T15:48:15-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000021.php">Zepfanman.com 
				REDESIGNED!</a></h3
 >
			  &nbsp; 
			  <div>(0)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_news.php">News</a> 
			  </div>
			  <div
 >Jul09</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000020.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/25"
	dc:title="Summer Photos"
	dc:identifier="http://zepfanman.com/archives/000020.php"
	dc:subject="Gallery"
	dc:description="Kicking off the hottest holiday at the hottest place: Houston...."
	dc:creator="rockofvictory"
	dc:date="2004-07-07T00:07:51-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000020.php">Summer Photos</a></h3
 >
			  &nbsp; 
			  <div>(0)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_gallery.php">Gallery</a> 
			  </div>
			  <div
 >Jul07</div>
			</div>
			<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000018.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/23"
	dc:title="<![CDATA[Reality &amp; Low-Carb Madness]]>"
	dc:identifier="http://zepfanman.com/archives/000018.php"
	dc:subject="News"
	dc:description="I just need to rant for a few seconds. I&apos;m sure if I surfed around some, I could find others..."
	dc:creator="rockofvictory"
	dc:date="2004-06-29T22:09:04-06:00" />
</rdf:RDF>
-->
			<div class="blogentry"> 
			  <h3><a href="http://zepfanman.com/archives/000018.php">Reality &amp; 
				Low-Carb Madness</a></h3
 >
			  &nbsp; 
			  <div>(0)</div>
			  <div>&nbsp;<a class="blogcat"  href="http://zepfanman.com/archives/cat_news.php">News</a> 
			  </div>
			  <div
 >Jun29</div>
			</div>
		  </div>
		  <!-- end blognew section -->
		  <div class="section"> 
			<div class="galrand"> 
			  <h2><a href="/gallery">Featured Shot</a></h2>
			  <p><a href='http://www.zepfanman.com/gallery/view_photo.php?set_albumName=04gatlin&id=P5310960
' title="HASH(0x8884248)"  ><img src='http://www.zepfanman.com/albums/04gatlin/P5310960
.thumb.jpg' alt="MT::Template::Context=HASH(0x886b874)"  class="HASH(0x8876f54)"  /></a></p>
			</div>
		  </div>
		  <!-- end galrand section -->
		  <div class="section"> 
			<div class="linkbox"> 
			  <h2><a href="favs.html">Zepfanman's Favs</a></h2>
			  <p><a href="http://jamiepeck.com">JamiePeck.com</a> <span
class="details">- A good friend's personal site; sports and tech oriented. </span></p>
			  <p><a href="http://christiananswers.net">ChristianAnswers.net</a> 
				<span
class="details">- Q&amp;A site with many media resources, as well.</span> </p>
			  <p><a href="http://www.linwood.demon.co.uk/news.html">TBL/Web News</a> 
				<span class="details">- Zeppelin news updated almost daily.</span
></p>
			  <p><a href="http://care2.com">Care2.com</a> &amp; <a
href="http://charityusa.com">CharityUSA.com</a> <span
class="details">- I go to these sites once a day and click about 20 times to donate 
				to all these causes for free. Care2 has a better interface, but 
				both are popular and effective sites.</span></p>
			</div>
		  </div>
		  <!-- end linkbox section -->
		  <div class="synd"> <a href="http://zepfanman.com/index.rdf">Syndicate 
			(RSS 1.0, XML)</a> </div>
		</div>
	  </div>
	  <div class="column-two"> 
		<!-- left column _________-->
		<div class="column-two-content"> 
		  <div class="section"> 
			<div class="welcome"> 
			  <h2>Welcome</h2>
			  <p>Your starting point for finding the web's most fun &amp; useful 
				links (particularly in one of the categories listed in the right 
				column).</p>
			</div>
		  </div>
		  <!-- end welcome section -->
		  <div class="section"> 
			<div class="words"> 
			  <h2><a href="bibsalva.html" 
title="The most important part of the website"
>Most Important!</a></h2>
			  <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		 xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
		 xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
	rdf:about="http://zepfanman.com/archives/000027.php"
	trackback:ping="http://zepfanman.com/mt/mt-tb.cgi/32"
	dc:title="August Words - What&apos;s Your Response?"
	dc:identifier="http://zepfanman.com/archives/000027.php"
	dc:subject="Beliefs"
	dc:description="&quot;A farmer went out to sow his seed.... some fell along the path.... some fell on rocky places.... other seed..."
	dc:creator="rockofvictory"
	dc:date="2004-08-01T14:02:36-06:00" />
</rdf:RDF>
-->
			  <div class="wordshead"> <a href="http://zepfanman.com/archives/000027.php"> 
				<h3>August Words - What's Your Response?</h3>
				</a
 ><br />
				<a class="wordscom"
 href="http://zepfanman.com/mt/mt-comments.cgi?entry_id=27"
 onclick="OpenComments(this.href); return false"
 >Comment(0)</a> </div>
			</div>
			<p />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
			<p>"A farmer went out to sow his seed.... some fell along the path.... 
			  some fell on rocky places.... other seed fell among thorns.... Still 
			  other seed fell on good soil."<br />
			  &nbsp;&nbsp; ^ <a href="http://biblegateway.com/cgi-bin/bible?passage=MARK%2B4%3A3-20&version=NASB">Mark 
			  4:3-20</a> (NIV)</p>
			<p>Look closely at verses 14-20 to see what the elements of this parable 
			  represent. I often have to look back at my own life and wonder if 
			  "other things come in a choke the word, making it unfruitful" (v.19) 
			  - am I receiving God's Spirit and the Word but being choked by thorns?</p>
			<span class="wordsmore">(<a href="/words">For more Words...</a>)</span> 
		  </div>
		</div>
		<!-- end words section -->
		<div class="section"> 
		  <div class="linkbox"> 
			<h2><a href="favs.html">Bored?</a></h2>
			<p><a href="http://homestarrunner.com">Homestarrunner.com</a> <span
class="details">- Hilarious, clean fun. You won't be disappointed.</span
></p>
			<p><a href="http://addictinggames.com">AddictingGames.com</a> <span
class="details">- Hundreds of quick-loading nifty games.</span></p>
			<p><a href="http://aintitcoolnews.com">AintItCoolNews.com</a> <span
class="details">- movie trailers, comment posting, and lesser-known films &amp; 
			  TV. Compare to <a href="http://upcomingmovies.com">Upcoming Movies</a> 
			  on Yahoo!</span></p>
		  </div>
		</div>
		<!-- end linkbox section -->
	  </div>
	</div>
	<!-- end column-two & col2-content -->
  </div>
</div></div>
<!-- close columns-float & wrap-->
<div id="column-three"> 
  <!-- right column ------->
  <div class="column-three-content"> 
	<div class="overview"> <a id="navbel" href="/beliefs">Beliefs</a> <a id="navled" href="/ledzep">LedZep</a> 
	  <a id="navgal" href="/gallery">Gallery</a> <a id="navlin" href="/links">LINKS</a> 
	  <a id="navblo" href="/blog">Blog</a> </div>
	<!-- end overview section -->
	<FORM method="GET" action="http://www.google.com/search" class="search">
	  <INPUT TYPE="text" name="q" size="10" maxlength="255"
value="All of Zepfanman.com" onClick="this.form.q.select()" />
	  <input type="hidden" name="sitesearch" value="zepfanman.com" />
	  <INPUT type="submit" name="btnG" VALUE="Go" />
	</FORM>
	<div class="section"> 
	  <div class="toc"> 
		<h2>Full Menu</h2>
		<ul>
		  <li><a href="/">Home</a> 
			<ul>
			  <li><a href="/blog">News*</a></li>
			  <li><a href="/gb.php">Guestbooks</a></li>
			  <li><a href="/normore.php">Help</a></li>
			  <li>Site Map</li>
			</ul>
		  </li>
		  <li><a href="/beliefs">/Beliefs</a> 
			<ul>
			  <li><a href="/archives/cat_beliefs.php">News*</a></li>
			  <li><a href="/salvation">"LAWS"</a></li>
			  <li><a href="/bible">Bible</a> 
				<ul>
				  <li><a href="/words.php">Words</a></li>
				  <li><a href="/bible.html">Curious.</a></li>
				</ul>
			  </li>
			  <li><a href="/equality">Feminism*</a> 
				<ul>
				  <li><a href="/bibearti.html">Articles</a></li>
				  <li><a href="/bibequal.html#books">Books</a></li>
				  <li><a href="/bibeqfor.html">Forum</a></li>
				  <li><a href="/bibequal.html#issue">Issues</a></li>
				  <li><a href="/bibequal.html#links">Links</a></li>
				  <li><a href="/bibeqsta.html">Statement</a></li>
				</ul>
			  </li>
			  <li><a href="/biblinks.php">Links*</a></li>
			  <li><a href="/music">Music*</a> 
				<ul>
				  <li><a href="/music.html#Music Comments">Comments</a></li>
				  <li><a href="/ledzep">LedZep*</a></li>
				  <li><a href="/musiclin.php">Links*</a></li>
				  <li><a href="/lyrics.html">Lyrics</a></li>
				</ul>
			  </li>
			</ul>
		  </li>
		  <li><a href="/ledzep">/LedZep</a> 
			<ul>
			  <li><a href="/archives/cat_ledzep.php">News*</a></li>
			  <li><a href="/discogra.html">Discs</a></li>
			  <li><a href="/ledref.html">Ref.</a></li>
			  <li><a href="/ledlyrso.html">Lyrics</a></li>
			  <li><a href="/ledlyrso.html">Sounds</a></li>
			  <li><a href="/ledpics.html">Gallery*</a></li>
			  <li><a href="/ledlinks.html">Links</a></li>
			</ul>
		  </li>
		  <li><a href="/gallery">/Gallery</a> 
			<ul>
			  <li><a href="/archives/cat_gallery.php">News*</a></li>
			  <li><a href="/galhelp.php">Help</a></li>
			  <li><a href="/photold.php">Old</a></li>
			</ul>
		  </li>
		  <li><a href="/links">/LINKS</a> 
			<ul>
			  <li><a href="/archives/cat_links.php">News*</a></li>
			  <li><a href="/service.html">Activities</a></li>
			  <li><a href="/art.html">Artwork</a></li>
			  <li><a href="/bloghelp.php">Blog*</a></li>
			  <li><a href="/favs.php">FAVORITES</a></li>
			  <li><a href="/equality">Feminism*</a></li>
			  <li><a href="/friends.html">Friends</a></li>
			  <li><a href="/genealog.html">Genealogy</a></li>
			  <li><a href="/wwwSite2.html">misc.</a></li>
			  <li><a href="/movies">Movies 1</a> <a href="/movies2.php">2</a></li>
			  <li><a href="/musiclin.php">Music*</a></li>
			  <li><a href="/wwwSite.php">Reference</a></li>
			  <li><a href="/biblinks.html">Religious*</a></li>
			</ul>
		  </li>
		  <li><a href="/blog">/Blog</a> 
			<ul>
			  <li><a href="/bloghelp.php">Other*</a> 
				<ul>
				  <li><a href="http://zepfanman.com/archives/cat_beliefs.php">Beliefs(3)</a>*</li>
				  <li><a href="http://zepfanman.com/archives/cat_gallery.php">Gallery(3)</a>*</li>
				  <li><a href="http://zepfanman.com/archives/cat_ledzep.php">LedZep(3)</a>*</li>
				  <li><a href="http://zepfanman.com/archives/cat_links.php">Links(9)</a>*</li>
				  <li><a href="http://zepfanman.com/archives/cat_news.php">News(8)</a>*</li>
				</ul>
			  </li>
			</ul>
		  </li>
		</ul>
		<p>* = Sections listed more than once </div>
	</div>
  </div>
  <!-- end toc & col3-content -->
</div>
<!-- end column-three -->
<div class="clear"></div>
<div class="box-footer"> 
  <p><a href="/normore.php">About</a> - <a href="/contact.html">Contact</a> - 
	<a href="http://movabletype.org">MovableType 2.661</a> - <a href="http://gallery.menalto.com">Gallery 
	1.4.2</a></p>
  <p> 
	<!--#echo var="HTTP_HOST"-->
	<!--#echo var="DOCUMENT_URI"-->
	zepfanman.com/index_toggle.php last modified 2004Aug03 15:06:20EST 
	<!--#config timefmt="%Y%b%d %X%Z"-->
	<!--#echo var="LAST_MODIFIED"-->
  </p>
</div></div>
<!-- close box-wrap -->
</body>
</html>

That should do most of what you want

Paul

RockOfVictory · Aug 4, 2004, 15:32

Quote:

Originally Posted by Paul O'B

You need to use the javascript I posted above which sorts out the columns. I'll have to post all the code again so sorry to anybody reading this.

Again, excellent. I didn't realize that you had made other little changes in (at first glance) random classes. That seems to fix just about all the issues for my new nav!

However.... That ALA article is a little confusing as it refers more to a stylesheet file instead of just a couple class changes. Anyone wanna help me out with that code, too (what is a common cookie expiration length)? I've never worked with cookies, so maybe a link to a tutorial would better suit everyone's time.

Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... Grrrr

Paul O'B · Aug 5, 2004, 08:23

Quote:

Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... Grrrr

Its because you have placed it outside the column-two-content div.

Find the end of the column-two-content div and stick the section in there.

I've tried it locally and it works fine. You will just have to find the correct closing div

For cookies have a look here for cookies in the javascript section.

http://www.quirksmode.org/

Paul

RockOfVictory · Aug 5, 2004, 10:36

Quote:

Originally Posted by Paul O'B

Its because you have placed it outside the column-two-content div. For cookies have a look here for cookies in the javascript section.
http://www.quirksmode.org/

Amen. I found the extra DIV that, for some reason, found its way into the MOST IMPORTANT! section. I've been busy the past couple of days, so I probably won't get to mess with the js stuff quite yet. Don't be surprised if I come begging for help again (I'm sure you get way too many PMs to begin with), but I'm going to try to learn about cookies and js more comprehensively from that QuirksMode site - nice resource! Is there anything I can help you with in particular - web related or not?

Paul O'B · Aug 5, 2004, 13:50

Quote:

Is there anything I can help you with in particular - web related or not?

Thanks for the offer

I'll bear it in mind.

Yes that quirksmode site is a good resource

RockOfVictory · Sep 14, 2004, 09:49

Once again, I've run into a problem. I've noticed that my right column doesn't show up properly in IE5. Is this a box model problem? I can't seem to figure out how to get it working.

Know of any good links to debates or info about client-side vs server-side stylesheets (i.e. using an alternate sheet if its discovered that IE5 is being used). The only thing I don't like about server-side is that it's one more stylesheet that I have to keep up with.

Paul O'B · Sep 14, 2004, 16:26

Quote:

Once again, I've run into a problem. I've noticed that my right column doesn't show up properly

It doesn't show up at all

Wheres the link to it?

RockOfVictory · Sep 14, 2004, 17:26

Quote:

Originally Posted by Paul O'B

It doesn't show up at all

Wheres the link to it?

It's still Zepfanman.com (no longer in the temp or beta directories of my website; went live a couple months ago)

Paul O'B · Sep 15, 2004, 07:53

Hi,

This might work but don't ask me to explain it as it would take too long.

Code:

/* to cater for ie5 and ie5.5. and ie6 all of which need something different*/
* html #columns-wrap{float:left;margin-right:9.4em;voice-family: "\"}\""; voice-family:inherit;}
* html #columns-wrap{margin-right:0;fl\oat:none;ma\rgin-right:9.4em}
* html #columns-float {margin-right:-9.4em;ma\rgin-right:-4px}
/* order not to be changes else cascade is wrong */

Place at the end of the stylesheet but don't change any of the order or it won't work.

This makes it work in ie5 and ie5.5. and ie6. If it causes any other problems then I give up

Paul

RockOfVictory · Sep 15, 2004, 21:19

Quote:

Originally Posted by Paul O'B

Hi, This might work but don't ask me to explain it as it would take too long.

Of course it worked - you're my hero. Any input on the latter question (links/debates about client-side vs. server-side styling)?

athomemama · Aug 5, 2005, 14:48

on my page, gamingandtech.com, I can't get my adsense to not 'jump' when loaded. is this a float issue?

what can I do to fix it? i've tried playing with percentages, but it seems to be that the adsense wants to rise higher and my style sheet is making it stay low. maybe i am not making much sense.

if anyone has time or is willing to give me some much appreciated advice, please do. thanks!

all4nerds · Aug 5, 2005, 16:34

Helo

maybe these treads helps

http://www.sitepoint.com/forums/show...irefox+flicker

Fayth · Oct 10, 2007, 10:19

Quote:

Originally Posted by athomemama

on my page, gamingandtech.com, I can't get my adsense to not 'jump' when loaded. is this a float issue?

what can I do to fix it? i've tried playing with percentages, but it seems to be that the adsense wants to rise higher and my style sheet is making it stay low. maybe i am not making much sense.

if anyone has time or is willing to give me some much appreciated advice, please do. thanks!

I had the same problem in Firefox, but I tried it with Opera and it is good enough, at least for my foreign online pharmacy where it proved not to work at all. Now, I guess they have solved it in Firefox, but I am not willing to try it there.

Paul O'B · Oct 10, 2007, 13:23

Quote:

Originally Posted by fayth

I had the same problem in Firefox,

I'm not seeing any flicker on that page in Firefox or opera.

Aug 2, 2004, 13:06	#1
RockOfVictory SitePoint Enthusiast Join Date: Feb 2004 Location: Nashville, TN Posts: 81	Head, foot, right-nav fixed, fluid content? I have my site home page working with three columns, spaced by % (adapted from FU2K.org 3Col_NN4_FMFM). The left two columns are actually in one div, so the remaining pages use that div without three total columns. Here is a simplified version of the basic code: www.zepfanman.com/temp/emcol.php I would like to make two main changes: (1) Fixed-width nav (right-column) instead of percentage (preferably around 9em). (2) Hide Nav/Show Nav toggle like in SitePoint. I'd really only like this if it's not too complicated. I have yet to work on a "Print" format icon (just a different CSS template?) that I'd like to do for each page, so that might be as good as the Nav toggle. * I want to be able to fix my CSS document and leave the content .php files the same, i.e. ordered as header, content, nav. (3 - low priority) The following code seemed to be buggy as it made IE freeze after some font resizing. Is there an easy way to set it up where the fluid layout stops at the point where the browser window is too small to fit the text (eg. depending on the size of the text, if the browser window is, say, less than 600px, the formatting starts to drop all over the page making the content virtually illegible). Min-width:600 equivalent? Code: .box-wrap { width:expression(document.body.clientWidth < 600? "599px": "auto" );} __________________ ~ Zepfanman.com: When you can't find it on Google

Aug 2, 2004, 13:15	#2
Brak SitePoint Addict Join Date: Jul 2004 Location: Central Coast, CA Posts: 340	Lucky for you, someone already has done this All you need to do is add in a footer, and remember to put in clear:both; into it so it stays at the bottom. Also, you said you wanted fixed width, but gave a percentage-based unit (em). Nonethless, just set it in pixels - width:200px; 2- This is pretty easy, all you're going to have to find some javascript that basically says "when this object is clicked, set this class to my right nav. Then in that additional class put in display:none; 3- unfortunately this isn't supported (semantically) with any method. What I would advices is including a spacer gif (I know, I almost puked) the minimum width. That way your page remains that size when shrunk down to accomidate the wide spacer gif. I've oversimplified all my explinations... let me know if you don't understand what I'm getting at. __________________ Studio Rockstar's Blog - A journey to quitting the dayjob.

Aug 2, 2004, 13:49	#4
Brak SitePoint Addict Join Date: Jul 2004 Location: Central Coast, CA Posts: 340	I made this REALLY quickly, so it's got a lot of issues, but it should give you the jist of it. Also, you'll have to implement faux columns (search on google for the ALA article). http://www.neathdesign.com/resources/magic.html __________________ Studio Rockstar's Blog - A journey to quitting the dayjob.

Sep 14, 2004, 09:49	#17
RockOfVictory SitePoint Enthusiast Join Date: Feb 2004 Location: Nashville, TN Posts: 81	Specific box model implementation? Once again, I've run into a problem. I've noticed that my right column doesn't show up properly in IE5. Is this a box model problem? I can't seem to figure out how to get it working. Know of any good links to debates or info about client-side vs server-side stylesheets (i.e. using an alternate sheet if its discovered that IE5 is being used). The only thing I don't like about server-side is that it's one more stylesheet that I have to keep up with.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 15, 2004, 07:53	#20
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 29,306	Hi, This might work but don't ask me to explain it as it would take too long. Code: /* to cater for ie5 and ie5.5. and ie6 all of which need something different/ html #columns-wrap{float:left;margin-right:9.4em;voice-family: "\"}\""; voice-family:inherit;} * html #columns-wrap{margin-right:0;fl\oat:none;ma\rgin-right:9.4em} * html #columns-float {margin-right:-9.4em;ma\rgin-right:-4px} /* order not to be changes else cascade is wrong */ Place at the end of the stylesheet but don't change any of the order or it won't work. This makes it work in ie5 and ie5.5. and ie6. If it causes any other problems then I give up Paul

Aug 5, 2005, 14:48	#22
athomemama SitePoint Member Join Date: Aug 2005 Posts: 2	on my page, gamingandtech.com, I can't get my adsense to not 'jump' when loaded. is this a float issue? what can I do to fix it? i've tried playing with percentages, but it seems to be that the adsense wants to rise higher and my style sheet is making it stay low. maybe i am not making much sense. if anyone has time or is willing to give me some much appreciated advice, please do. thanks!

Aug 5, 2005, 16:34	#23
all4nerds Non-Member Join Date: Jan 2005 Location: Netherlands Posts: 4,300	Helo maybe these treads helps http://www.sitepoint.com/forums/show...irefox+flicker