Multiple issues! FF/chrome padding conflict & FF/IE/Chrome div centering conflict!

Hey there.

Not having the best of days! Just remembered to test my CSS in Firefox and IE and have so many errors.

The first is that the main container div is centred in Chrome but then is shifted more to the left in Firefox and Internet Explorer.

This is the CSS for my container:

#container {
	text-align:center;
	width:782px;	
	margin:0 auto;
	min-height:100%;
   	position:relative;
	padding-bottom:200px;
	overflow:auto;
}

Another issue that I have is that I currently have a div for searching the site. This div is called #search-bar . Within this is a form. For the input#search-terms (where the user types their search terms) I have a background image. When I have a padding-top-3px it works perfectly in chrome but then the image sits well below the search text. When I change it to 9 pixels the opposite happens.

Here is my code:

#search-bar {
	clear:left;
	float:right;
	margin:-80px 6px 0 0;
	line-height:32px;
	width:360px;
	display:inline;
	position:relative;
	line-height:32px;
}





	input#search-terms {
		background-image:url(img/searchbar.png);
		background-repeat:no-repeat;
		background-color:#032745;
		border:none;
		width:190px;
		height:30px;
		color:#999999;
		padding-top:9px;
		padding-left:27px;
		margin-right:-18px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		line-height:32px;
		overflow:hidden;


	}

Hope someone can help!

Abi

Hey Ryan,

I didn’t even check the page in IE6 yet, I just made an edit to the post and added IE6 in there. Your right though, I remember having to do them separately in all my inline-block examples now.

The reason I had to do that was because of the broken float model.

Thanks for pointing that out! :slight_smile:

EDIT: Disregard my previous fixes. Good browsers were needing the clear:left with the neg top margin to keep the search bar on top.

Lets’ try this instead - (no chnages needed to the html)

[B]#search-bar[/B] {
    [COLOR=Blue]clear:left[/COLOR];[COLOR=DarkGreen]/*all browsers*/[/COLOR]
    [COLOR=Blue]float:right;[/COLOR]
    margin:[COLOR=Blue]-42px[/COLOR] 6px 0 0;[COLOR=DarkGreen]/*good browsers*/[/COLOR]
    line-height:32px;
    width:360px;
    display:inline;
    position:relative;
    line-height:32px;background:lime
}
[B]* html #search-bar[/B],[COLOR=DarkGreen]/* IE6 */[/COLOR]
[B]*+html #search-bar [/B]{[COLOR=Blue]margin-top:0[/COLOR]}/[COLOR=DarkGreen]* IE7 */[/COLOR]

That should get everyone happy and workable :wink:

If you don’t want the IE6/7 hacks then you will need to absolute position the search bar.

I made an edit to my post above, look back at it and I will work on that new problem too.

If you are running vista it should be IE8, you may be in compatibility mode though.

In your top menu click on Tools > Compatibility View Settings > then uncheck them all. You don’t want to be viewing in Compatibility Mode.

My only issue now seems to be with IE. Now I’ve made all the changes, the #why-join div floats to the top of the container, even though I have cleared all of the other floats. Can you think of why this might be? Very strange!
Remove the float and clear from the #introSlides and just let it be a static block. That will get IE7 sorted out.

#introSlides {
[COLOR=Red]    /*clear:both;*/
    /*float:left;*/[/COLOR]
    background:lime url(img/slidebg.png);
    background-repeat:no-repeat;
    height:285px;
    width:782px;
    position:relative;
    top:20px;
    
}

I see you set clear:both on your container div now. That is causing it to clear that right floated <div id=“date”>. If you are going to clear it then you should go ahead and set the overflow property back on the #container div for float containment.

Since there is only a few characters for the date in that #date div you could set the height to 0 and just let the text hang out of it. You have it set at 10px right now and the text is hanging out anyways since it is 12px font. I would also set the left and bottom margins to 0 on it as well.

[B]#container[/B] {
    [COLOR=Blue]clear:both;[/COLOR][COLOR=DarkGreen]/*clear the #date div*/[/COLOR]
    text-align:center;
    [COLOR=Blue]width:782px;  [/COLOR]  
    margin:0 auto;
    min-height:700px;
    position:relative;
    padding-bottom:200px;
    [COLOR=Red]/*padding-top:1px; not needed with overflow*/[/COLOR]
    background:#CDF;
    [COLOR=Blue]overflow:hidden;[/COLOR][COLOR=DarkGreen]/*contain floats*/[/COLOR]
}

#admin-bar-logo {
    display:none;
}

img.logo {
    border:none;
}

[B]#date [/B]{
    [COLOR=Red]/*clear:both;*/[/COLOR]
    float:right;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    [COLOR=Red]/*height:10px;*/[/COLOR]
   [COLOR=Blue] height:0;[/COLOR][COLOR=DarkGreen]/*let text hang out (except IE6)*/[/COLOR]
    color:#888888;
    [COLOR=Blue]margin:8px 10px 0 0;[/COLOR]
}

Another issue is that I want the container width to be the same as the #introSlides width. So 782px. However, when I change the width from 800 to 782 it screws up in IE and displays a very ugly scrollbar !
Actually all browsers were dropping the right floated #why-join div when the container width is reduced to 782px. It is because of the right margin on that float. IE would need that right float to come first in the html source though. I set the width to 782px above.

The easiest way to fix this is to float the #why-join div left and remove the right margin. If you want some space then reduce the width of that div. You can set a left padding on it to get around an IE6 margin bug.


[B]#why-join[/B] {
    background:orange url(img/whyjoin-bg.png);
    background-repeat:no-repeat;
    width:303px;
    height:242px;
    [COLOR=Blue]float:left;[/COLOR]
    [COLOR=Blue]padding-left:2px;[/COLOR]
    margin-top:45px;
    [COLOR=Red]/*margin-right:18px;*/[/COLOR]
    text-align:left;
}

That should get you squared away. If you have any more issues just post the relevant code now. It is very hard for me to work with your code since it is not online and I don’t have any images. I was having to set BG colors everywhere to see what is going on. Plus I have to run your html through Tidy to get it where I can even see what’s what. It is very inconvenient.

Anyhow, I hope that gets you working as intended now :slight_smile:

Erm. I don’t actually know, it’s just the one that came with vista?

Hi,
I’ve still got the files I was testing with so let me look through them again while this is still fresh on my mind.

When you say “IE” which version are you referring to, 7 or 8?

I just noticed the search bar is missing in IE7 also. That is because of the neg top margin on it and overflow:hidden on the header, along with an IE float bug. The right floated search bar needs to come first in the html for IE7.

Okay, did all the things you suggested. It’s all fine, but the #introSlides just seems to stick out a bit to the right a bit in IE. Weird.

When I add ‘float:left’ to the div it does the same thing with the #why-join div again.

I’m going to be uploading all of this to my site tonight so you’ll be able to see it online!

Thanks again for all of your help. Lifesaver.

Abi

Ray, you can’t combine IE6 and IE7 hacks AFAIK, so make them seperate statements :slight_smile:

Hi,
It will be later this afternoon before I can look at it again. Hang in there and we will get it straightened out. Someone else may step in and help out with it.

I’ll check back :slight_smile:

