Вообщем проблема такова, решил сделать сайт! Сделал, все гуд, делал через браузер опера, потом зашёл через IE, я прозрел, то не так и то не так, я просто *****, потом зашёл через Google Chrome, и еще больше прозрел, под каждый браузер нужно делать пипец, и т.д. браузеры... Вопрос как можно сделать css для каждого браузера отдельно??? Тоесть есть .htm страничка, что и где нужно прописывать, что бы при загрузке с разных браузеров выводился нужный код, или каким образом это возможно реализовать... Если прописать background-color:# то в 2 браузера показует по разному, в какомто вообще какбудто этого кода нету... ппц, Подскажите пожалуйста!
обычно css код пишется постепенно, сразу же проверяя на нескльких браузерах (Опера, Файрфокс, Гугл Хром, ИЕ 6, ИЕ 7, ИЕ 8, Сафари). Таким образом сразу видно косяки и можно найти решение, которое будет работать одновременно во всех браузерах. Хотя некоторые предпочитают вначале смотреть всё в одном браузере, а затем делать хаки для остальных (ну не дурость ли?) Если вы собираетесь делать дизайн абсолютно кроссбраузерный, то нужно: 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> или любой другой. Главное чтобы доктайп БЫЛ! 2. style.css [css] * { border: 0px; margin: 0px; padding: 0px; } table { border-collapse: collapse; border-spacing: 0; } [/css] это позволит настраивать любой элемент с точностью до пикселя и уверенностью, что в разных браузерах это будет выглядеть одинаково. Однако тут есть косяк - встроенные элементы, такие как кнопки и инпут-ы, будут выглядеть "стрёмно" - для них нужно будет обязательно писать собственные стили
Спасибо за ответ! прийдется хаки делать... Нужно добрать до элемента a:hover в php файле (class="separator") Который выводится в html файле... Через браузер FireFox не так выводит, но не знаю как до него добрать в CSS под FIreFox браузер...В CSS это 3 последние строчки (в опере, ie рулит, в мозилле не хочет) Вот скрипт... скрипт index.html : HTML: <body> <div> <form id="searchform"> <div> What are you looking for? <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" /> </div> !+!+!+!+!+!+!+!+!+!+!+!+!+! <div id="suggestions"> </div> !!+!+!+!+!+!+!+!+!+!+!+!+!+!+!+! </form> </div> </body> Вот rpc.php (обработчик) : PHP: <p id="searchresults"> <?php // PHP5 Implementation - uses MySQLi. // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase'); $db = new mysqli('localhost', 'root', '', ''); if(!$db) { // Show error if we cannot connect. echo 'ERROR: Could not connect to the database.'; } else { // Is there a posted query string? if(isset($_POST['queryString'])) { $queryString = $db->real_escape_string($_POST['queryString']); // Is the string length greater than 0? if(strlen($queryString) >0) { $query = $db->query("SELECT * FROM bd WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 8"); if($query) { // While there are results loop through them - fetching an Object. // Store the category id $catid = 0; while ($result = $query ->fetch_object()) { echo '<a href="'.$result->adress.'">'; $name = $result->name; if(strlen($name) > 80) { $name = substr($name, 0, 80) . "..."; } echo '<span class="searchheading">'.$name.'</span>'; } !+!+!+!+!+!+!+!+!+!+!+!+!+!+!+!+! echo '<span class="seperator"><a href="http://www.searchnah.com/add.html" title="Титле">Добро пожаловать!</a></span><br class="break" />'; !+!+!+!+!+!+!+!+!+!+!+!!+!+!+!+!+!+! } else { echo 'ERROR: There was a problem with the query.'; } } else { // Dont do anything. } // There is a queryString. } else { echo 'There should be no direct access to this script!'; } } ?> </p> ajax : [js]/* * Author: Marco Kuiper (http://www.marcofolio.net/) */ google.load("jquery", "1.3.1"); google.setOnLoadCallback(function() { // Safely inject CSS3 and give the search results a shadow var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard '-webkit-box-shadow' : '#888 5px 10px 10px', // Safari '-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+ $("#suggestions").css(cssObj); // Fade out the suggestions box when not active $("input").blur(function(){ $('#suggestions').fadeOut(); }); }); function lookup(inputString) { if(inputString.length == 0) { $('#suggestions').fadeOut(); // Hide the suggestions box } else { $.post("rpc.php", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call $('#suggestions').fadeIn(); // Show the suggestions box $('#suggestions').html(data); // Fill the suggestions box }); } }[/js] Нужно в CSS добрать до #separator в php файле выделен !+!+!+!+!+!+!+!+! знаком, который в конце поиска выводит сообщение "добро пожаловать" , он выводится в html где !+!+!+!+!+!+! выделено, как до него добраться в CSS!!! ПОМОГИТЕ ну и на всякий случай css: [css]/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_ | '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __| | | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_ |_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__| */ /* BASIC RESET */ body, div, img, p { padding:0; margin:0; } a img { border:0 } /* HTML ELEMENTS */ body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-color:#ffffff; } /* COMMON CLASSES */ .break { clear:both; } /* SEARCH FORM */ #searchform { margin:50px 200px; font-size:18px; } #searchform div { color:#000000; } #searchform div input { font-size:12px; padding:2px; width:440px; } #suggestions{ position: relative; width:440px; display:none; } /* SEARCHRESULTS */ #searchresults { border-width:1px; border-color:#919191; border-style:solid; width:440px; background-color:#a0a0a0; font-size:10px; line-height:10px; } #searchresults a { display:block; background-color:#e4e4e4; clear:left; height:16px; text-decoration:none; } #searchresults a:hover { background-color:#b7b7b7; color:#ffffff; } #searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919;} #searchresults a:hover span.searchlight { color:#ffffff; } #searchresults a span { color:#555555; } #searchresults a:hover span { color:#f1f1f1; } #searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; } #searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }[/css]
во-первых, я бы не советовал пока использовать CSS3, т.к. он поддерживается не до конца и не всеми браузерами (я ошибаюсь?). во-вторых, никуда добираться не нужно. просто в нужном месте вставь нужные классы, а в style.css - стиль для данного класса. и будет тебе щастье. в-третьих, дублируешь тему. ну и в заключение - опиши проблему проще, убери лишнее, а то нифига не понятно.
есть такая отличная штука, называется Firebug. показывает какие стили были применены к любому элементу и в какой последовательности (т.е. кто и что перекрывает). ЫТОГО - ставишь файрбаг, исследуешь "инвалидный" элемент - смотришь стили, которые были применены. и будет тебе щастье...