Forums

ch4sethe5un

Hello,

I am working on a WP theme following the screencast 25, 26, and 27. I pretty much followed them word for word, but i get this weird problem when i start working on the posting area.

I've actually found were the problem is, but can't figure out why it is doing this.

If put a page wrapping div into the starkers WP theme and then put a wrapping div around the "main-col" as the screencast calls it or the posting area, the page wrapping div immediately drops down from the top.

I don't have a live site because i'm working on a local WP install. Just to make things easy, I installed a fresh un-altered starkers WP theme. I did not change anything except for add the two div's.

They are labeled as "PAGE-WRAP" and "POST-WRAP".

I tested it in Chrome, Safari, Flock, FF3, IE7, Opera and it only seems to happen in

Chrome, FF3, and IE7.

The other weird thing is that when i delete these two divs that page does not go back to the top left. It stays put.

Any help would be appreciated.
Thanks in advance,

Ch4sethe5un


?<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" dir=\"ltr\" lang=\"en-US\">

	<head profile=\"http://gmpg.org/xfn/11\">
		
		<title>
			For-Instance		</title>

	    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />
		<meta name=\"description\" content=\"Just another WordPress weblog\" />
			
		<link rel=\"stylesheet\" type=\"text/css\" href=\"http://localhost/wordpress/wp-content/themes/starkers2/style.css\" media=\"screen\" />
		<link rel=\"alternate\" type=\"application/rss+xml\" title=\"For-Instance RSS Feed\" href=\"http://localhost/wordpress/?feed=rss2\" />

		<link rel=\"pingback\" href=\"http://localhost/wordpress/xmlrpc.php\" />

		<meta name='robots' content='noindex,nofollow' />
<link rel=\"EditURI\" type=\"application/rsd+xml\" title=\"RSD\" href=\"http://localhost/wordpress/xmlrpc.php?rsd\" />
<link rel=\"wlwmanifest\" type=\"application/wlwmanifest+xml\" href=\"http://localhost/wordpress/wp-includes/wlwmanifest.xml\" /> 
<meta name=\"generator\" content=\"WordPress 2.6.2\" />


	</head>

	<body>
	<div id=\"PAGE-WRAP\">

		<h1><a href=\"http://localhost/wordpress/\">For-Instance</a></h1>
		<p>Just another WordPress weblog</p>
		<ul>
<li class=\"page_item page-item-2\"><a href=\"http://localhost/wordpress/?page_id=2\" title=\"About\">About</a></li>
		</ul>		
		
		<div id=\"POST-WRAP\">
	
		
			<div class=\"post\" id=\"post-1\">
				<h2><a href=\"http://localhost/wordpress/?p=1\" rel=\"bookmark\" title=\"Permanent Link to Hello world!\">Hello world!</a></h2>

				<p>December 31st, 2008 <!-- by admin --></p>

				<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>

				<p> Posted in <a href=\"http://localhost/wordpress/?cat=1\" title=\"View all posts in Uncategorized\" rel=\"category\">Uncategorized</a> | <a href=\"http://localhost/wordpress/wp-admin/post.php?action=edit&amp;post=1\" title=\"Edit post\">Edit</a> |   <a href=\"http://localhost/wordpress/?p=1#comments\" title=\"Comment on Hello world!\">1 Comment &#187;</a></p>

			</div>

				
		<ul>
			<li></li>
			<li></li>
		</ul>
		
	</div><!--END OF POST-WRAP-->
		<ul>
						<li>

				<form method=\"get\" id=\"searchform\" action=\"http://localhost/wordpress/\">
	<label class=\"hidden\" for=\"s\">Search for:</label>
	<input type=\"text\" value=\"\" name=\"s\" id=\"s\" />
	<input type=\"submit\" id=\"searchsubmit\" value=\"Search\" />
