From 7d3220cb57e0e3fb08d6c3de7d535fc7872ec18d Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Thu, 11 Oct 2012 22:07:06 +0000 Subject: [PATCH] Twenty Twelve: implement better support for IE7 and IE8 (don't use mobile menu). See #22044. git-svn-id: http://core.svn.wordpress.org/trunk@22201 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- css/ie.css | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++ functions.php | 8 +++ header.php | 7 +- style.css | 31 --------- 4 files changed, 200 insertions(+), 33 deletions(-) create mode 100644 css/ie.css diff --git a/css/ie.css b/css/ie.css new file mode 100644 index 000000000..facd06923 --- /dev/null +++ b/css/ie.css @@ -0,0 +1,187 @@ +/* +Styles for older IE versions (previous to IE9). +*/ + +body { + background-color: #e6e6e6; +} +body.custom-background-empty { + background-color: #fff; +} +body.custom-background-empty .site, +body.custom-background-white .site { + box-shadow: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} +.assistive-text, +.site .screen-reader-text { + clip: rect(1px 1px 1px 1px); /* IE7 */ +} +.full-width .site-content { + float: none; + width: 100%; +} +img.size-full, +img.size-large, +img.header-image, +img.wp-post-image { + width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */ +} +.author-avatar { + float: left; + margin-top: 8px; + margin-top: 0.571428571rem; +} +.author-description { + float: right; + width: 80%; +} +.site { + box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); + margin: 48px auto; + max-width: 960px; + overflow: hidden; + padding: 0 40px; +} +.site-content { + float: left; + width: 65.104166667%; +} +body.template-front-page .site-content, +body.single-attachment .site-content, +body.full-width .site-content { + width: 100%; +} +.widget-area { + float: right; + width: 26.041666667%; +} +.site-header h1, +.site-header h2 { + text-align: left; +} +.site-header h1 { + font-size: 26px; + line-height: 1.846153846; +} +.main-navigation ul.nav-menu, +.main-navigation div.nav-menu > ul { + border-bottom: 1px solid #ededed; + border-top: 1px solid #ededed; + display: inline-block !important; + text-align: left; + width: 100%; +} +.main-navigation ul { + margin: 0; + text-indent: 0; +} +.main-navigation li a, +.main-navigation li { + display: inline-block; + text-decoration: none; +} +.ie7 .main-navigation li a, +.ie7 .main-navigation li { + display: inline; +} +.main-navigation li a { + border-bottom: 0; + color: #6a6a6a; + line-height: 3.692307692; + text-transform: uppercase; +} +.main-navigation li a:hover { + color: #000; +} +.main-navigation li { + margin: 0 40px 0 0; + position: relative; +} +.main-navigation li ul { + display: none; + margin: 0; + padding: 0; + position: absolute; + top: 100%; + z-index: 1; +} +.ie7 .main-navigation li ul { + left: 0; +} +.main-navigation li ul ul, +.ie7 .main-navigation li ul ul { + top: 0; + left: 100%; +} +.main-navigation ul li:hover > ul { + border-left: 0; + display: block; +} +.main-navigation li ul li a { + background: #efefef; + border-bottom: 1px solid #ededed; + display: block; + font-size: 11px; + line-height: 2.181818182; + padding: 8px 10px; + width: 180px; +} +.main-navigation li ul li a:hover { + background: #e3e3e3; + color: #444; +} +.main-navigation .current-menu-item > a, +.main-navigation .current-menu-ancestor > a, +.main-navigation .current_page_item > a, +.main-navigation .current_page_ancestor > a { + color: #636363; + font-weight: bold; +} +.menu-toggle { + display: none; +} +.entry-header .entry-title { + font-size: 22px; +} +#respond form input[type="text"] { + width: 46.333333333%; +} +#respond form textarea.blog-textarea { + width: 79.666666667%; +} +.template-front-page .site-content, +.template-front-page article { + overflow: hidden; +} +.template-front-page.has-post-thumbnail article { + float: left; + width: 47.916666667%; +} +.entry-page-image { + float: right; + margin-bottom: 0; + width: 47.916666667%; +} +.template-front-page .widget-area .widget, +.template-front-page.two-sidebars .widget-area .front-widgets { + float: left; + margin-bottom: 24px; + width: 51.875%; +} +.template-front-page .widget-area .widget:nth-child(odd) { + clear: right; +} +.template-front-page .widget-area .widget:nth-child(even), +.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets { + float: right; + margin: 0 0 24px; + width: 39.0625%; +} +.template-front-page.two-sidebars .widget, +.template-front-page.two-sidebars .widget:nth-child(even) { + float: none; + width: auto; +} \ No newline at end of file diff --git a/functions.php b/functions.php index c54fe08eb..ada0de996 100644 --- a/functions.php +++ b/functions.php @@ -88,6 +88,8 @@ require( get_template_directory() . '/inc/custom-header.php' ); * @since Twenty Twelve 1.0 */ function twentytwelve_scripts_styles() { + global $wp_styles; + /* * Adds JavaScript to pages with the comment form to support * sites with threaded comments (when in use). @@ -141,6 +143,12 @@ function twentytwelve_scripts_styles() { * Loads our main stylesheet. */ wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); + + /* + * Loads the Internet Explorer specific stylesheet. + */ + wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' ); + $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' ); } add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' ); diff --git a/header.php b/header.php index 24b6d12c8..2d3dfa630 100644 --- a/header.php +++ b/header.php @@ -9,8 +9,11 @@ * @since Twenty Twelve 1.0 */ ?> - + > diff --git a/style.css b/style.css index 538220242..a4bd9d754 100644 --- a/style.css +++ b/style.css @@ -482,7 +482,6 @@ a:hover { z-index: 100000; /* Above WP toolbar */ } - /* Page structure */ .site { padding: 0 24px; @@ -1658,34 +1657,4 @@ img#wpstats { margin-left: 50px; margin-left: 3.57142857rem; } -} - - -/* =IE 7 and 8 ------------------------------------------------ */ - -.ie .assistive-text { - clip: rect(1px 1px 1px 1px); /* IE7 */ -} -.ie .site { - margin: 48px auto; - max-width: 960px; -} -.ie .site-content { - float: left; - width: 65.104166667%; -} -.ie .full-width .site-content { - float: none; - width: 100%; -} -.ie .widget-area { - float: right; - width: 26.041666667%; -} -.ie img.size-full, -.ie img.size-large, -.ie img.header-image, -.ie img.wp-post-image { - width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */ } \ No newline at end of file