Поддержка Темы и шаблоны Найти проблему несовместимости кода CSS для браузеров

  • есть сайт — http://x-files.net.ua/

    в ИЕ 7 — колонка с контентом (публикации) съехала вниз под сайдбар
    в Опере все ок.

    почитав чуточку форум и http://htmlbook.ru/css/ понял что многие аргументы невсегда совместимы среди браузеров.
    отсюда и возникла мысль, что проблема с ИЕ возможно связана с каким-то кодом в ЦСС темы.
    соответствено вопрос:
    правиильно ли я построил цепочку мысли?
    если да, то как найти тот самый проблемный код и главное как его заменить или что добавить чтобы во всех бразуерах было все ок?

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • http://quirm.net/2009/06/29/wordpress-conditional-comment-css/
    прочитал статью.

    добавил просто в шапку одного из шаблонов темы (home.php — отвечает за отображение главной страницы — корня сайта) следующие строки:

    <!--[if IE]>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie.css" media="screen" type="text/css" />
    <![endif]-->

    залил в папку темы файл ie.css
    в нем только эти строки:

    .wrap {width:960px; margin:20px auto; border:1px solid black; background: transparent	url("images/paper.jpg");}
    .content {width:680px; float:right; padding:0px 20px 0px 20px; min-height:600px;}
    .sidebar {width:200px; float:left; padding:0px 10px 40px 10px;}

    как видим — колонка с публикациями поднялась куда надо, но при этом сузился сайдбар, хотя я его ширину ведь не менял!!
    http://x-files.net.ua/

    а выглядеть сайд бар должен именно так — http://x-files.net.ua/?p=1

    Помогите пжлст решить проблему с отображением в ИЕ.

    П.С, основной style.css выглядит так:

    /*
    Theme Name:		Simple Notepad
    Theme URI: 		http://thestateofflux.com/simple-notepad-theme
    Version: 		1.0.1
    Description: 	A clean design reminiscient of a notepad on a desk.  This theme is suitable for multiple authors and features an about page for each one.  Uses gravatars, widgets, SEO.
    Author: 		Damien Flux
    Author URI:		http://thestateofflux.com
    Tags:			two-columns, fixed-width
    
    Licensed under the terms of the GNU General Public License version 2.
    */
    
    /********** MAIN **********/
    body {font: 13px/1.5 Verdana, Arial, Helvetica, sans-serif; background: transparent url("images/leather.jpg");}
    input {font: 13px/1.5 Verdana, Arial, Helvetica, sans-serif; background: transparent;}
    textarea {font: 13px/1.5 Verdana, Arial, Helvetica, sans-serif; background: transparent;}
    .wrap {width:960px; margin:20px auto; border:1px solid black; background: transparent	url("images/paper.jpg");}
    .content {width:700px; float:right; padding:0px 20px 0px 20px; min-height:600px;}
    .sidebar {width:200px; float:left; padding:0px 10px 40px 10px;}
    .screen-reader-text {display:none;}
    .post-meta {list-style-type: none; color: #4F3636; margin: 0; padding: 0;}
    .post-meta, .post-meta li {display: inline;}
    .post-meta-key {list-style-type: none; display: none;}
    
    /********** HEADER **********/
    .header {padding:10px 10px 40px 10px; margin-bottom:30px;}
    .header h1, h1 a, h1 a:hover {font-size:40px; color:#000000; font-weight:bold; line-height:48px; text-decoration:none; font-family: "Courier New", Courier, monospace;}
    .header h4 {color:#333333; font-style:italic; font-size:14px; padding-left: 50px; font-family: "Courier New", Courier, monospace;}
    
    /********** FOOTER **********/
    .footer {font-size:10px; text-align:center; line-height:16px; color:#858585; padding-bottom:20px;}
    .footer li {list-style-type: none;}
    .footer a {color: #858585; text-decoration:underline;}
    
    /********* SIDEBAR **********/
    .sidebar ul {list-style-type: none; padding: 0px 0px 0px 10px;}
    .sidebar li {list-style-type:none;}
    .sidebar ul li {background:transparent url("images/sidenavup.png") 0px 7px no-repeat; margin:0px 0px 0px 0px; padding:0px 0px 0px 18px;}
    .sidebar ul li:hover {background:transparent url("images/sidenavover.png") 0px 7px no-repeat;}
    .sidebar a {color:#344342; text-decoration:none;margin: 0px; padding: 0px;}
    .sidebar a:hover {color:#ffffff; text-decoration:blink;margin: 0px; padding: 0px;}
    .sidebar h3 {font-weight:normal; clear:both; font-size:16px; padding:20px 0px 0px 0px;}
    .sidebar a img {border: none;}
    .widgettitle {display: none;font-weight:normal; clear:both; font-size:10px;margin: 0px; padding: 0px;}
    .widget_categories ul li {list-style-type: none; font: Bold 13px Arial; background: none; margin: 0px; padding: 0px;}
    .widget_categories ul li:hover {background: none;margin: 0px; padding: 0px;}
    .widget_categories ul {margin: 0px; padding: 0px;}
    .sidebar #searchform #s {width: 130px;}
    .sidebar #searchform #searchsubmit {width:55px;height:22px;}
    
    /******************** SEARCH ********************/
    
    .searchdiv {margin: 30px 0px 0px 0px;padding: 0px;width: 130px;}
    .searchform {margin: 0px;padding: 0px;overflow: hidden;width: 130px;}
    .s {color: #323232; font-size: 11px; padding: 4px; width: 130px; margin: 4px 0px 0px 0px; border: 1px solid #323232; background: transparent url("images/paper.jpg");}
    .sbutt {background: #878787;color: #FFFFFF;font-size: 11px;width: 130px;font-family: Verdana, Helvetica, Sans-Serif;padding: 1px;margin: 0px 0px 0px 5px;border: 1px solid #333333;cursor:pointer;}
    
    /********** CONTENT **********/
    .content h1 {display:none;}
    .content h2, h2 a {color:#000000; font-weight:normal; clear:both; font-size:20px; padding:20px 0px 0px 0px; text-decoration:none;}
    .content h2 a:hover {color:#120B7F; text-decoration:none;}
    .content h3 {font-weight:normal; clear:both; font-size:16px; line-height:20px; padding:20px 0px 5px 0px;}
    .content h4 {font-weight:normal; clear:both; font-size:14px; line-height:18px; padding:15px 0px 5px 0px;}
    .content h5 {font-weight:normal; clear:both; font-size:12px; line-height:18px; padding:10px 0px 5px 0px;}
    .content h6 {font-weight:normal; clear:both; font-size:10px; line-height:16px;}
    .entry-header {font-size:20px;}
    .entry-header a {color:#56A5DF; text-decoration:none;}
    .entry-header a:hover {color:#120B7F; text-decoration:none;}
    .entry-content {overflow:hidden;}
    .entry-content a {color:#56A5DF; text-decoration:none;}
    .entry-content a:hover {color:#120B7F; text-decoration:none;}
    .entry-footer {font-size:10px; padding-bottom:20px;}
    .entry-content ul {list-style-type:none;}
    .entry-content ol li {background:none; margin: 0px 0px 0px 0px; padding:0px 0px 0px 5px;}
    .entry-content li {background:transparent url("images/arrow.png") 0px 5px no-repeat; margin: 0px 0px 0px 0px; padding:0px 0px 0px 15px;}
    .entry-content ul li {background:transparent url("images/arrow.png") 0px 5px no-repeat; margin: 0px 0px 0px 0px; padding:0px 0px 0px 15px;}
    blockquote {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background: #F5F5F5; border-left: 2px solid #696969;}
    .force-break {padding-bottom:40px;}
    .navigation {text-align:center; margin:20px 0px 20px 0px;}
    .navigation a {font-size:10; color:#56A5DF; text-decoration:none;}
    .navigation a:hover {color:#120B7F; text-decoration:none;}
    .author .avatar {float:left; border:none; padding:0px 20px 0px 0px;}
    .author .about-text {padding:20px 0px 0px 0px;}
    
    /******************** IMAGES ********************/
    img.alignright {float:right; border:none; margin:0px 0px 10px 10px;}
    img.alignleft {float:left; border:none; margin:0px 10px 10px 0px;}
    img.aligncenter {display: block; border:none; margin:10px auto 10px auto;}
    a img.alignright {float:right; border:none; margin:0px 0px 10px 10px;}
    a img.alignleft {float:left; border:none; margin:0px 10px 10px 0px;}
    a img.aligncenter {display: block; border:none; margin:10px auto 10px auto;}
    .wp-caption {border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
    .wp-caption img {margin: 0; padding: 0; border: 0 none;}
    .wp-caption p.wp-caption-text {font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}
    .gallery {margin:auto;}
    .gallery-image {border:none; margin-left:0;}
    .gallery-caption {margin-left:0;}
    .gallery-item {float:left; text-align:center; margin-left:0;}
    .gallery-columns-2 {width: 50%;}
    .gallery-columns-3 {width: 33%;}
    .gallery-columns-4 {width: 25%;}
    .gallery-columns-5 {width: 20%;}
    .gallery-columns-6 {width: 16%;}
    .gallery-columns-7 {width: 14%;}
    .gallery-columns-8 {width: 12%;}
    .gallery-columns-9 {width: 11%;}
    
    /******************** COMMENTS ********************/
    .commentblock {margin: 0px 10px 20px 0px; padding: 10px 20px 10px 20px;}
    .commentlist {font-style:normal;}
    .commentlist li {list-style-image: none; list-style-type: none; margin: 10px 0px 0px 0px; padding: 10px 10px 10px 10px;}
    .commentlist li.bypostauthor {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background:transparent;  border-top: 2px solid #696969; border-left: 2px solid #696969;}
    .commentlist li.pingback {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background: #F9F9F9;}
    .commentlist li.trackback {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background: #F9F9F9;}
    .commentlist li ul li {list-style-image: none; list-style-type: none; background: none; margin: 10px 0px 0px 0px; padding: 10px 10px 10px 10px;}
    .commentlist li ul li ul li {list-style-image: none; list-style-type: none; background: none; margin: 10px 0px 0px 0px; padding: 10px 10px 10px 10px;}
    .commentlist li.comment ul.children li.bypostauthor {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background: transparent;  border-top: 2px solid #696969; border-left: 2px solid #696969;}
    .comment {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; border-top: 2px solid #696969; border-left: 2px solid #696969;}
    .commentlist li div.vcard img.avatar {float:left; border: 1px solid #696969;}
    .commentlist li.comment div.vcard span.says {text-transform: lowercase; font-style: italic;}
    .commentlist li.comment div.commentmetadata {color: #1F1F1F; font-size: 10px; font-style:italic; margin: 0px 0px 30px 70px;}
    .vcard cite.fn {text-transform: uppercase; font-style: italic; font-weight: bold; padding: 0px 0px 0px 10px;}
    .comment-author a {color:#56A5DF; text-decoration:none; text-transform: uppercase;}
    .comment-author a:hover {color:#120B7F; text-decoration:none;}
    .comment-meta a {color:#56A5DF; text-decoration:none;}
    .comment-meta a:hover {color:#120B7F; text-decoration:none;}
    .reply a {color:#56A5DF; text-decoration:none;}
    .reply a:hover {color:#120B7F; text-decoration:none;}
    .comments, .respond {font-size: 14px; font-weight:normal;}
    #author, #email, #url, #comment, #submit {background: transparent; border: 1px solid #696969;}

    прошу слезно помощи …. 🙁

    В принципе не надо менять ширину сайдабара — как вариант, достаточно добавить для IE:

    .sidebar ul {margin-left:0px;}

    Lob1AV
    вы не могли бы мне пошагово написать как именно и где именно что прописать?

    просто не хочу ошибиться…

    В

    http://x-files.net.ua/wp-content/themes/simple-notepad/header.php

    после

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    добавьте

    <!—[if IE]>
    <style type=»text/css» media=»screen»>
    .sidebar ul {margin-left:0px;}
    </style>
    <![endif]—>

    итак, удалил все чт делал ранее в этой области, и сделал только следующее:
    1) ie.css
    только — .sidebar ul {margin-left:0px;}
    2) home.php
    в самый-самый верх прописал:

    <!--[if IE]>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie.css" media="screen" type="text/css" />
    <![endif]-->

    результат — http://x-files.net.ua/
    контент поднялся но сайдбар опять таки «сузился», видно на примере с тумбнейлами галлереи — теперь их по два встроку
    🙁

    П.С. мне тут еще такое вот написали:

    Make sure that you have added the conditional call to ie.css in header.php after the call to style.css — otherwise any chnages you add to ie.css will be over-written by style,css and won’t work.

    я так понял что надо в шаблон хедер.рнр вставить кондишнад рул, но так и не понял в каком именно виде и куда именно в хедер.рнр
    🙁
    http://quirm.net/2009/06/29/wordpress-conditional-comment-css/ — тут их куча кондишнов, в самом низу для вордпресса, но там даже без <!—[if lte IE]> ..

    Прочитайте внимательно куда надо поставить то, что я вам написал и после чего.
    Смысл приведённой вами цитаты на английском языке говорит именно поставить ваш ie.css после основного /wp-content/themes/simple-notepad/style.css

    вы уж простите пжлст, но я совсем запутался что и куда прописывать..
    не может моя дурная башка понять это, вот и прошу вас растолковать мне, пожалуйста.

    Бывает 😉
    Оставляете

    1) ie.css
    только — .sidebar ul {margin-left:0px;}

    Далее, уберите из home.php

    <!—[if IE]>
    <link rel=»stylesheet» href=»<?php bloginfo(‘template_directory’); ?>/ie.css» media=»screen» type=»text/css» />
    <![endif]—>

    и поставьте этот код в header.php до закрывающего тэга </head>.

    сделал.
    колонка контента все еще внизу ниже сайдбара 🙁

    хедер.рнр выглядит:

    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="distribution" content="global" />
    <meta name="robots" content="follow, all" />
    <meta name="language" content="en, sv" />
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <!-- leave this for stats please -->
    
    <title>
      <?php wp_title(''); ?>
      <?php if(wp_title('', false)) { echo ' |'; } ?> <?php bloginfo('name'); ?>
    </title>
    
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
    <style type="text/css" media="screen">
    <!-- @import url( <?php bloginfo('stylesheet_url'); ?> );  -->
    </style>
    <!--[if IE]>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie.css" media="screen" type="text/css" />
    <![endif]-->
    </head>
    
    <body>
    
    <div class="wrap">
    
    	<div class="header">
      		<h6><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h6>
    	</div>
    <!-- end header -->
    
    	<?php include(TEMPLATEPATH."/sidebar.php");?>
    
    	<div class="content">

    кстати, только вот сейчас заметил разное положение колонки контента:
    1) (home.php) — http://x-files.net.ua/
    2) (category.php) — http://x-files.net.ua/?cat=11

    как видно, в пункте 2) — колонка реально правее от сайдбара!!!
    хотя все равно почему-то под ним..

    Нашёл ошибку: в ie.css уберите ul, т.о. получится

    .sidebar {margin-left:0px;}

    Lob1AV

    ОГРОМНОЕ СПАСИБИЩЕ ВАМ!!!!
    все супер!!!

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Тема «Найти проблему несовместимости кода CSS для браузеров» закрыта для новых ответов.