</form>
			</li>

			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
			<li><h2>Author</h2>
			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
			</li>
			-->

			
			<li class=\"pagenav\"><h2>Pages</h2><ul><li class=\"page_item page-item-2\"><a href=\"http://localhost/wordpress/?page_id=2\" title=\"About\">About</a></li>

</ul></li>
			<li><h2>Archives</h2>
				<ul>
					<li><a href='http://localhost/wordpress/?m=200812' title='December 2008'>December 2008</a></li>
				</ul>
			</li>

			<li class=\"categories\"><h2>Categories</h2><ul>	<li class=\"cat-item cat-item-1\"><a href=\"http://localhost/wordpress/?cat=1\" title=\"View all posts filed under Uncategorized\">Uncategorized</a> (1)

</li>
</ul></li>
							<li id=\"linkcat-2\" class=\"linkcat\"><h2>Blogroll</h2>
	<ul class='xoxo blogroll'>
<li><a href=\"http://wordpress.org/development/\">Development Blog</a></li>
<li><a href=\"http://codex.wordpress.org/\">Documentation</a></li>
<li><a href=\"http://wordpress.org/extend/plugins/\">Plugins</a></li>
<li><a href=\"http://wordpress.org/extend/ideas/\">Suggest Ideas</a></li>
<li><a href=\"http://wordpress.org/support/\">Support Forum</a></li>

<li><a href=\"http://wordpress.org/extend/themes/\">Themes</a></li>
<li><a href=\"http://planet.wordpress.org/\">WordPress Planet</a></li>

	</ul>
</li>

				<li>
					<h2>Meta</h2>
					<ul>
						<li><a href=\"http://localhost/wordpress/wp-admin/\">Site Admin</a></li>						<li><a href=\"http://localhost/wordpress/wp-login.php?action=logout\">Log out</a></li>

						<li><a href=\"http://validator.w3.org/check/referer\" title=\"This page validates as XHTML 1.0 Transitional\">Valid <abbr title=\"eXtensible HyperText Markup Language\">XHTML</abbr></a></li>
						<li><a href=\"http://gmpg.org/xfn/\"><abbr title=\"XHTML Friends Network\">XFN</abbr></a></li>
						<li><a href=\"http://wordpress.org/\" title=\"Powered by WordPress, state-of-the-art semantic personal publishing platform.\">WordPress</a></li>
											</ul>
				</li>
			
					</ul>?</div><!--END OF PAGE-WRAP-->		
	<p>For-Instance is proudly powered by <a href=\"http://wordpress.org/\">WordPress 2.6.2</a> | <a href=\"http://localhost/wordpress/?feed=rss2\">Entries (RSS)</a> | <a href=\"http://localhost/wordpress/?feed=comments-rss2\">Comments (RSS)</a>.</p>


	</body>

</html>

Robskiwarrior

is this resolved here?

viewtopic.php?f=2&t=1394

ch4sethe5un

thanks

But i did not have the same error as the other guy. I believe it is a similar symptom.

I've been trying to figure it out all day and i still can't...

thanks again,

Ch4sethe5un

The style sheets are here:


/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */


/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */

ch4sethe5un

so i wanted to see if i could replicate it somewhere else. I think i remember it happening to me in kubricks or the default theme.

I saw the the theme that you made during the screencasts was available for download so i tried to replicate the same 'effect' on the theme. The interesting part was that your theme already had the two divs there.

And i could.

All i had to do was remove the ID tag from the body and remove php that 'included' the socialsidebar. It them dropped it down like the other things that have been happening to me.

I'm starting to wonder, does it have to do with the fact that i'm editing with expression web? I'm only using it as a text editor, nothing more. But saving the files in this enviroment, would that affect it in anyway?

Here is the code to your theme on my local WP install:


?<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" dir=\"ltr\" lang=\"en-US\">

