My website was working perfectly when all of a sudden any tags without a . or # suddenly stopped working on the site I'm working on (http://cravinthe.server300.com).
I've tried putting it directly into the head without the stylesheet and that doesn't seem to work either. This happens with body, a, and so on. This is driving me crazy and I can't figure out what's happening.
I don't know if this will help, but here is my CSS:
body {margin:0 auto;width:100%;background-color:#e8f4fc;overflow-x: hidden;}
and here is my HTML:
<?php /** Home Page */ ?>
<!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' ); ?>" />
<title>Cravin The Cookie 2013</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css' />
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.3.2.min.js"></script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div id="header">
Thanks!
You have error in style.css - remove "}"
#font-face {
font-family: 'Omnes_GirlScoutsRegular';
// ...
} // <--- remove "}"
font-family: 'Omnes_GirlScoutsSemibold';
// ...
}
body {margin:0 auto;width:100%;background-color:#e8f4fc;overflow-x: hidden;}
Related
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' am running into a issue, the site is still in my localhost. Where the css links are not including into into the page. It works in all other browser expect IE7 and IE8.
I' am using WordPress 3.6, Bootstrap 3, Modernizr and jQuery.
Source Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie-7"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie-8"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie9 ie-9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo title(); ?></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap-theme.css"/>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/common.css"/>
<?php if(is_front_page()){ ?><link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/home.css"/><?php } ?>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/media.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/print.css" media="print"/>
<script type="text/javascript" src="<?php echo JS_PATH; ?>/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript">var template = '<?php echo get_template_directory_uri(); ?>';</script>
</head>
Chrome Head
IE8 Head
What I thought this might be something to do with DOCTYPE so I changed to HTML4 but still its not working. Also note that it works on IE8 Browser Mode and Document Mode as Quirks but doesn't work on Standard Mode
You are using conditional comments.
<!--[if gt IE 8]><!--><html class="no-js">
<head>
You never end the concom for the <html> start tag for gt IE8. Everything before the next comment is hidden in browsers that match that.
Add <!--<![endif]-->.
I am trying to style my WordPress website to be displayed properly in Internet Explorer 8 and all versions below.
I have created a separate ie.css file but I am having problems styles to be read only when opened from IE.
In the head of my document I have included:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
When viewed from IE, the website is acting as this doesn't exist.
But when I insert this in to the head, all the styles appear in IE (that are meant for IE) but also in Chrome, Mozilla, etc..
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css" media="screen" />
Any advice?!
Try
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->
or
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie.css">
<![endif]-->
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.