Hi guys,
im trying to create a website for a friend, and im struggling with firefox, chrome / ie are working as expected..
this is the live site (im integrating it with wordpress) that i am talking about
my issue is that when compared to IE and chrome in firefox there is extra padding at the top of the page in between the top of the browser and the orange header. try it out and see what i mean.
can anyone see where this extra padding is coming from?
header.php
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<body>
<div id="nav-outer">
<div id="navigation">
<div id="menu">
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</ul>
</div>
</div>
</div>
</body>
</html>index.php
<?php define('WP_USE_THEMES', false); get_header(); ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="../images/dualDrift.jpg" class="bg">
<div id="content">
<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- The following tests if the current post is in category 3. -->
<!-- If it is, the div box is given the CSS class "post-cat-three". -->
<!-- Otherwise, the div box will be given the CSS class "post". -->
<?php if ( in_category('3') ) { ?>
<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<!-- Display the Post's Content in a div box. -->
<div class="entry">
<?php the_content(); ?>
</div>
<!-- Display a comma separated list of the Post's Categories. -->
<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
<?php endwhile; else: ?>
<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p>Sorry, no posts matched your criteria.</p>
<!-- REALLY stop The Loop. -->
<?php endif; ?>
</div>
</body>
</html>style.css
/*
Theme Name: Ashley Stevens Drifting
Theme URI:
Description: A Custom bespoke template made by White Arrow Design
Version: 1.0
Author: White Arrow Design
Author URI:
*/
@charset "utf-8";
/* CSS Document */
#content{
margin-top:20px;
color:#00FF00;
}
.post{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#ffffff;
width:750px;
margin:0px auto;
margin-bottom:15px;
background-color:#000000;
border:1px solid orange;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
.post-cat-three{
background-color:#CC0066;
}
#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("/images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; background-image:url("/images/logo.png"); background-position:top left; background-repeat:no-repeat; }
/* MENU */
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1500px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index:-1;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
/*
html {
background: url(images/driftFlip.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/Thanks in advance x