<head profile=\"http://gmpg.org/xfn/11\">
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	
	<title>For-Instance  </title>
	
	<meta name=\"generator\" content=\"WordPress 2.6.2\" /> <!-- leave this for stats -->
	
	<link rel=\"stylesheet\" href=\"http://localhost/wordpress/wp-content/themes/PersonalHomepageTheme/style.css\" type=\"text/css\" media=\"screen\" />
	<!--[if IE 6]>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"http://localhost/wordpress/wp-content/themes/PersonalHomepageTheme/style-ie6.css\" />
	<![endif]-->


	<link rel=\"alternate\" type=\"application/rss+xml\" title=\"For-Instance RSS Feed\" href=\"http://localhost/wordpress/?feed=rss2\" />
	<link rel=\"pingback\" href=\"http://localhost/wordpress/xmlrpc.php\" />
	
	<script src=\"http://css-tricks.com/js/jquery-1.2.6.min.js\" type=\"text/javascript\"></script>
	
	<script type=\"text/javascript\">
		$(function(){
		
			$.getJSON('http://twitter.com/status/user_timeline/chriscoyier.json?count=1&callback=?', function(data){
				$.each(data, function(index, item){
					$('.twitter .inside').append('<div class=\"tweet\"><p>' + item.text + '</p></div>');
				});
			});
			
			$.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?ids=52723107@N00&lang=en-us&format=json&jsoncallback=?\", function(data){
			  $.each(data.items, function(index, item){
				$(\"<img/>\").attr(\"src\", item.media.m).addClass(\"thumb\").appendTo(\".flickr .inside\").wrap(\"<a href='\" + item.link + \"'></a>\").wrap(\"<div class='flickr-thumb' />\");
			  });
			});
			
		});
	</script>

	<meta name='robots' content='noindex,nofollow' />
<link rel=\"EditURI\" type=\"application/rsd+xml\" title=\"RSD\" href=\"http://localhost/wordpress/xmlrpc.php?rsd\" />
<link rel=\"wlwmanifest\" type=\"application/wlwmanifest+xml\" href=\"http://localhost/wordpress/wp-includes/wlwmanifest.xml\" /> 

<meta name=\"generator\" content=\"WordPress 2.6.2\" />

</head>


<body>

	<div id=\"page-wrap\">
			
		<div id=\"top-bar\">

			<h1 id=\"logo\"><a href=\"http://localhost/wordpress/\">For-Instance</a></h1>
		
			<p>Just another WordPress weblog</p>

			
			<form method=\"get\" id=\"searchform\" action=\"http://localhost/wordpress/\">
	<input type=\"text\" value=\"\" name=\"s\" id=\"s\" />
	<input type=\"submit\" id=\"searchsubmit\" value=\"Search\" class=\"button\" />
</form>
		
			<div class=\"clear\"></div>
		</div>
		
		<div id=\"menu-bar\">
				
			<ul id=\"main-nav\">
				<li class=\"home\"><a href=\"/\">Home</a></li>

				<li class=\"about\"><a href=\"/about/\">About</a></li>
				<li class=\"contact\"><a href=\"/contact/\">Contact</a></li>
			</ul>
			
			<ul id=\"extra-nav\">
				<li class=\"portfolio\"><a href=\"/portfolio/\">Portfolio</a></li>
				<li class=\"resume\"><a href=\"/resume/\">Resume</a></li>
			</ul>

			
			<div class=\"clear\"></div>
		
		</div>


<div id=\"main-col\">

	<p id=\"intro-paragraph\">
		<span>Hi.</span> Welcome to the new digs. I was going to put my most recent blog entry right up here, but then I got to thinking that might be <em>confusing</em>. What if I wanted to blog about Sea Monkies one day? People stopping by might think this is just yet-another-site about Sea Monkies. It's not. It's actually about...
	</p>

	
		
			<div class=\"post\" id=\"post-1\">
			
				<div class=\"datebox\">
					<p class=\"day\">31</p>
					<p class=\"month\">Dec</p>
					<p class=\"year\">2008</p>
				</div>
			
				<h2><a href=\"http://localhost/wordpress/?p=1\" rel=\"bookmark\" title=\"Permanent Link to Hello world!\">Hello world!</a></h2>

				
				<p><a href=\"http://localhost/wordpress/?p=1#comments\" title=\"Comment on Hello world!\">1 Comment &#187;</a></p>
				
				<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
				
				
				
			</div>

		
		
