CSS - Css Issues ( I Know I'm Wrong Just Not Sure Why)

hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated.

here is the CSS
Code:

<style type="text/css">
html, body {padding: 0;
  color: #000; background: #eee;
  font-family: Arial, Veranda, sans-serif;
  margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
  font: bold 200%/1em Arial, Verdana, sans-serif;
  padding: 3em 1em 0; margin: 0 0 0 0;
  border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
  margin: 0; padding: 2.5% 12.5%; clear: left;
  border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
 border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
  font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
  text-decoration: none; font-weight: normal;
  border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;}    /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;}            /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc; 
  border-color: #eee #CCC #eee #ccc;}
</style>

and here is how it is being used in the html
Code:

<h1></h1>

<ul id="nav">
<li><a href="/render/">?</a></li>
<li id="current"><a href="/newmed/">contact us</a></li>
<li><a href="/photos/">about globalhotel</a></li>
<li><a href="/design/">my account</a></li>
<li><a href="/webdev/">hotels</a></li>
</ul>

<div id="main">
<p>
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

</div>

and finally here is a link to the page where i am having probs.

thanks in advanced

RF

I have a DIV which is styled to have a bottom border. Nested inside of this DIV is another DIV, which defaults to display:none, but I'd like to use JavaScript to turn it to display:block.
When this happens, it works fine, but the bottom border for the parent DIV does not encapsulate the nested DIV as I would I assume it should.
Am I totally missing something here, or is this just standard behavior?

Here's the code. There is no other styling.
Code:

<style type="text/css">
	.multiCheck {
		padding:5px;
		margin:10px 0;
		border-top:dotted 2px #CCCCCC;
		border-bottom:dotted 2px #CCCCCC;
	}
		.multiCheck .title {
			padding:5px;
			font-size:1.2em;
			color:#003366;
			font-weight:bold;
		}
		.multiCheck .checkBox {
			margin-left:10px;
		}
</style>
</head>

<body>

	<div class="multiCheck"><div class="title"><input type="checkbox" name="mp_arg2_toggle" onClick="document.getElementById('newsLocations').style.display='block';" value="location"/> Location News:</div>
		<div class="checkBox" id="newsLocations" style="display:none;">

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="27" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="25" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="19" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="99" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="20" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="2" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="1" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="3" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="4" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="26" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>

		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="21" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="5" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="6" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="22" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="7" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="8" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="9" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="10" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="17" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="11" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		</div>
		<div style="float:left; width:150px;">
		<input type="checkbox" name="mp_arg2[]" value="24" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="12" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="23" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="13" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="14" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="15" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>
		<input type="checkbox" name="mp_arg2[]" value="16" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		<input type="checkbox" name="mp_arg2[]" value="18" onClick="populateTitle(this,'mp_arg1');"/> Location<br/>

		</div>
		</div></div>

Thanks in advance,
Colin

if you take a look at this site:

www.plumstead-mosque.co.uk

you will see that the link section (IE) if you hover over it the color doesnt fill the whole section wheras in FF it does.. i was wondering if you could tell me how to fix it?

css: (relevant)
Code:

#menu a {display:block; border-bottom:solid black 1px; font-weight:bold; text-align:left; padding:0em; margin:0em;} 

#menu ul, #menu li{ margin:0em; padding:0em; }

#menu {list-style-type:none; width:100%; float:left; padding:0em; margin:0em; margin-bottom:1.5em;border:1px solid black;}
#menu ul {list-style-type:none;}
#menu li { position:relative;}

This may not belong here. But it's about a CSS file, so I'll explain:


I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue.

Here are my headers:

Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https:/host/page
Cookie: ...........

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
X-Powered-By: PHP/5.1.6
Content-Length: 2613
Connection: close
Content-Type: text/html; charset=UTF-8

It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles.

Other css files work. For example (main.css):
Request:
Host: host
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: https://host/page
Cookie: .....