Thank you SO SO MUCH for all of your help! A lot of what you advised fixed my issues. I have it almost looking the same in every browser.

My only issue now seems to be with IE. Now I’ve made all the changes, the #why-join div floats to the top of the container, even though I have cleared all of the other floats. Can you think of why this might be? Very strange!

Another issue is that I want the container width to be the same as the #introSlides width. So 782px. However, when I change the width from 800 to 782 it screws up in IE and displays a very ugly scrollbar !

Here’s the latest source code:

 
<!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>teen cancer circle &#124; Home</title> 
 
		
		<meta name="generator" content="WordPress 2.9.2" /> <!-- leave this for stats --> 
 
		<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/TCC/style.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/TCC/slideshow/slideshow.css" /> 
        <script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Library/jQuery/jQuery.js?hFileLastModified=1269279446"></script> 
		<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Slideshow/Slideshow.js" charset="utf-8"></script> 
        
        <script type="text/javascript" src="http://use.typekit.com/lhl5gla.js"></script> 
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
 
					<link rel="alternate" type="application/rss+xml" title="teen cancer circle | Site Wide Activity RSS Feed" href="http://localhost/wordpress/activity/feed/" /> 
		
		
		
		<link rel="alternate" type="application/rss+xml" title="teen cancer circle Blog Posts RSS Feed" href="http://localhost/wordpress/feed/" /> 
		<link rel="alternate" type="application/atom+xml" title="teen cancer circle Blog Posts Atom Feed" href="http://localhost/wordpress/feed/atom/" /> 
 
		<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> 
 
		
 
	</head> 
 
	<body class="home-page logged-in home page page-id-10 page-template page-template-homepage-php" id="bp-default"> 
		
        	<div id="my-login-bar"><img class="logoutimage" src="http://localhost/wordpress/wp-content/themes/TCC/img/icon-logout.png" alt="Log Out Icon" /><a class="loggingout" href="http://localhost/wordpress/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Flocalhost%2Fwordpress&amp;_wpnonce=3658590464">log out</a></div> 
 
 
<link rel="alternate" type="application/rss+xml" title="teen cancer circle &raquo; Home Comments Feed" href="http://localhost/wordpress/feed/" /> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js?ver=2.9.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script> 
<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" /> 
<link rel='index' title='teen cancer circle' href='http://localhost/wordpress' /> 
<meta name="generator" content="WordPress 2.9.2" /> 
<link rel='canonical' href='http://localhost/wordpress' /> 
<script type="text/javascript">var ajaxurl = "http://localhost/wordpress/wp-load.php";</script> 
	<script type="text/javascript"> jQuery(document).ready( function() { jQuery("a.confirm").click( function() { if ( confirm( 'Are you sure?' ) ) return true; else return false; }); });</script> 
        
		
		<div id="toppanel"> 
        
        	<a href="http://localhost/wordpress"><img class="logo" src="http://localhost/wordpress/wp-content/themes/TCC/img/logo-small.png" alt="Teen Cancer Circle" /></a> 
            
        </div> 
        
		<div id="header"> 
			
            <div id="navi"> 
			<ul id="nav"> 
            	<li class="nav-font">Dashboard</li> 
				<li class="selected"> 
					<a href="http://localhost/wordpress" title="Home">Home</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/activity/" title="Activity">Activity</a> 
					</li> 
				
				<li> 
					<a href="http://localhost/wordpress/members/" title="Members">Members</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/groups/" title="Groups">Groups</a> 
					</li> 
 
											<li> 
							<a href="http://localhost/wordpress/forums/" title="Forums">Forums</a> 
						</li> 
									
				
				
							</ul><!-- #nav --> 
            </div><!-- #navi --> 
 
			<div id="search-bar"> 
				<div class="padder"> 
                                        <form action="http://localhost/wordpress/search" method="post" id="search-form"> 
                            <input type="text" id="search-terms" name="search-terms" value="search" /> 
                            <select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option></select>                            <input type="submit" name="search-submit" id="search-submit" value="Search" /> 
                            <input type="hidden" id="_wpnonce" name="_wpnonce" value="56848e554c" /><input type="hidden" name="_wp_http_referer" value="/wordpress/" />                        </form><!-- #search-form --> 
                                           
				</div><!-- .padder --> 
			</div><!-- #search-bar --> 
 
			
		
        </div><!-- #header --> 
        
        <div id="date"> 
        	19th May, 2010        
        </div><!-- #date --> 
       
 
				        
         
 
		<div id="container"> 
        
       
	<div id="intro"> 
    <img src="http://localhost/wordpress/wp-content/themes/TCC/img/tcc.png" alt="The Teen Cancer Circle - Share your experience with others"> 
      
    </div><!-- #intro --> 
    
    
    <div id="introSlides"> 
    	<div id="introSlide-1" class="introSlide"> 
            <div class="introSlideCopy"> 
            	<p><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/express.png" alt="Express Yourself" /></p> 
                <p> 
               	Discover a new way to vent the issues you face every day.  At the 
                Teen Cancer Circle you can document your cancer experience in a 
                safe environment.  Once you sign up you’ll have your own diary page 
                and be able to fully express yourself during a time when it’s 
                not always possible.
                </p> 
                <p><br /> 
                <a href="http://localhost/wordpress/register/"><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/signup-btn.png" alt="Sign Up" /></p></a> 
            </div> 
            <div class="slideimage"> 
            	<img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/slide-1.png" alt="Happy Face" /> 
            </div> 
        </div><!-- #introSlide-1 --> 
    
        <div id="introSlide-2" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Testing
                </p> 
            </div> 
           	
        </div><!-- #introSlide-2 --> 
        
        <div id="introSlide-3" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Anything
                </p> 
            </div> 
             
        </div><!-- #introSlide-3 --> 
        
    	<div id="introSlide-4" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                
                </p> 
            </div> 
             
        </div><!-- #introSlide-4 --> 
        
        
        <div id='introSlideshowControls'> 
          <div class='introSlideshowControl' id='introSlideshowControl-4'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-3'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-2'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-1'><span></span></div> 
        </div><!-- #introSlideshowControls --> 
    
    
    
    
    
    
    </div><!-- #introSlides --> 
    
    
    <div id="latest-act"> 
    	<h2>Latest Activity</h2> 
        
                	<div class="pagination"> 
				<div class="pagination-links"></div> 
            </div> 
            
            <ul id="activity-stream" class="activity-list item-list"> 
            
                        
            	<li class="groups new_forum_topic" id="activity-3"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> started the forum topic <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/">Gotta test this shiz</a> in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day, 15 hours ago</span> &middot; <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/3?_wpnonce=299e343432" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Everything</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                          
            	<li class="groups activity_update" id="activity-2"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> posted an update in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day, 15 hours ago</span> &middot; <a href="http://localhost/wordpress/activity/p/2/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/2?_wpnonce=299e343432" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Just a little about testing</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                            
              </ul> 
              
       	        
        
        <div class="more"> 
        <a href="http://localhost/wordpress/activity/" title="Activity">See more</a> 
        </div>     
            
    </div><!-- #latest-act --> 
    
    
    <div id="why-join"> 
    	<h2>Why Join</h2> 
        <p>If you’re a young person with, or has just had, cancer, this site may be useful to you. <a href="">Click here</a> to find out more and sign up.</p> 
        <p>If you have a family member or friend with cancer and you wish to follow their journal or invite them to join, <a href="">Click here.</a></p> 
    </div><!-- #why-join --> 
    
    
    
    
    
    
   
 
		<div class="clearfooter"></div> 
        </div> <!-- #container --> 
 
				
		<div id="footer"> 
	    	
            <div id="trees1"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree1.png" alt="Trees 1" /> 
            </div><!-- #trees1 --> 
            
            
            <div id="footernav"> 
            	
                <div id="footernav-lhs"> 
                	<h2>The site</h2> 
                    <ul class="footer-nav"> 
                    	<li><a href="http://localhost/wordpress/register/">Join</a></li> 
                        <li class="page_item page-item-14"><a href="http://localhost/wordpress/help/" title="Help">Help</a></li> 