</div>

<div id=\"linksidebar\">

	<div class=\"widget\">
		<div class=\"inside\">

			<img src=\"http://localhost/wordpress/wp-content/themes/PersonalHomepageTheme/images/widget-header-csstricks.png\" alt=\"CSS Tricks\" />
			
						
			<ul>
			<li><a href=\"http://feeds.feedburner.com/~r/CssTricks/~3/490560078/\">Site News: iPhone/iPod Stuff</a></li><li><a href=\"http://feeds.feedburner.com/~r/CssTricks/~3/489703390/\">PHP Include from Root</a></li><li><a href=\"http://feeds.feedburner.com/~r/CssTricks/~3/488700909/\">New Screencast: CSS Shorthand</a></li><li><a href=\"http://feeds.feedburner.com/~r/CssTricks/~3/487681524/\">New Site: Quotes on Design</a></li><li><a href=\"http://feeds.feedburner.com/~r/CssTricks/~3/486649329/\">Links of Interest</a></li>			</ul>
		</div>
	</div>
	
	<div class=\"widget flickr\">

		<div class=\"inside\">
			<img src=\"http://localhost/wordpress/wp-content/themes/PersonalHomepageTheme/images/widget-header-myphotos.png\" alt=\"My Photos\" />
			
		</div>
		<div class=\"clear\"></div>
	</div>
	
</div>


		
		<div class=\"clear\"></div>
		
		<div id=\"push\"></div>

		
	</div>
	
	<div id=\"footer\">
		<div id=\"footer-inside\">
		
			<div id=\"footer-1\">
			
				<h4>&copy;2008 Chris Coyier</h4>
				
				<p>This website is powered by WordPress with a theme by CSS-Tricks. There is a video screencast detailing the creation if it, which I will link to soon. I'll also make the theme itself downloadable soon.</p>
			
			</div>
			
			<div id=\"footer-2\">

			
				<h4>Syndication</h4>
		
				<ul>
					<li><a href=\"http://feeds.feedburner.com/ChrisCoyier\">Articles RSS</a></li>
					
					<li><a href=\"http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2175215&amp;loc=en_US\">Subscribe by Email</a></li>
				</ul>
				
			</div>
			
			<div id=\"footer-3\">

			
				<h4>Navigation</h4>
				
				<ul>
					<li><a href=\"/\">Home</a></li>
					<li><a href=\"/\">About</a></li>
					<li><a href=\"/\">Contact</a></li>
					<li><a href=\"/\">Portfolio</a></li>

					<li><a href=\"/\">R&egrave;sume</a></li>
				</ul>
			
			</div>
			
			<div id=\"footer-4\">
			
				<h4>Friends</h4>
				
				<ul>
					<li><a href=\"http://davidwalsh.name\">David Walsh</a></li>

					<li><a href=\"http://jeffcampana.com\">Jeff Campana</a></li>
					<li><a href=\"http://shiftedfrequency.net\">Richard Felix Jr.</a></li>
					<li><a href=\"http://www.myspace.com/chrismcgarry\">Chris McGarry</a></li>
				</ul>
			
			</div>
			
		</div>
	</div>

		
</body>

</html>

ch4sethe5un

hello again,

So i was able to get a live link.

I am just using the bar bones starkers theme and i added the two divs with the IDs called: 'pagewrap' and 'postwrap'. If you look at the top it is pushed down even though it is reset.

http://for-instance.net/

If anyone can help, please do.

It has completely stopped my development of this theme and my site.

Thanks again, in advance.

Ch4sethe5un

treehouse : what would you like to learn today?

Forums

page-wrapping div is dropping down