Response:
Date: Tue, 27 Jul 2010 18:34:59 GMT
Server: Apache/2.2.3 (Red Hat)
Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT
Etag: "136d7c-cba-e36a82c0"
Accept-Ranges: bytes
Content-Length: 3258
Connection: close
Content-Type: text/css


My server is Apache 2.2.3.
I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect.

Any suggestions?

Hello all,

I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page.

HTML:
<html>

<head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<title> The Shore Report </title>
</head>

<body>

<img src="TheShoreReport.jpg" >

<img src="Web Background.jpg" >


</body>

</html>

CSS:
body
{
background-color:#b0c4de;
}

Is there something wrong with my link or what?

Hi

I am using an external stylesheet to try to format some text, but its not working.

This is what is in my stylesheet?

PHP Code:
.small{
font-size: 11px;
font-family: verdana, arial, tahoma;} 





I then used this:

PHP Code:
<span class="small"><font color="#000000">my text</font></span> 





But its not formatting it. Any ideas?

My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time.

goto www.eldore.com

Attached is my css file.

Thanks

My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time.

goto www.eldore.com

Thanks

I'm having issues with the HTML/CSS, only in IE, on the following page: http://www.datamonkeys.co.uk/webmail/webmail/log_in.php

It looks ok in FF....It has something to do with the absolute/relative positioning, i think....

can anyone help me out here? thanks..

Have some problem with my css. Would appreciate some comments on how to do this:

Here is the code: with explanation of what's not working:
It's a small "complete" htm file.....

Code:

<html>
<head>
<style>
.outer  {
	display: block;
	background-color: #bbb;
	border: 0;
	padding: 0;
	text-align: center;
	
	font-family: Arial,sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a  { 
	display: block;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a:hover { 
       text-decoration: underline; color: #fff; 
}
.outer a:hover .text-top  { 
       text-decoration: none; color: #000; 
}
</style>
</head>

<body style="background-color:#888;">

<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>

I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>

NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
&nbsp;&nbsp;In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>

<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
	<tr>
		<td>
			<div class="outer">
				<a href="#">
					<div class="text-top">
						<br>Top text<br><br>
					</div>
					
					<div class="text-img">
						<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
					</div>
					
					<div class="text-bot">
						<br>Bottom text<br><br>
					</div>
				</a>
			</div>
		</td>
	</tr>
</table>
</center>
</body>
</html>

I am trying to acheve a 2 coulumn layout, but I keep getting problems wilt the side-box. I am designing this layout for a system where users can insert content, so I am not sure how much content will be added to the two boxes.

I am trying to show what I want to acheve in a picture-file:

http://www.student.uib.no/~st11920/...out_problem.gif

No matter how I do it I cannot get the surrounding DIV to expand horisontally according to the fixed content DIV's height.

It will gladly expand to the liquid sized one, but the other one wich I have positioned absolute will not affect the surrounding DIV. My guess is that this is the expected result. The HTML is he http://www.student.uib.no/~st11920/...divproblem.html


But my question is how can I do what I want with CSS?

Hello,

I'm confused about how exactly to name classes in a specific situation.
I'm getting unexpected results, and I'm not sure if it's browser support or my code.


Does

.classy a {
something: something;
}

describe all anchors nested in an element with the class "classy"?
Can I do that even?
Or is it the same as

.classy, a {
something: something;
}

To describe two things that both have the same styles.


Do I need comma's or is

.classy .classless {
something: something;
}

the same thing as

.classy, .classless {
something: something;
}


Thanks

Hi I am trying to setup a left border on my tabs here, no matter what combination I try I cannot get a left border exactly like the others without giving the wholebox a full border (dont want this!!) Look at the example below..

Code:

/* TESTING TABBED BROWSERS*/
}
.tabbed-box {
	width: 100%;
	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
	/*border: 1px solid #ddd; 
	border-bottom:none;
	border-left:none;
	border-right:none;}
	*/}
	
.tabbed-box .tabs li {
	list-style: none;
	float: left; }
.tabbed-box .tabs li a {
	display: block;
	width: 100px;
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #888;
	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
	border-left: 1px solid #ddd; }
	.tabbed-box .tabs li a:hover {
	color: #333; }
.tabbed-box .tabs li a:focus {
	outline: none; }
.tabbed-box .tabs li a.active {
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ddd;
	margin-left: 5px;  }
	
	.tabbed-content {
	padding: 3em 1em 1em 1em;
	display: none; }

Screen Shot Here (not aloud to post URLS) --- >freeimagehosting.net/uploads/4e9d9acdf7.jpg

Any help much appreciated!!

I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating.

My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at:

http://www.theatrebayarea.org/v2/
and the css is he
http://www.theatrebayarea.org/v2/css/default.css

It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns?

Thanks,
Daniel

This css looks great in IE, but in netscape, etc. its fubared. the positioning of the #leftcolumn is wayy out in the middle of the page instead of aligned like it should be and the right column is below the left column.

Code:

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Arial', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background: #ccc url(/greydusk/images/bgtile.gif) repeat-y 50% 0;
}

#caption {
	font-style: italic;
	font-weight: bold;
	padding-top: 5px; 
}

#frame {
	width:750px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	text-align:left;
}