<li class="page_item page-item-19"><a href="http://localhost/wordpress/faq-2/" title="FAQ">FAQ</a></li> 
                    </ul> 
                </div> 
                
                <div id="footernav-rhs"> 
                	<h2>Behind the site</h2> 
                    <ul class="footer-nav"> 
                    	<li class="page_item page-item-2"><a href="http://localhost/wordpress/about/" title="About">About</a></li> 
<li class="page_item page-item-20"><a href="http://localhost/wordpress/terms/" title="Terms">Terms</a></li> 
<li class="page_item page-item-16"><a href="http://localhost/wordpress/faq/" title="Contact us">Contact us</a></li> 
                    </ul> 
                </div> 
            
            
            
            </div><!-- #footernav --> 
            
            
            <div id="trees2"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree2.png" alt="Trees 2" /> 
            </div><!-- #trees2 --> 
            
            
 
			
		</div><!-- #footer --> 
        
        
    
		
		
<!-- Generated in 0.881 seconds. --> 
 
	<script type="text/javascript"> 
	var bp_terms_my_favs = 'My Favorites';
	var bp_terms_accepted = 'Accepted';
	var bp_terms_rejected = 'Rejected';
	var bp_terms_show_all_comments = 'Show all comments for this thread';
	var bp_terms_show_all = 'Show all';
	var bp_terms_comments = 'comments';
	var bp_terms_close = 'Close';
	var bp_terms_mention_explain = '@ is a unique identifier for admin that you can type into any message on this site. admin will be sent a notification and a link to your message any time you use it.';
	</script> 
        
   
 
	</body> 
 
</html>

And the latest CSS:

/*
Theme Name: BP tester
Theme URI: http://www.teencancercircle.com/
Description: Testing theme for BuddyPress.
Version: 1.0
Author: Abi Golestanian
Author URI: http://www.abigolestanian.com
Template: bp-default
Tags: buddypress, social-networking
*/







* { 
	margin-bottom:0; 
	padding-bottom:0; }

/* > body
--------------------------------------------------------------  */

html, body {
	background-color:#eceade;
	margin: 0 auto;
	padding-top: 0 !important; /* Remove the top padding space for the admin bar in this theme */

}



/* > general header css values
--------------------------------------------------------------  */

#header {
	position:relative;
}


#toppanel {
	height:38px;
	width:100%;
	background-color:#272727;
}
	
#container {
	clear:both;
	text-align:center;
	width:800px;	
	margin:0 auto;
	min-height:700px;
   	position:relative;
	padding-bottom:200px;
	padding-top:1px;	
}

#admin-bar-logo {
	display:none;
}

img.logo {
	border:none;
}

#date {
	clear:both;
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	height:10px;
	color:#888888;
	margin:8px 10px;
}

a img {
	outline:none;
	border:none;
}



/* > login
--------------------------------------------------------------  */

#my-login-bar {
	position: absolute;
	top: 6px;
	right: 5px;
	color:#777777;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	width:650px;
	text-align:right;
	margin-right:7px;
}


#my-login-bar form {
	display:inline;
}

input#new-user-login, input#new-user-pass {
	height:14px;
	margin:3px 10px 0 6px;
	width:110px;
	background-color:#eceade;
	
}

.input2#new-user-pass {
	 margin-top:5px;
}


#new-wp-submit {
	margin:0 8px 0 8px;
	padding: 2px 4px 2px 5px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#my-login-bar a, #my-login-bar a:visited {
	text-decoration:none;
	color:#777777;
}

#my-login-bar a:hover {
	text-decoration:underline;
}


.loggingout {
	vertical-align:middle;
	padding-top:3px;
	line-height:18px;
}
	a.loggingout, a:visited.loggingout {
		text-decoration:none;
		
	}

		a:hover.loggingout {
			text-decoration:underline;
		}
		
			.logoutimage {
				width:18px;
				height:18px;
				vertical-align:middle;
				padding-right:3px;
				margin-top:2px;
			}
			
input[type=text] {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}






/* > navigation
--------------------------------------------------------------  */


#header {
	width:100%;
	background-color:#032745;
	height:42px;
	margin-top: 0;
	padding: 0;
	overflow:hidden;
}

#navi {
	width:700px;
	float:left;
}

ul#nav {
	list-style:none;
	display:block;
	font-family:Trebuchet MS, helvetica !important;
	margin:0; padding:0;
	overflow: hidden;	
}

	ul#nav li {
		float: left;
		width: auto;
		height:42px;
	}
		ul#nav li a {			
			text-decoration:none;
			font-size:16px;
			color:#cccccc;
			font-family:Trebuchet MS, helvetica !important;
			display: block;
			text-align: center;
			height:42px;
			line-height: 42px;
			padding: 0 15px 0 15px;
		}
		
			ul#nav li.selected, ul#nav li.current_page_item {
			background-image:url(img/tab-widen.png);
				background-repeat:no-repeat;
				background-position:0 0;
			}
			
			ul#nav li.selected a, ul#nav li.current_page_item a {
				background-image:url(img/tab-new.png);
				background-repeat:no-repeat;
				background-position:right top;
			}
			
				ul#nav li.nav-font {
					font-family: helvetica !important;
					color:#848383;
					font-weight:900;
					padding:1px 20px 0 0;
					margin-left:10px;
					line-height: 42px;
				}
					ul#nav li a:hover {
						color:#acacac;
					}
			

#search-bar {
	clear:left;
	float:right;
	margin:-40px 6px 0 0;
	line-height:32px;
	width:360px;
	display:inline;
	position:relative;
	line-height:32px;
}





	input#search-terms {
		background-image:url(img/searchbar.png);
		background-repeat:no-repeat;
		background-color:#032745;
		border:none;
		width:190px;
		height:30px;
		color:#999999;
		padding-top:2px;
		padding-left:27px;
		margin-right:-18px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		line-height:32px;
		overflow:hidden;


	}
	
		*:focus {outline: none;}
		
		



/* > homepage
--------------------------------------------------------------  */

#intro {
	float:left;
	margin-top:20px;
	clear:both;
}





