I'm trying to use HTML5 Boilerplate + Normalize.css for my current project, and I faced the follow issue.
There seems to be a gap between my HTML tag and my BODY tag.
I've tried to figure out what's the cause of this, but failed after many tries.
I must have missed something here or there.
<!DOCTYPE html>
<!--[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"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ridanis | Web Design & Web Development</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- Wrapper / Start -->
<div class="wrapper">
<h1>Hello World!</h1>
</div>
<!-- Wrapper / End -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
Here is a fiddle: http://jsfiddle.net/C7gbC/
Thanks in advance.
normalize.css inserts a default margin declaration on h1 elements based on browser defaults for consistency:
h1 {
font-size: 2em;
margin: 0.67em 0;
}
If you zero it out manually (either in your main stylesheet or by modifying normalize.css directly), the gap will disappear:
h1 {
margin: 0;
}
Found this to be my issue with the "h2" in my page header. Same for a "p" tag in both iE8 and Crome. Just setting the margin: 0; for my "h1" AND "p" tags to some structure styles I had set at the beginning of my main.css page. Solution seems to work
Related
Why is this ie6.css file not loading on IE6?
The 'TEST 123' text does show.
(the css works if I remove the condition)
I'm testing this on a virtual box with xp and IE6 from http://modern.ie
(I know the _ and * css hacks, but I need a very different layout on IE6)
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE Client</title>
</head>
<body>
<!--[if lt IE 7]>
<p>TEST 123</p>
<![endif]-->
</body>
</html>
You have to use the full url.
When using the syntax like that it won't work in your browser.
"http://yourwebsite.com/Web/css/ie6.css"
You should be able to use:
Target IE 7 and LOWER
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
OR
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="~/Web/css/ie6.css" />
<![endif]-->
Thought these were working fine, but upon just checking I get a blank page in ie9. If I use developer tools to switch to ie 8 or 7 the same result. Maybe I am just too tired to right now, but I'm not seeing anything wrong with the below to cause a problem.
The top adds a class to html ie 8 or lower so I can remove any use of the google fonts in my css. then the bottom loads the google fonts for anything not IE OR IE 9 or higher.
What is wrong with this?
<!DOCTYPE html>
<!--[if lte IE 8 ]> <html class="ie8" lang="en-US"> <![endif]-->
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="description" content="test">
<link rel="stylesheet" href="/css/base.css" type="text/css">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<!--[if gt IE 8]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
I'm not sure about these lines:
<!--[if !IE]><!--> <html lang="en-US"> <!--<![endif]-->
<!--[if !IE]><!-->
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
Shouldn't they be:
<!--[if !IE]> <html lang="en-US"> <![endif]-->
<!--[if !IE]>
<link href="http://fonts.googleapis.com/css?family=Kite+One|Open+Sans:400italic,400,700" rel="stylesheet" type="text/css">
<![endif]-->
?
It looks like your last conditional statement is messed up.
<!--[if !IE]><!-->
remove the extra
<!-->
and where it closes
<!--<![endif]-->
change it to
<![endif]-->
My WordPress site is having some major IE issues that include jQuery, box-shadow, and other strange CSS problems.
Would my doctype be to blame?
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NA-net | NA's Communication Network</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven-child/style.css" />
<link rel="pingback" href="http://121.5.7.109/na_comm_new/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="NA-net » Feed" href="http://121.5.7.109/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net » Comments Feed" href="http://121.5.7.109/na_comm_new/?feed=comments-rss2" />
<link rel='stylesheet' id='wp_sidebarlogin_css_styles-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/style.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='bbp-default-bbpress-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/bbpress/bbp-theme-compat/css/bbpress.css?ver=2.1.2' type='text/css' media='screen' />
<link rel='stylesheet' id='slider-css' href='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/css/slider.css?ver=1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/js/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/js/blockui.js?ver=1.0'></script>
<script type='text/javascript'>
Doctype is ok, but i would recommend to use this one:
<!DOCTYPE html>
<!--[if lt IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 lt-ie6"> <![endif]-->
<!--[if IE 6]> <html class="lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="modern"> <!--<![endif]-->
<head>
...
Provided your code is standards compliant, it is unlikely your doctype is causing the problem. (Obviously the quick way to check is easy: change it to the HTML4.01 doctype and see if anything corrects itself!) The 'generic' HTML doctype should trigger standards mode in all modern browsers, and even legacy browsers should switch to full or near standards mode in the presence of any doctype. Given you tagged IE9 in the question, your problems are likely due to IE9 being only partially standards compliant past CSS 2.1. I suggest trying to isolate your problems individually.
Box-shadow: According to MDN, you may need to explicitly set border-collapse:seperate for it to work in IE.
Other: I see you use conditional comments to sniff out IE6-8. Perhaps you need to extend this to IE9? Also watch out for any nasty inline CSS hacks...
I am using bootstrap with a theme from bootswatch with html5 boiler plate to create a page. Although it displays correctly in Chrome and Firefox, it doesn't display correctly in IE9 and IE8 mode. However, it works correctly when I set IE9 to use compatibility mode. The problem is that in IE9 without compatibility mode , the page does not align itself and stays at the left. Would like to know where I went wrong. Thanks in advance!
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- More ideas for your head here: h5bp.com/d/head-Tips -->
<!-- For the sticky footer -->
<!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
<style>
#content-main {
padding-top:63px;
}
#form-language {
margin-top: 15px;
}
</style>
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="extras/h5bp/js/libs/modernizr-2.5.3.min.js"></script>
</head>
The code is here: http://jsfiddle.net/WWphP/
<!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
The code above is your problem, basically you say if it isn't IE7 use this code which also includes IE9.
Your #sf-wrapper element is set to display: table; which makes it's width as wide as the content inside is (940px), just set #sf-wrapper to width:100% and it will be centered.
I have a Diazo theme file which is based on the html5boilerplate. The theme uses conditional comments on the <html> element to identify particular versions of Internet Explorer, e.g.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
However, when the theme is applied Diazo seems to strip away these conditional comments and only the last
<!--<![endif]-->
is left in the final markup producing something like
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en" xml:lang="en"><!--<![endif]-->
with an unmatched endif. Using conditional comments within the <html> tag (e.g. inside <head> or further down in the document) seems to work fine.
Examples of a theme and rules files which have this issue are available at
https://github.com/hexagonit/hexagonit.themeskel/blob/master/hexagonit/themeskel/templates/less_theme/+namespace_package+/+package+/theme_resources
I'm using plone.app.theming 1.0b8 with the associated KGS versions from good-py.
This looks like a bug in Diazo, please add it to the Plone bug tracker with component 'Diazo'.
A work around for this could be to use conditional comments on the <body> tag, but Diazo must also add a few classes to the body tag for Plone, which would break it in <=IE8.
<merge attributes="class" css:theme="body" css:content="body" />
So a 3rd rate work around could be to use contional comments on a div block like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<!--[if lt IE 7]> <div class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]> <div class="no-jsie7 oldie"> <![endif]-->
<!--[if IE 8]> <div class="no-js ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="no-js"> <!--<![endif]-->
<div id="content"></div>
</div><!-- Browser Detection -->
</body>
</html>
Given the general fuglyness of Plone's generated html, I could live with this.