#header {
	float: left;
	width: 751px;
	height: 55px;
	background: #ccc url(/greydusk/images/header_back.gif);
}

#leftcolumn {
	float: left;
	width: 505px;
	background:#fff;
	margin-top: 0px;
	margin-left: 2px;
	padding-bottom:20px;
}

#title {
	display: block;
	font-weight: bold;
	font-size: 15px;	
}

#date {
	float: left;
	margin-left: -35px;
	font-weight: normal;
	color: #9C9C9C;
}

#leftcolumn p {
	background:  url(/greydusk/images/marker1.gif) no-repeat top left;
	text-indent: 50px;
	padding-left: 15px;
	padding-right: 10px;
	margin-top: 35px;
}

#rightcolumn {
	float: left;
	width: 235px;
	margin-left: 5px;
} 

#rightcolumn p {
	padding-left: 15px;
	padding-right: 15px;
}

#menu {
	background-color: #000;
	width: 751px;
	font-size: 14px;
	color: #FFF;
}

#menu ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0px;
}

#menu li {
	float: left;
	margin: 0 0 0 0;
	padding-right: 15px;
	padding-top: 4px;
	padding-left: 15px;
	padding-bottom: 7px;
}

#menu li a {
	padding: 0px;
	padding-bottom: 3px;
	margin: 0 px;
	color: #fff;
	text-decoration: none;
}

#menu li a:hover {
	border-bottom: 4px solid #7F88DA;
	color: #7F88DA;
}

and here is the page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>test site</title>
	<script type="text/javascript"></script>
	<style type="text/css" media="all">
		@import "/greydusk/css/greydusk.css";
	</style>
	
</head>

<body onload="window.defaultStatus='test-site';" id="test">

<div id="frame">
	<div id="header">
	<p>&nbsp;</p>
	</div>
	<div id="menu">
		<ul>
			<li><a href="blah.htm">home</a></li>
			<li><a href="blah.htm">news</a></li>
			<li><a href="blah.htm">forums</a></li>
		</ul>
	</div>	
	<div id="leftcolumn">
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
		<p><span id="title">Sample news title, hello there!</span>
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
		<span id="date">March 1, 2004 | <a href="blah.com">Comments</a></span></p>
	</div>

	<div id="rightcolumn">
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
		<p>BLAH BLAH BLAH BLAH</p>
	</div>
</div>

</body>
</html>

thanks in advance! this thing is frustrating me to no end! and i just no it's a simple 1 or 2 lines i need to change. =(