#latest-act {
	clear:both;
	float:left;
	margin-top:45px;
	background-image:url(img/forum-bg.png);
	background-repeat:no-repeat;
	width:463px;
	height:241px;
	text-align:left;
	padding-left:14px;
	overflow:hidden;
	color:#4e4e4e;
	font-family:arial, sans-serif;
	font-size:13px;
}

	#latest-act h2 {
		font-family:Trebuchet MS, Georgia, "Times New Roman", Times, serif;
		font-size:21px;
		color:#464646;
		margin-top:12px;
	}

		ul#activity-stream {
			list-style:none;
			display:block;
			padding:0;
			margin-left:0px;
			margin-top:25px;
			width:440px;
		}
		
			ul#activity-stream a, ul#activity-stream a:visited {
				color:#a09f9c;
				text-decoration:none;
			}
			
				ul#activity-stream a:hover {
					text-decoration:underline;
				}
				
					#latest-act .activity-inner {
						margin:-15px 0 12px 14px;
						padding-top:9px;
						color:#032745;
					}
						
	#latest-act .more {
		text-align:right;
		margin-right:40px;
		margin-top:-5px;
		text-transform:uppercase;
		font-family:Trebuchet MS, helvetica;
		font-size:17px;
		
	}
	
		#latest-act .more a, #latest-act .more a:visited {
			text-decoration:none;
			color:#464646;
		}
		
			#latest-act .more a:hover {
				text-decoration:underline;
			}





#why-join {
	background-image:url(img/whyjoin-bg.png);
	background-repeat:no-repeat;
	width:303px;
	height:242px;
	float:right;
	margin-top:45px;
	margin-right:18px;
	text-align:left;
}

	#why-join h2 {
		font-family:Trebuchet MS, Georgia, "Times New Roman", Times, serif;
		font-size:21px;
		color:#464646;
		margin-top:12px;
		margin-left:15px;
	}
		
		#why-join p {
			color:#4e4e4e;
			font-family:arial, sans-serif;
			font-size:13px;
			margin-left:14px;
			width:270px;
			margin-top:25px;
		}
		
			#why-join a, #why-join a:visited {
				text-decoration:none;
				color:#a09f9c;
			}
			
				#why-join a:hover {
					text-decoration:underline;
				}





#sidebar {
	clear:both;
	float:left;
	margin-bottom:20px;
}



/* > footer
--------------------------------------------------------------  */


.clearfooter {
	height:200px;
	clear:both;
}


#footer {
	clear:both;
	width:100%;
	background-color:#1a1a1a;
	height:200px;
	background-image:url(img/footer.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	position:relative;
	margin-top:-200px;
	margin-bottom:0;
	display:block;

}

	#trees1 {
		float:left;
		margin:-100px 5px;
		width:243px;
		height:180px;
	}
		
		#trees2 {
			float:right;
			margin:-300px 8px;
			width:222px;
			height:188px;
			clear:right;
		}

#footernav {
	width:450px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
}

	#footernav-lhs {
		width:225px;
		height:200px;
		float:left;
	}
	
		#footernav-rhs {
			width:225px;
			height:200px;
			float:right;
		}
		
			#footernav-lhs h2, #footernav-rhs h2 {
				color:#eae9e9;
				font-family:'Terfens', Trebuchet MS;
				font-size:30px;
				margin-top:16px;
			}
			
ul.footer-nav {
	list-style:none;
	display:block;
	padding:0;
	text-align:left;
	margin-top:7px;
	margin-left:0px;
}
		

	ul.footer-nav li a, ul.footer-nav li a:visited {
		color:#6e6e6e;
		text-decoration:none;
		font-family:Arial, Helvetica, sans-serif;
		font-size:17px;
		
	}		
		
		ul.footer-nav li a:hover {
			text-decoration:underline;
		}


And lastly, here is the CSS for the introslides - it’s kept in a different folder:


#introSlides {
	clear:both;
	float:left;
	background-image:url(img/slidebg.png);
	background-repeat:no-repeat;
	height:285px;
	width:782px;
	position:relative;
	top:20px;
	
}

.introSlide {
    margin-top:10px;
	margin-left:5px;
	padding:0;
    width: 782px;
    height: 282px;
    display: none;
	
}



#introSlideshowControls {
	position: absolute;
    bottom:15px;
    right: 11px;
    width: 175px
}

.introSlideshowControl {
    float: right;
    margin: 0 5px 0 0;
	background-color:#9c9c9c;
    width: 11px;
    height: 11px;
    cursor: pointer;
}

	.introSlideshowControl span {
		line-height: 11px;
		vertical-align: middle;
	}
	
		.introSlideshowControlActive {
			background-color:#032745;
		}
		
			.introSlideshowControlOn {
				background-image: url(img/buttonHover.png) no-repeat;
			}
		
		
.introSlideCopy {
    position: absolute;
    left: 15px;
    width: 500px;
	font-family:arial, sans-serif;
	color:#4e4e4e;
	text-align:left;
}		
		
			
introSlideshow h4 {
    color: #b90f23;
    text-transform: uppercase;
    font: 14px Arial, sans-serif;
    margin: 10px 0;
}
introSlideCopy p {
    font: 11px Arial, sans-serif;
    line-height: 1.75em;
}


.slideimage {
	float:right;
	margin-right:5px;
}



Hope you can help! Thank you!!!
Abi

The first is that the main container div is centred in Chrome but then is shifted more to the left in Firefox and Internet Explorer.

Hi,
We would need the html that goes with that css in order to view it in a browser. We would prefer a link to your page if you have one.

How much is FF and IE shifted? 1px or something larger like 16px.

What is the relative position on the #container for? Are there some AP children that need a containing block?

Sorry, I left out a keyword in that statement. What I meant to say was “you have a div” in the head of your page.

<div id=“my-login-bar”> needs to be moved into the body element.

WP themes are always a pain to troubleshoot, I will see if I can strip it down and find the root of the problem/s.

Okay, here’s the problem with the floated <div id=“date”> along with auto margins and overflow on the #container. The overflow property prevents anything from sliding under a float (as it should) and the auto margins are taking the <div id=“date”> width into account and then centering the container in the space left.

It seems that Chrome is getting this wrong!

To fix this problem either absolute position the <div id=“date”> or remove the overflow from #container.

[B]#container[/B] {
    text-align:center;
    width:782px;    
    [COLOR=Blue]margin:0 auto;[/COLOR]
    min-height:100&#37;;
    position:relative;
    padding-bottom:200px;
    [COLOR=Red]/*overflow:auto; */[/COLOR]
    [COLOR=Blue]padding-top:1px;[/COLOR] [COLOR=DarkGreen]/*child margin clearance*/ [/COLOR]
    [COLOR=Blue]background:red;[/COLOR][COLOR=DarkGreen]/*testing auto margins*/[/COLOR]
}

I would probably just AP that #date div so I could keep the overflow property on the #container for float containment. If the container div gets a BG color or image then you will need to contain it’s floats in order for the BG to extend.

Fixed a few of those bugs, but some of them can’t be altered because I’m using PHP to output the URL’s.

I’ve made the CSS fully transitional now. No bugs there!

