when I try to put in an SVG file as the logo to my website, like it tells me to do in the Kirby documentation, it properly shows up in Chrome on the left edge of the page, but not in Safari. Image provided. CSS Rules like padding, width, margin or align don't do anything, and this only seems to happen in Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= $site->title() ?> | <?= $page->title() ?></title>
<?= css([
'assets/css/prism.css',
'assets/css/lightbox.css',
'assets/css/index.css',
'#auto'
]) ?>
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
<body>
<header class="header">
<a style="padding:0;" href="<?= $site->url() ?>">
<img src="/assets/icons/logo.svg" height="48">
</a>
<nav class="menu">
<?php foreach ($site->children()->listed() as $item): ?>
<a <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php endforeach ?>
<?php snippet('social') ?>
</nav>
</header>
<main class="main">
Related
I can't get rid of the unwanted white space that added itself at the end of the website.
The link to the website is : http://www.authorwilliamjwarren.com/
I tried ,
deactivating plugins
html, body { height:100%}
reset to default CSS
But none of them didn't work for this.
I've checked most of other answers to the same problem, but nothing seem to fit my case.
Any help would be greatly appreciated,
Thank you !!
In your stylesheet you have:
media="all"
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Replace it with the following:
media="all"
.navbar {
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
The position relative on the .navbar is causing your "whitespace" problem.
This is the code of Header.php file. From where do you think those links come from?
How to remove those links?
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package dazzling
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- favicon -->
<?php if ( of_get_option( 'custom_favicon' ) ) { ?>
<link rel="icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" />
<?php } ?>
<!--[if IE]><?php if ( of_get_option( 'custom_favicon' ) ) { ?><link rel="shortcut icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" /><?php } ?><![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if( get_header_image() != '' ) : ?>
<div id="logo">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/>
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if( !get_header_image() ) : ?>
<div id="logo">
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
</div><!-- end of #logo -->
<?php endif; // header image was removed (again) ?>
</div>
<?php dazzling_header_menu(); ?>
</div>
</nav><!-- .site-navigation -->
Thank you!!
So I have a site created via wordpress. My problem is that the doctype is declared after a div which is I think is wrong. but since I'm using wordpress I put the doctype tag on my header but my header is inside a div.
header content
<div class="row" >
<?php get_header(); ?> // <-- doctype loads here
<div id="content">
<div class="twelve columns clearfix">
<section class="nine columns clearfix" itemprop="articleBody" style="border-right: 1px solid #a79c7f; min-height:450px !important;">
<?php if ( have_posts() ) : ?>
<?php query_posts('category_name=post da'); while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"target="_blank" ><h1><?php the_title(); ?></h1>
<?php the_excerpt(); ?></a>
<hr>
<?php endwhile; ?>
</section>
<?php if (function_exists('page_navi')) { // if expirimental feature is active ?>
<?php page_navi(); // use the page navi function ?>
<?php } else { // if it is disabled, display regular wp prev & next links ?>
<nav class="wp-prev-next">
<ul class="clearfix">
<li class="prev-link"><?php next_posts_link(_e('« Older Entries', "bonestheme")) ?></li>
<li class="next-link"><?php previous_posts_link(_e('Newer Entries »', "bonestheme")) ?></li>
</ul>
</nav>
<?php } ?>
<?php else : ?>
<?php endif; ?>
<?php get_sidebar(); ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
</div> <!-- end .row-->
Now I know this can be resolve by removing the doctype tag inside the header and placing it before
<div class="row" >
but it will be redundant to put it on every template that I create. is there anything I can do to other than putting my doctype to every page like the way I'm using with the header but in a correct order.
I can't exchange the place of the header to my row because the design will break.
ANOTHER QUESTION: Is it possible to start a div from my header and not placing the closing tag to the header but placing it on the footer. will that work? so i can place the starting div row after the doctype tag on the header instead of placing it before the whole header.
I already fixed the problem by putting the div row inside the header.php file after the doctype tag.
then removing all the row i declare on every template. the closing tag is locatedat the footer before the html and body is closed. everything is fixed i think for now. :)
<!doctype html>
<!--[if IEMobile 7 ]> <html <?php language_attributes(); ?>class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Hotel Frederiksminde" content="Wordpress Site of Hotel Frederiksminde." />
<title><?php bloginfo('name'); ?><?php wp_title( '«', true, 'left'); ?> </title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- icons & favicons -->
<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/h/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/m/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/l/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/l/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/hotelfs.png" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
<!-- media-queries.js (fallback) -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- html5.js -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<!-- wordpress head functions -->
<?php wp_head(); ?>
<!-- end of wordpress head -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!-- bring in theme options styles -->
<?php
$heading_typography = of_get_option('heading_typography');
if ($heading_typography) {
$theme_options_styles = '
h1, h2, h3, h4, h5, h6{
font-family: ' . $heading_typography['face'] . ';
font-weight: ' . $heading_typography['style'] . ';
color: ' . $heading_typography['color'] . ';
}';
}
$main_body_typography = of_get_option('main_body_typography');
if ($main_body_typography) {
$theme_options_styles .= '
body{
font-family: ' . $main_body_typography['face'] . ';
font-weight: ' . $main_body_typography['style'] . ';
color: ' . $main_body_typography['color'] . ';
}';
}
$link_color = of_get_option('link_color');
if ($link_color) {
$theme_options_styles .= '
a{
color: ' . $link_color . ';
}';
}
$link_hover_color = of_get_option('link_hover_color');
if ($link_hover_color) {
$theme_options_styles .= '
a:hover{
color: ' . $link_hover_color . ';
}';
}
$link_active_color = of_get_option('link_active_color');
if ($link_active_color) {
$theme_options_styles .= '
a:active{
color: ' . $link_active_color . ';
}';
}
$topbar_bg_color = of_get_option('top_nav_bg_color');
if ($topbar_bg_color) {
$theme_options_styles .= '
.top-nav {
background-color: '. $topbar_bg_color . ';
}';
}
$topbar_link_color = of_get_option('top_nav_link_color');
if ($topbar_link_color) {
$theme_options_styles .= '
.top-nav > li > a {
color: '. $topbar_link_color . ' !important;
}';
}
$topbar_link_hover_color = of_get_option('top_nav_link_hover_color');
if ($topbar_link_hover_color) {
$theme_options_styles .= '
.top-nav > li > a:hover {
color: '. $topbar_link_hover_color . ' !important;
}';
}
$suppress_comments_message = of_get_option('suppress_comments_message');
if ($suppress_comments_message){
$theme_options_styles .= '
#main article {
border-bottom: none;
}';
}
if($theme_options_styles){
echo '<style>'
. $theme_options_styles . '
</style>';
}
?>
<style>
#glt-translate-trigger {
background: #9f6330;
color: #ffffff;
cursor: pointer;
}
.goog-te-combo {
height: 20px !important;
top: -5px;
position: relative;
font-size: 11px;
}
#google_language_translator {
height: 20px;
width: 100px;
float: right;
}
.goog-te-gadget .goog-te-combo {
margin: 4px 0;
width: 100px !important;
}
#media only screen and (max-width: 874px) {
.goog-te-gadget .goog-te-combo {
display:none;
}
}
#media only screen and (max-width: 844px) {
#glt-translate-trigger {
height: 10px;
font-size: 10px ;
}
}
</style>
</head>
<body <?php body_class(); ?>>
<div class="row" > // DIV STARTS HERE
<header role="banner" id="top-header">
<div class="twelve columns" style="background: transparent; padding:0px !important;" >
<section class="twelve columns text-center" style="background: transparent;">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/09/fredlogo.png" alt="Hotel Frederiksminde Logo" style="height:100px; width:410px;">
</section>
<section class="twelve columns text-center" style="background: transparent;padding:0px !important; ">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg" style="width:30px; height:30px;" alt="Mobile Menu" >
</div>
<div id="navcontainer">
<?php // Navigation that display all pages. ?>
<?php // wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'The Main Menu Dansk', 'exclude' => '479' ) ); ?>
<?php if ( is_active_sidebar( 'sidebar2' ) ) : ?>
<?php dynamic_sidebar( 'sidebar2' ); ?>
<?php else : ?>
<!-- This content shows up if there are no widgets defined in the backend. -->
<div class="alert-box">Please activate some Widgets.</div>
<?php endif; ?>
</section>
</div>
<div class="twelve columns" style="background: transparent; padding:0px;" >
<div class="slider">
<?php masterslider(1); ?>
</div>
</header> <!-- end header -->
I'm building my first WordPress site and I am having a little bit of trouble. I have a problem with a PHP script.
The site http://www.berlinairliftveteransassociation.org/wordpress I put a JavaScript slide show. I finally got the image to show up. The problem I am facing is when I try to center this image. I'm almost certain this image is contained inside a <div>. I'm hoping someone could check out the link and then to tell me what's wrong.
I can't post the CSS, because it is extremely long. With developer tools you can see the CSS. This is probably an easy problem but I'm still a novice.
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="java.js"></script>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>java.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="red"></div>
<div id="yellow"></div>
<div id="page" class="hfeed site leftBlueBorder">
<img name="slide" class ="wrapper" id="slider main"><header id="masthead" class="site-header" role="banner">
<hgroup><h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
Wrap <img name="slide" class ="wrapper" id="slider main"> in a div and align that.
<div class="headSlider>
<img name="slide" class="wrapper" id="slider main" src="slides/2.jpg">
</div>
and add the following to your css file.
.headSlider
{
margin-left: auto;
margin-right: auto;
width: 875px;
}
I would just apply css to the image itself to fill the container div:
img#slider {
width: 100%;
height: auto;
}
Note: you are using an illegal value for the id of the image... it has a space.
img#slider {
margin: 0 auto;
display: block;
}
Well you can center the image by wrapping it in a div with text-align css property set to center, eg change:
<img name="slide" class ="wrapper" id="slider main">
to:
<div style="text-align:center;">
<img name="slide" class="wrapper" id="slider main">
</div>
*You should use a css style linked to a class or id rather than an inline style, thats just to illustrate
Also your image has multiple ids (slider and main) - html elements should only have a single unique id
There are probably other issues, but thats beyond the scope of this question
I'm changing a site template into the drupal theme.
I put the header in html.tpl.php and body in page.tpl.php and also set .info file but the page doesn't load properly and image of the site don't show in browser.
it seems to me with these settings and Since I still haven't changed the static content. it should work same as static version if so what would be the problem?
HTML code:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/modernizr.js"></script>
</head>
<body>
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.info file:
package, core and ..
stylesheets[all][] = css/style.css
scripts[] = js/modernizr.js
and region
html.tpl.php file:
?><!DOCTYPE html>
<html class="no-js" lang="en">
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
page.tpl.php file:
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
Copy your all images in to
/sites/all/themes/yourthemename/images
folder.
Then change the image path in page.tpl.php like this:
/sites/all/themes/yourthemename/works-8.jpg
instead of using:
../img/works/works-8.jpg
I recently have attempted to add a line of "Social Media Icons" inside of a website. After creating a DIV and applying the properties everything looks fine in FireFox, Safari, and Internet Explorer 8 Compatability mode.
However, viewing the page in IE8 makes the DIV look like one pixel wider on the right-hand side. Also increasing the magnification in IE8 to 105% corrects the problem, yet this is hardly a satisfactory fix by my estimation.
Website URL: http://MikeChurch.com
Cascading Style Sheet (CSS)
#wrapper{
width:960px;
margin:auto;
}
#banner{
width:100%;
float:left;
}
#socialMedia{
background:#000000 no-repeat right top;
border-bottom:5px solid white;
border-left:5px solid white;
border-right:5px solid white;
overflow:hidden;
float:left;
width:99%;
}
#wrap-container{
width:100%;
float:left;
background:#fff;
}
#innerpad{
width:950px;
float:left;
padding:0px 5px 5px 5px;
HTML
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
include_once (dirname(__FILE__).DS.'/tmp_vars.php');
?>
<!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" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?
>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?
>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/layout.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/modules.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css"
type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/joomla.css"
type="text/css" />
<script type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?
>/js/jb.script.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript">
var siteurl = '<?php echo $tmpTools->baseurl();?>';
window.addEvent ('load', makeTransBG);
function makeTransBG() {
fixIEPNG($$('img'));
fixIEPNG ($$('#banner-top'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner'), '', 'scale', 0, 2);
fixIEPNG ($$('#banner-bottom'), '', 'scale', 0, 2);
}
</script>
<style type="text/css">
.clearfix {height: 1%;}
img {
border: none;
}
templateurl(); ?
/css/template_ie6.css" type="text/css" />
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
>/css/template_ie7.css" type="text/css" />
<![endif]-->
<!--[if gte IE 8.0]>
<style type="text/css">
.clearfix {display: inline;}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?
>/css/template_ie8.css" type="text/css" />
<![endif]-->
</head>
<body id="bg">
<div id="wrapper">
<a target="_blank" href="http://twitter.com/thekingdude"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/twitter.jpg" title="Follow Mike on Twitter" alt="Follow Mike on Twitter" align="right" style="border:0"></a>
<a target="_blank" href="http://www.facebook.com/#!/TheKingDude?ref=ts"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/facebook.jpg" title="Find Mike on Facebook" alt="Find Mike on Facebook" align="right" style="border:0"></a>
<a target="_blank" href="http://feeds.feedburner.com/MikechurchcomRssFeed"><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss.jpg" title="MikeChurch.com RSS Feed" alt="MikeChurch.com RSS Feed" align="right" style="border:0"></a>
<div style="float:right;vertical-align:middle;">
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?
uri=MikechurchcomRssFeed&loc=en_US"><span style="color:white; vertical-
align:super">Keep up with the King Dude via eMaill RSS</span><img src="http://mikechurch.com/templates/mike_church/images/social_media_icons/rss_email.jpg"
title="Subscribe to MikeChurch.com RSS Feed by Email" alt="Keep up with the King Dude
via RSS email" style="border:0"></a></div>
</div>
<div id="innerpad">
<div id="wrap-topnav">
<div id="topnav">
<jdoc:include type="modules" name="topnav" />
</div>
<?php if( $this->countModules('search') ){?>
<div id="search-mod">
<div class="padding">
<jdoc:include type="modules" name="search" />
</div>
*Note: I have tried placing the DOCTYPE as the very first item in the HTML file, but it had no effect.
What happens there is that you said width='99%' which is subject to some rounding I believe and IE8 comes up with 1 extra pixel. You used a different technique for the div below, in order to obtain the white margin - a padding. On the social media div you used white borders with a width of 5px. IE counts the border width into the overall container width so if you'd say width=100% it would have been 10 pixels wider so I guess you chose 99% to make it closest to a right width.
I suggest you either use the same technique as in the "innerpad" div (paddings) or use an absolute width of 950px rather than a relative one.