Google Chrome CSS issue

Discussion in 'CSS' started by Mafia Penguin, Apr 23, 2011.

  1. #1
    Hi Everyone! :)

    I have some random mess-up with the css on my website that only seems to be effective on Google Chrome. For some reason i have a white gap at the top of my site (on every page) about 20 pixels tall and i can't get rid of it. Sometimes it's there, sometimes it's not.

    If you can't see it, try refreshing a few times.

    Here's the possible CSS code that could be doing it to my site...

    /* -----------BEGIN PAGE------------------------------------------------------- */
    
    
    	body
    	{
    	margin: 0 auto;
    	padding: 0;
    	}
    
    /* Clears post content */
    	.cleared 
    	{
    	float: none;
    	clear: both;
    	margin: 0;
    	padding: 0;
    	border: none;
    	font-size:1px;
    	}
    
    /* -----------END PAGE--------------------------------------------------------- */
    
    
    /* -----------BEGIN SHEET------------------------------------------------------ */
    
    
    	.art-Sheet /*Insert background image here*/
    	{
    	background-repeat: repeat-y;	
    	}
    
    
    	.art-Sheet-cc
    	{
    	position:absolute;
    	z-index:-1;
    	top: 1px;
    	left: 1px;
    	right: 1px;
    	bottom: 1px;
    	background-color: #ffffff;
    	}
    
    	.art-Sheet
    	{
    	margin-top: -1px !important;
    	}
    
    /* -----------END SHEET-------------------------------------------------------- */
    
    
    /* -----------BEGIN HEADER----------------------------------------------------- */
    
    
    	.art-Header-Background
    	{
    	z-index: 0;
    	margin: 0 auto;
    	position: relative;
    	width: 100%;
    	height: 148px;
    	background-color: #1b1b1b;
    	}
    
    	.art-Header
    	{
    	z-index: 0;
    	margin: 0 auto;
    	position: relative;
    	width: 1005px;
    	height: 148px;
    	background-color: #1b1b1b;
    	}
    
    	.art-Header-jpeg
    	{
    	
    	z-index: 1;
    	width: 470px;
    	height: 148px;
    	background-image: url('images/HeaderMain2.jpg');
    	background-repeat: no-repeat;
    	float: left;
    	}
    
    	.art-AddHeader
    	{
    	z-index: 10;
    	display:block;
    	float: left;
    	width: 468px;
    	height: 60px;
    	margin-top: 50px;
    	margin-left: 30px; 
    	}
    
    /* -----------END HEADER------------------------------------------------------- */
    
    Code (markup):
    And here's the php....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <title>
    
    	<?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) 
    	{ single_cat_title(); if(get_bloginfo('name') != "") 
    	echo ' - ' ; bloginfo('name'); }
    	elseif (is_single() ) { single_post_title(); }
    	elseif (is_page() ) { bloginfo('name'); if(get_bloginfo('name') != "") 	echo ': '; 
    
    	single_post_title(); }
    	else { wp_title('',true); } ?>
    </title>
    
    <?php wp_head(); ?>
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    
    
    
    <body>
    
    <div id="art-main">
    	<div class="art-Sheet">
    		<div class="art-Header-Background">
    			<div class="art-Header">
      				<div class="art-Header-jpeg"></div>
    			<div class="art-AddHeaderBuffer"></div>
    			<div class="art-AddHeader">
    <script type="text/javascript">
    <!--google_ad_client = "pub-9087995889510647";/* 468x60, created 8/30/10 */
    google_ad_slot = "0556568724";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>		</div>
    		</div>
    	</div>
    	<div class="art-menu-bar">
    		<div class="art-menu-inside">
    			<div class="l"></div>
    			<div class="r"></div>
    			<ul class="art-menu"><?php art_menu_items(); ?> 
    		</div>
    	</div>
    
    
    PHP:
    The website is http://www.filmhammer.com

    Thanks for your help! :D
     
    Mafia Penguin, Apr 23, 2011 IP
  2. Mafia Penguin

    Mafia Penguin Peon

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, i think i sorted it.

    I rooted through everything in the Header.php code and found that the problem lay with the function '<?php wp_head(); ?>'. I was going to delete it until i found an article that informed me of it's importance. I moved it into the <title> tag, and fortunately this removed the styling issues i was having. :D

    If you couldn't see the css problem i had, then that was because it only occurred only when I logged in. Not sure why i was getting it, but it's sorted now anyway.

    :)
     
    Mafia Penguin, Apr 23, 2011 IP
  3. Mafia Penguin

    Mafia Penguin Peon

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Mafia Penguin, Apr 26, 2011 IP
  4. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for taking the time to come back and post that link, saved me a lot of head-scratching.
     
    sburst, May 11, 2011 IP