Here is the updated HTML source code:

 
<!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>teen cancer circle &#124; Home</title> 
 
		
		<meta name="generator" content="WordPress 2.9.2" /> <!-- leave this for stats --> 
 
		<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/TCC/style.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/TCC/slideshow/slideshow.css" /> 
        <script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Library/jQuery/jQuery.js?hFileLastModified=1269279446"></script> 
		<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Slideshow/Slideshow.js" charset="utf-8"></script> 
        
        <script type="text/javascript" src="http://use.typekit.com/lhl5gla.js"></script> 
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
 
					<link rel="alternate" type="application/rss+xml" title="teen cancer circle | Site Wide Activity RSS Feed" href="http://localhost/wordpress/activity/feed/" /> 
		
		
		
		<link rel="alternate" type="application/rss+xml" title="teen cancer circle Blog Posts RSS Feed" href="http://localhost/wordpress/feed/" /> 
		<link rel="alternate" type="application/atom+xml" title="teen cancer circle Blog Posts Atom Feed" href="http://localhost/wordpress/feed/atom/" /> 
 
		<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> 
 
			<div id="my-login-bar"><img class="logoutimage" src="http://localhost/wordpress/wp-content/themes/TCC/img/icon-logout.png" alt="Log Out Icon" /><a class="loggingout" href="http://localhost/wordpress/wp-login.php?action=logout&amp;redirect_to=http&#37;3A%2F%2Flocalhost%2Fwordpress&amp;_wpnonce=e4a7c0983b">log out</a></div> 
 
 
<link rel="alternate" type="application/rss+xml" title="teen cancer circle &raquo; Home Comments Feed" href="http://localhost/wordpress/feed/" /> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js?ver=2.9.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script> 
<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" /> 
<link rel='index' title='teen cancer circle' href='http://localhost/wordpress' /> 
<meta name="generator" content="WordPress 2.9.2" /> 
<link rel='canonical' href='http://localhost/wordpress' /> 
<script type="text/javascript">var ajaxurl = "http://localhost/wordpress/wp-load.php";</script> 
	<script type="text/javascript"> jQuery(document).ready( function() { jQuery("a.confirm").click( function() { if ( confirm( 'Are you sure?' ) ) return true; else return false; }); });</script> 
 
	</head> 
 
	<body class="home-page logged-in home page page-id-10 page-template page-template-homepage-php" id="bp-default"> 
		
        
        
		
		<div id="toppanel"> 
        
        	<a href="http://localhost/wordpress"><img class="logo" src="http://localhost/wordpress/wp-content/themes/TCC/img/logo-small.png" alt="Teen Cancer Circle" /></a> 
            
        </div> 
        
		<div id="header"> 
			
            <div id="navi"> 
			<ul id="nav"> 
            	<li class="nav-font">Dashboard</li> 
				<li class="selected"> 
					<a href="http://localhost/wordpress" title="Home">Home</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/activity/" title="Activity">Activity</a> 
					</li> 
				
				<li> 
					<a href="http://localhost/wordpress/members/" title="Members">Members</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/groups/" title="Groups">Groups</a> 
					</li> 
 
											<li> 
							<a href="http://localhost/wordpress/forums/" title="Forums">Forums</a> 
						</li> 
									
				
				
							</ul><!-- #nav --> 
            </div><!-- #navi --> 
 
			<div id="search-bar"> 
				<div class="padder"> 
                                        <form action="http://localhost/wordpress/search" method="post" id="search-form"> 
                            <input type="text" id="search-terms" name="search-terms" value="search" /> 
                            <select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option></select>                            <input type="submit" name="search-submit" id="search-submit" value="Search" /> 
                            <input type="hidden" id="_wpnonce" name="_wpnonce" value="c5fff6f309" /><input type="hidden" name="_wp_http_referer" value="/wordpress/" />                        </form><!-- #search-form --> 
                                           
				</div><!-- .padder --> 
			</div><!-- #search-bar --> 
 
			
		
        </div><!-- #header --> 
        
        <div id="date"> 
        	19th May, 2010        
        </div><!-- #date --> 
       
 
				        
         
 
		<div id="container"> 
        
       
	<div id="intro"> 
    <img src="http://localhost/wordpress/wp-content/themes/TCC/img/tcc.png" alt="The Teen Cancer Circle - Share your experience with others"> 
      
    </div><!-- #intro --> 
    
    
    <div id="introSlides"> 
    	<div id="introSlide-1" class="introSlide"> 
            <div class="introSlideCopy"> 
            	<p><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/express.png" alt="Express Yourself" /></p> 
                <p> 
               	Discover a new way to vent the issues you face every day.  At the 
                Teen Cancer Circle you can document your cancer experience in a 
                safe environment.  Once you sign up you&#8217;ll have your own diary page 
                and be able to fully express yourself during a time when it&#8217;s 
                not always possible.
                </p> 
                <p><br /> 
                <a href="http://localhost/wordpress/register/"><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/signup-btn.png" alt="Sign Up" /></p></a> 
            </div> 
            <div class="slideimage"> 
            	<img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/slide-1.png" alt="Happy Face" /> 
            </div> 
        </div><!-- #introSlide-1 --> 
    
        <div id="introSlide-2" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Testing
                </p> 
            </div> 
           	
        </div><!-- #introSlide-2 --> 
        
        <div id="introSlide-3" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Anything
                </p> 
            </div> 
             
        </div><!-- #introSlide-3 --> 
        
    	<div id="introSlide-4" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                
                </p> 
            </div> 
             
        </div><!-- #introSlide-4 --> 
        
        
        <div id='introSlideshowControls'> 
          <div class='introSlideshowControl' id='introSlideshowControl-4'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-3'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-2'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-1'><span></span></div> 
        </div><!-- #introSlideshowControls --> 
    
    
    
    
    
    
    </div><!-- #introSlides --> 
    
    
    <div id="latest-act"> 
    	<h2>Latest Activity</h2> 
        
                	<div class="pagination"> 
				<div class="pagination-links"></div> 
            </div> 
            
            <ul id="activity-stream" class="activity-list item-list"> 
            
                        
            	<li class="groups new_forum_topic" id="activity-3"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> started the forum topic <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/">Gotta test this shiz</a> in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day, 2 hours ago</span> &middot; <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/3?_wpnonce=1d0ee8c06c" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Everything</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                          
            	<li class="groups activity_update" id="activity-2"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> posted an update in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day, 2 hours ago</span> &middot; <a href="http://localhost/wordpress/activity/p/2/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/2?_wpnonce=1d0ee8c06c" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Just a little about testing</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                            
              </ul> 
              
       	        
        
        <div class="more"> 
        <a href="http://localhost/wordpress/activity/" title="Activity">See more</a> 
        </div>     
            
    </div><!-- #latest-act --> 
    
    
    <div id="why-join"> 
    	<h2>Why Join</h2> 
        <p>If you&#8217;re a young person with, or has just had, cancer, this site may be useful to you. <a href="">Click here</a> to find out more and sign up.</p> 
        <p>If you have a family member or friend with cancer and you wish to follow their journal or invite them to join, <a href="">Click here.</a></p> 
    </div><!-- #why-join --> 
    
    
    
    
    
    
   
 
		<div class="clearfooter"></div> 
        </div> <!-- #container --> 
 
				
		<div id="footer"> 
	    	
            <div id="trees1"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree1.png" alt="Trees 1" /> 
            </div><!-- #trees1 --> 
            
            
            <div id="footernav"> 
            	
                <div id="footernav-lhs"> 
                	<h2>The site</h2> 
                    <ul class="footer-nav"> 
                    	<li><a href="http://localhost/wordpress/register/">Join</a></li> 
                        <li class="page_item page-item-14"><a href="http://localhost/wordpress/help/" title="Help">Help</a></li> 
