CSS только для одного браузера

Ge1i0N · November 17, 2010

Почему-то Google Chrome читает код моего сайта немного не так как остальные браузеры.

Как сделать так, чтобы часть CSS воспринимал только он, а остальные браузеры игнорировали?

klierik · November 17, 2010

используйте аттач (требуется jQuery)jquery.browser.min.js.zip

Int · November 18, 2010

Сделать простую проверку на юзер-агент

mishka · November 18, 2010

Опыт подсказывает что ненужно никаких джс, и проверок на браузер. Нужно просто правильно сверстать.

Хром не тот браузер который нуждаеться в отдельном CSS.

Ge1i0N · November 18, 2010

Может быть подскажите в чём проблема? Может быть я сильно коряво сверстал?

Вот кусок кода который "барахлит"

<!DOCTYPE html>

<head>
<link rel="stylesheet" href="/templates/SporeMachinima/css/template.css" type="text/css" />
</head>

<body>
<header>
<div id="header">
	<div id="robocam"></div>
	<a href="http://sporemachinima.ru" title="SporeMachinima"><img src="" height="99" width="280" alt="SporeMachinima" class="logo"/></a>
	<div class="loginform"><form action="index.php" method="post" name="login" id="form-login">
	<div class="login_on">
	Добро пожаловать, <span>Ge1i0N</span>!	</div>
	<div class="login_logout">
	<input type="submit" name="Submit" class="button_logout" value="Выйти" />
	</div>

	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="logout" />
	<input type="hidden" name="return" value="Lw==" />
	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="login" />
	<input type="hidden" name="return" value="Lw==" />
	<input type="hidden" name="e6274da79fa09ca115949b1a671bb38e" value="1" /></form></div>
	<nav><ul class="menu"><li class="item2"><a href="http://sporemachinima.ru/"><span>НОВОСТИ</span></a></li><li class="item3"><a href="http://forum.sporemachinima.ru/"><span>ФОРУМ</span></a></li></ul></nav>
</div>
</header>
</body>
</html>

Вот часть css которая нуждается в доработке:

body {
	max-width:1007px;
	min-width:1007px;
	font-size:76%;
	font-family:"Verdana","Helvetica",sans-serif;
	line-height:1.3;
	text-align:left;
	margin:0 auto;
	background:url(../images/bg.png)#393d3f center repeat-y;
}

/*HEADER BLOCK*/
#header {
	height:139px;
	width:960px;
	margin:0 26px;
	overflow:hidden;
	background:url(../images/bg_page.png)#e7e7e7; 
}
#header, #footer {
	border-bottom-left-radius:27px;
	border-bottom-right-radius:27px;
	-moz-border-radius-bottomleft:27px;
	-moz-border-radius-bottomright:27px;
}
#robocam {
	height:114px;
	width:72px;
	position:absolute;
	margin-left:27px;
	margin-top:11px;
	background:url(../images/robocam.png) no-repeat;
}
.logo {
	margin-top:15px;
	margin-left:90px;
}
.loginform {
	float:right;
	margin-top:-5px;
}
.loginform li,a{
	height:15px;
	margin-top:5px;
	list-style:none;
	padding-top:4px;
	padding-bottom:2px;
	color:#696969;
	text-decoration:none;
	font-size:12px;
}
.login_on {color:#696969; padding-right:10px;}
.login_on span {color:#ff713f;}
.login_logout {text-align:center;}
.button_logout {
	padding:1px 3px;
	background:#c7c7c7;
	border:black 1px solid;
}
span .modlgn_username {
	height:24px;
	width:130px;
	border:0;
	padding-left:30px;
	margin-right:-20px;
	color:#7f7f7f;
	font-size:11px;
	font-family:"Tahoma", "Helvetica", sans-serif;
	background:url(../images/form_username.gif)no-repeat 0 0;
}
span .modlgn_username:hover, .modlgn_username:focus {
	color:#0177b4;
	background:url(../images/form_username.gif)no-repeat 0 100%;
}
span .modlgn_passwd {
	height:24px;
	width:130px;
	border:0;
	padding-left:30px;
	color:#7f7f7f;
	font-size:11px;
	font-family:"Tahoma", "Helvetica", sans-serif;
	background:url(../images/form_password.gif)no-repeat 0 0;
}
span .modlgn_passwd:hover, .modlgn_passwd:focus {
	color:#0177b4;
	background:url(../images/form_password.gif)no-repeat 0 100%;
}
li.register {
	padding-left:24px;
	background:url(../images/button_register.png)no-repeat 0 0;
}
li.register:hover {background:url(../images/button_register.png)no-repeat 0 100%;}
li.forgot_password {
	padding-left:20px;
	margin-left:145px;
	margin-top:-21px;
	background:url(../images/button_password.png)no-repeat 0 0;
}
li.forgot_password:hover {background:url(../images/button_password.png)no-repeat 0 100%;}
nav {}
.menu {
	position:relative;	 /*ЭТИ ДВЕ СТРОЧКИ*/
	top:117px;			 /*ВЫЗЫВАЮТ ПРОБЛЕМУ В Chroma*/ 
	float:right;
	margin-top:-9px;
	margin-right:-14px;
	list-style:none;
	text-decoration:none;
}
.menu  li,.menu  ul {
	color:#0177b4;
	display:inline;
	padding-right:40px;
}
.menu a {
	font-size:17px;
	font-weight:bolder;
	font-family:"Tahoma", "Helvetica";
	color:#3b3b3b;
}
.menu a:hover {color:#ff713f;}

Воочию проблему можете пронаблюдать на сайте sporemachinima. ru

Edited November 18, 2010 by Ge1i0N

Great Rash · November 18, 2010

Воочию проблему можете пронаблюдать на сайте sporemachinima. ru

А в чем проблема? Я не вижу.

Ge1i0N · November 18, 2010

С хрома меню навигации сползает вниз и его становится не видно.

Ge1i0N · November 21, 2010

К сожалению приходится апать тему, поскольку похоже не обратили на тему вовремя внимания. Проблема очень острая, а сам я точно не могу справиться.

Serlutin · November 21, 2010

Это то меню, где написано «Новости» и «Форум». Я сначала открыл страницу в FF4b7 (ну нравится мне бетка Огнелиса) и Chrome и начал сравнивать. Так отображается совершенно одинаково, так только потом я догадался посмотреть в Опере. Вы ведь наверное под ней верстали? Я так и не понял, почему оно в опере так выравнивается, ведь не должно.

Уберите position: relative, тогда начнет правильно отбражаться в FF и Chrome, ну а потом думайте, что с Opera делать.

Да и IE6-8 тоже что-то невнятное показывает. Вам надо добавить скрипт для отображения html5 тегов в IE

Sign In

CSS только для одного браузера

Question

Ge1i0N

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Ge1i0N

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Ge1i0N

Link to comment

Share on other sites

Ge1i0N

Link to comment

Share on other sites

Serlutin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information