<li class="page_item page-item-19"><a href="http://localhost/wordpress/faq-2/" title="FAQ">FAQ</a></li> 
                    </ul> 
                </div> 
                
                <div id="footernav-rhs"> 
                	<h2>Behind the site</h2> 
                    <ul class="footer-nav"> 
                    	<li class="page_item page-item-2"><a href="http://localhost/wordpress/about/" title="About">About</a></li> 
<li class="page_item page-item-20"><a href="http://localhost/wordpress/terms/" title="Terms">Terms</a></li> 
<li class="page_item page-item-16"><a href="http://localhost/wordpress/faq/" title="Contact us">Contact us</a></li> 
                    </ul> 
                </div> 
            
            
            
            </div><!-- #footernav --> 
            
            
            <div id="trees2"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree2.png" alt="Trees 2" /> 
            </div><!-- #trees2 --> 
            
            
 
			
		</div><!-- #footer --> 
        
        
    
		
		
<!-- Generated in 0.717 seconds. --> 
 
	<script type="text/javascript"> 
	var bp_terms_my_favs = 'My Favorites';
	var bp_terms_accepted = 'Accepted';
	var bp_terms_rejected = 'Rejected';
	var bp_terms_show_all_comments = 'Show all comments for this thread';
	var bp_terms_show_all = 'Show all';
	var bp_terms_comments = 'comments';
	var bp_terms_close = 'Close';
	var bp_terms_mention_explain = '@ is a unique identifier for admin that you can type into any message on this site. admin will be sent a notification and a link to your message any time you use it.';
	</script> 
        
   
 
	</body> 
 
</html>

Hope you can help.

Thanks,
Abi

The first is that the main container div is centred in Chrome but then is shifted more to the left in Firefox and Internet Explorer.
That is being caused by the floated <div id=“date”>

It should not be causing problems though since it is before the #container in the html source. The problem may be related to something else but when I cut that <div id=“date”> out of the html or if I absolute position it then the container will center up in FF.

I also have another issue with IE. It is currently displayed as this: Dashboard Link
That was because the default paddings were not removed on the ul#nav and the dashboard link had a negative margin on it along with overflow:hidden on the ul#nav.


[B]ul#nav[/B] {
    list-style:none;
    display:block;
    font:Trebuchet MS, helvetica !important;
    [COLOR=Blue]margin:0; padding:0;[/COLOR]
    [COLOR=Blue]overflow: hidden;   [/COLOR] 
}
                ul#nav [B]li.nav-font [/B]{
                    font-family: helvetica !important;
                    color:#848383;
                    font-weight:900;
                    padding:1px 20px 0 0;
                    [COLOR=Red]/*margin-left:-30px;*/[/COLOR]
                    line-height: 42px;
                }

I’ll look some more and see if I can figure out the <div id=“date”> float problem.

Okay.

Here is the page source:

 
<!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>teen cancer circle | Home</title> 
 
		
		<meta name="generator" content="WordPress 2.9.2" /> <!-- leave this for stats --> 
 
		<link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/TCC/style.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/TCC/slideshow/slideshow.css" /> 
        <script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Library/jQuery/jQuery.js?hFileLastModified=1269279446"></script> 
		<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/TCC/Slideshow/Slideshow.js" charset="utf-8"></script> 
        
        <script type="text/javascript" src="http://use.typekit.com/lhl5gla.js"></script> 
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
 
					<link rel="alternate" type="application/rss+xml" title="teen cancer circle | Site Wide Activity RSS Feed" href="http://localhost/wordpress/activity/feed/" /> 
		
		
		
		<link rel="alternate" type="application/rss+xml" title="teen cancer circle Blog Posts RSS Feed" href="http://localhost/wordpress/feed/" /> 
		<link rel="alternate" type="application/atom+xml" title="teen cancer circle Blog Posts Atom Feed" href="http://localhost/wordpress/feed/atom/" /> 
 
		<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> 
 
			<div id="my-login-bar"><img class="logoutimage" src="http://localhost/wordpress/wp-content/themes/TCC/img/icon-logout.png" /><a class="loggingout" href="http://localhost/wordpress/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Flocalhost%2Fwordpress&amp;_wpnonce=21be76fc49">log out</a></div> 
 
 
<link rel="alternate" type="application/rss+xml" title="teen cancer circle &raquo; Home Comments Feed" href="http://localhost/wordpress/feed/" /> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js?ver=2.9.2'></script> 
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script> 
<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" /> 
<link rel='index' title='teen cancer circle' href='http://localhost/wordpress' /> 
<meta name="generator" content="WordPress 2.9.2" /> 
<link rel='canonical' href='http://localhost/wordpress' /> 
<script type="text/javascript">var ajaxurl = "http://localhost/wordpress/wp-load.php";</script> 
	<script type="text/javascript"> jQuery(document).ready( function() { jQuery("a.confirm").click( function() { if ( confirm( 'Are you sure?' ) ) return true; else return false; }); });</script> 
 
	</head> 
 
	<body class="home-page logged-in home page page-id-10 page-template page-template-homepage-php" id="bp-default"> 
		
        
        
		
		<div id="toppanel"> 
        
        	<a href="http://localhost/wordpress"><img class="logo" src="http://localhost/wordpress/wp-content/themes/TCC/img/logo-small.png" alt="Teen Cancer Circle" /></a> 
            
        </div> 
        <div id="wrapper"> 
        
		<div id="header"> 
			
            <div id="navi"> 
			<ul id="nav"> 
            	<li class="nav-font">Dashboard</li> 
				<li class="selected"> 
					<a href="http://localhost/wordpress" title="Home">Home</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/activity/" title="Activity">Activity</a> 
					</li> 
				
				<li> 
					<a href="http://localhost/wordpress/members/" title="Members">Members</a> 
				</li> 
 
									<li> 
						<a href="http://localhost/wordpress/groups/" title="Groups">Groups</a> 
					</li> 
 
											<li> 
							<a href="http://localhost/wordpress/forums/" title="Forums">Forums</a> 
						</li> 
									
				
				
							</ul><!-- #nav --> 
            </div><!-- #navi --> 
 
			<div id="search-bar"> 
				<div class="padder"> 
                                        <form action="http://localhost/wordpress/search" method="post" id="search-form"> 
                            <input type="text" id="search-terms" name="search-terms" value="search" /> 
                            <select name="search-which" id="search-which" style="width: auto"><option value="members">Members</option><option value="groups">Groups</option><option value="forums">Forums</option></select>                            <input type="submit" name="search-submit" id="search-submit" value="Search" /> 
                            <input type="hidden" id="_wpnonce" name="_wpnonce" value="980db11c15" /><input type="hidden" name="_wp_http_referer" value="/wordpress/" />                        </form><!-- #search-form --> 
                                           
				</div><!-- .padder --> 
			</div><!-- #search-bar --> 
 
			
		
        </div><!-- #header --> 
        
        <div id="date"> 
        	18th May, 2010        
        </div><!-- #date --> 
       
 
				        
         
 
		<div id="container"> 
        
       
	<div id="intro"> 
    <img src="http://localhost/wordpress/wp-content/themes/TCC/img/tcc.png" alt="The Teen Cancer Circle - Share your experience with others"> 
      
    </div><!-- #intro --> 
    
    
    <div id="introSlides"> 
    	<div id="introSlide-1" class="introSlide"> 
            <div class="introSlideCopy"> 
            	<p><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/express.png" alt="Express Yourself" /></p> 
                <p> 
               	Discover a new way to vent the issues you face every day.  At the 
                Teen Cancer Circle you can document your cancer experience in a 
                safe environment.  Once you sign up you’ll have your own diary page 
                and be able to fully express yourself during a time when it’s 
                not always possible.
                </p> 
                <p><br /> 
                <a href="http://localhost/wordpress/register/"><img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/signup-btn.png" alt="Sign Up" /></p></a> 
            </div> 
            <div class="slideimage"> 
            	<img src="http://localhost/wordpress/wp-content/themes/TCC/slideshow/img/slide-1.png" alt="Happy Face" /> 
            </div> 
        </div><!-- #introSlide-1 --> 
    
        <div id="introSlide-2" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Testing
                </p> 
            </div> 
           	
        </div><!-- #introSlide-2 --> 
        
        <div id="introSlide-3" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                Anything
                </p> 
            </div> 
             
        </div><!-- #introSlide-3 --> 
        
    	<div id="introSlide-4" class="introSlide"> 
            <div class="introSlideCopy"> 
                <p> 
                
                </p> 
            </div> 
             
        </div><!-- #introSlide-4 --> 
        
        
        <div id='introSlideshowControls'> 
          <div class='introSlideshowControl' id='introSlideshowControl-4'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-3'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-2'><span></span></div> 
          <div class='introSlideshowControl' id='introSlideshowControl-1'><span></span></div> 
        </div><!-- #introSlideshowControls --> 
    
    
    
    
    
    
    </div><!-- #introSlides --> 
    
    
    <div id="latest-act"> 
    	<h2>Latest Activity</h2> 
        
                	<div class="pagination"> 
				<div class="pagination-links"></div> 
            </div> 
            
            <ul id="activity-stream" class="activity-list item-list"> 
            
                        
            	<li class="groups new_forum_topic" id="activity-3"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> started the forum topic <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/">Gotta test this shiz</a> in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day ago</span> &middot; <a href="http://localhost/wordpress/groups/testing/forum/topic/gotta-test-this-shiz/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/3?_wpnonce=1d714d1d19" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Everything</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                          
            	<li class="groups activity_update" id="activity-2"> 
                	
                    <div class="activity-content"> 
                    	
                        <div class="activity-header"> 
                        	<p><a href="http://localhost/wordpress/members/admin/" title="admin">admin</a> posted an update in the group <a href="http://localhost/wordpress/groups/testing/">Testing</a>: <span class="time-since">&nbsp; 1 day ago</span> &middot; <a href="http://localhost/wordpress/activity/p/2/" class="view" title="View Thread / Permalink">View</a> &middot; <a href="http://localhost/wordpress/activity/delete/2?_wpnonce=1d714d1d19" class="item-button delete-activity confirm">Delete</a></p>                        </div> 
                        
                                                	<div class="activity-inner"> 
                            	<p>Just a little about testing</p>                            </div> 
                       	                        
                                                
                  </div> 
              </li> 
              
                            
              </ul> 
              
       	        
        
        <div class="more"> 
        <a href="http://localhost/wordpress/activity/" title="Activity">See more</a> 
        </div>     
            
    </div><!-- #latest-act --> 
    
    
    <div id="why-join"> 
    	<h2>Why Join</h2> 
        <p>If you’re a young person with, or has just had, cancer, this site may be useful to you. <a href="">Click here</a> to find out more and sign up.</p> 
        <p>If you have a family member or friend with cancer and you wish to follow their journal or invite them to join, <a href="">Click here.</a></p> 
    </div><!-- #why-join --> 
    
    
    
    
    
    
   
 
		<div class="clearfooter"></div> 
        </div> <!-- #container --> 
 
				
		<div id="footer"> 
	    	
            <div id="trees1"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree1.png" alt="Trees 1" /> 
            </div><!-- #trees1 --> 
            
            
            <div id="footernav"> 
            	
                <div id="footernav-lhs"> 
                	<h2>The site</h2> 
                    <ul id="footer-nav"> 
                    	<li><a href="http://localhost/wordpress/register/">Join</a></li> 
                        <li> 
                </div> 
                
                <div id="footernav-rhs"> 
                	<h2>Behind the site</h2> 
                </div> 
            
            
            
            </div><!-- #footernav --> 
            
            
            <div id="trees2"><img src="http://localhost/wordpress/wp-content/themes/TCC/img/footertree2.png" alt="Trees 2" /> 
            </div><!-- #trees2 --> 
            
            
 
			
		</div><!-- #footer --> 
        
        
    
		
		
<!-- Generated in 0.524 seconds. --> 
 
	<script type="text/javascript"> 
	var bp_terms_my_favs = 'My Favorites';
	var bp_terms_accepted = 'Accepted';
	var bp_terms_rejected = 'Rejected';
	var bp_terms_show_all_comments = 'Show all comments for this thread';
	var bp_terms_show_all = 'Show all';
	var bp_terms_comments = 'comments';
	var bp_terms_close = 'Close';
	var bp_terms_mention_explain = '@ is a unique identifier for admin that you can type into any message on this site. admin will be sent a notification and a link to your message any time you use it.';
	</script> 
        
   
 
	</body> 
 
</html>

And here is the full CSS:

/*
Theme Name: BP tester
Theme URI: http://www.teencancercircle.com/
Description: Testing theme for BuddyPress.
Version: 1.0
Author: Abi Golestanian
Author URI: http://www.abigolestanian.com
Template: bp-default
Tags: buddypress, social-networking
*/




/* > fonts
--------------------------------------------------------------  */

@font-face {
	font-family: Junction;
	src: url("fonts/Junction.ttf") format("truetype");
}




* {margin-bottom:0; padding:bottom:0;}

/* > body
--------------------------------------------------------------  */

html, body {
	background-color:#eceade;
	margin: 0 auto;
	padding-top: 0 !important; /* Remove the top padding space for the admin bar in this theme */

}



/* > general header css values
--------------------------------------------------------------  */

#header {
	position:relative;
}


#toppanel {
	height:38px;
	width:100%;
	background-color:#272727;
}
	
#container {
	text-align:center;
	width:782px;	
	margin:0 auto;
	min-height:100%;
   	position:relative;
	padding-bottom:200px;
	overflow:auto;
}

#admin-bar-logo {
	display:none;
}

img.logo {
	border:none;
}

#date {
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#888888;
	margin:8px 10px;
}

a img {
	outline:none;
	border:none;
}



/* > login
--------------------------------------------------------------  */

#my-login-bar {
	position: absolute;
	top: 6px;
	right: 5px;
	color:#777777;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	width:650px;
	text-align:right;
	margin-right:7px;
}


#my-login-bar form {
	display:inline;
}

input#new-user-login, input#new-user-pass {
	height:14px;
	margin:3px 10px 0 6px;
	width:110px;
	background-color:#eceade;
	
}

.input2#new-user-pass {
	 margin-top:5px;
}


#new-wp-submit {
	margin:0 8px 0 8px;
	padding: 2px 4px 2px 5px;
	font-size:12px;
	font:Verdana, Arial, Helvetica, sans-serif;
}

#my-login-bar a, #my-login-bar a:visited {
	text-decoration:none;
	color:#777777;
}

#my-login-bar a:hover {
	text-decoration:underline;
}


.loggingout {
	vertical-align:middle;
	padding-top:3px;
	line-height:18px;
}
	a.loggingout, a:visited.loggingout {
		text-decoration:none;
		
	}

		a:hover.loggingout {
			text-decoration:underline;
		}
		
			.logoutimage {
				width:18px;
				height:18px;
				vertical-align:middle;
				padding-right:3px;
				margin-top:2px;
			}
			
input[type=text] {
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}






/* > navigation
--------------------------------------------------------------  */


#header {
	width:100%;
	background-color:#032745;
	height:42px;
	margin-top: 0;
	padding: 0;
	overflow:hidden;
}

#navi {
	width:700px;
	float:left;
}

ul#nav {
	list-style:none;
	display:block;
	font:Trebuchet MS, helvetica !important;
	margin-top:0px;
	overflow: hidden;	
}

	ul#nav li {
		float: left;
		width: auto;
		height:42px;
	}
		ul#nav li a {			
			text-decoration:none;
			font-size:16px;
			font:Trebuchet MS, helvetica !important;
			color:#cccccc;
			font-family:Trebuchet MS, helvetica !important;
			display: block;
			text-align: center;
			height:42px;
			line-height: 42px;
			padding: 0 15px 0 15px;
		}
		
			ul#nav li.selected, ul#nav li.current_page_item {
			background-image:url(img/tab-widen.png);
				background-repeat:no-repeat;
				background-position:0 0;
			}
			
			ul#nav li.selected a, ul#nav li.current_page_item a {
				background-image:url(img/tab-new.png);
				background-repeat:no-repeat;
				background-position:right top;
			}
			
				ul#nav li.nav-font {
					font-family: helvetica !important;
					color:#848383;
					font-weight:900;
					padding:1px 20px 0 0;
					margin-left:-30px;
					line-height: 42px;
				}
					ul#nav li a:hover {
						color:#acacac;
					}
			

#search-bar {
	clear:left;
	float:right;
	margin:-40px 6px 0 0;
	line-height:32px;
	width:360px;
	display:inline;
	position:relative;
	line-height:32px;
}





	input#search-terms {
		background-image:url(img/searchbar.png);
		background-repeat:no-repeat;
		background-color:#032745;
		border:none;
		width:190px;
		height:30px;
		color:#999999;
		padding-top:2px;
		padding-left:27px;
		margin-right:-18px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		line-height:32px;
		overflow:hidden;


	}
	
		*:focus {outline: none;}
		
		



/* > homepage
--------------------------------------------------------------  */

#intro {
	float:left;
	margin-top:20px;
}





#latest-act {
	clear:both;
	float:left;
	margin-top:45px;
	background-image:url(img/forum-bg.png);
	background-repeat:no-repeat;
	width:463px;
	height:241px;
	text-align:left;
	padding-left:14px;
	overflow:hidden;
	color:#4e4e4e;
	font-family:arial, sans-serif;
	font-size:13px;
}

	#latest-act h2 {
		font-family:Trebuchet MS, Georgia, "Times New Roman", Times, serif;
		font-size:21px;
		color:#464646;
		margin-top:12px;
	}

		ul#activity-stream {
			list-style:none;
			display:block;
			margin-left:-40px;
			margin-top:25px;
			width:440px;
		}
		
			ul#activity-stream a, ul#activity-stream a:visited {
				color:#a09f9c;
				text-decoration:none;
			}
			
				ul#activity-stream a:hover {
					text-decoration:underline;
				}

	#latest-act .more {
		text-align:right;
		margin-right:40px;
		margin-top:-5px;
		text-transform:uppercase;
		font-family:Trebuchet MS, helvetica;
		font-size:17px;
		
	}
	
		#latest-act .more a, #latest-act .more a:visited {
			text-decoration:none;
			color:#464646;
		}
		
			#latest-act .more a:hover {
				text-decoration:underline;
			}





#why-join {
	background-image:url(img/whyjoin-bg.png);
	background-repeat:no-repeat;
	width:303px;
	height:242px;
	float:right;
	margin-top:45px;
	text-align:left;
}

	#why-join h2 {
		font-family:Trebuchet MS, Georgia, "Times New Roman", Times, serif;
		font-size:21px;
		color:#464646;
		margin-top:12px;
		margin-left:15px;
	}
		
		#why-join p {
			color:#4e4e4e;
			font-family:arial, sans-serif;
			font-size:13px;
			margin-left:14px;
			width:270px;
			margin-top:25px;
		}
		
			#why-join a, #why-join a:visited {
				text-decoration:none;
				color:#a09f9c;
			}
			
				#why-join a:hover {
					text-decoration:underline;
				}





#sidebar {
	clear:both;
	float:left;
	margin-bottom:20px;
}



/* > footer
--------------------------------------------------------------  */


.clearfooter {
	height:200px;
	clear:both;
}


#footer {
	clear:both;
	width:100%;
	background-color:#1a1a1a;
	height:200px;
	background-image:url(img/footer.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	position:relative;
	margin-top:-200px;
	margin-bottom:0;
	display:block;

}

	#trees1 {
		float:left;
		margin:-100px 5px;
		width:243px;
		height:180px;
	}
		
		#trees2 {
			float:right;
			margin:-300px 8px;
			width:222px;
			height:188px;
			clear:right;
		}

#footernav {
	width:450px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
}

	#footernav-lhs {
		width:225px;
		height:200px;
		float:left;
	}
	
		#footernav-rhs {
			width:225px;
			height:200px;
			float:right;
		}
		
			#footernav-lhs h2, #footernav-rhs h2 {
				color:#eae9e9;
				font-family:'Terfens', Trebuchet MS;
				font-size:30px;
				margin-top:16px;
			}
		
		



Thanks for your help!

Abi

Hi,
The first thing you should be aware of is that all browsers apply their default margins and paddings differently, that is why a lot of people use resets.

If you will set your margin/paddings manually then that will probably get a lot of things straightened out. Hard to say though without seeing your complete code.

We can’t debug screenshots, all they do is show us what you are seeing. The php you posted will not help us either, we the the html that it generates. View the page source in your browser and then copy and paste the html in here with the complete css.

One thing that’s gonna bite you when it comes to IE is the comment placement. That ends up between floats your looking at the double render and/or disappearing content bugs.

</div><!-- #header –>

== /FAIL/

<!-- #header –></div>

== WORKS

Putting it inside the element instead of after dodges that particular bullet.

Hi,
The first thing you need to do is get your HTML and CSS valid. I just ran the html through the validator and it gave 26 errors.

For starters have a div in the head element and the wrapper div is not closed. I see the problems in IE that you mentioned, they are in IE7. Most likely they will be haslayout problems.

When you get that div out of the head it will remove some of the other errors.

There are 7 errors in the stylesheet also. Validate your CSS here.