Помогите с position: absolute

Статус
В этой теме нельзя размещать новые ответы.
Z

Zloboff

Прохожие
Начал верстать макет на слоях и столкнулся с проблемкой, в IE сайт отображается нормально, а в Opere слой с background'ом в право уходит...

Вот код index.html

Код: 
			<div id="autorize">
				<div id="autorize-form">
				<form action="./login.php" method="post">
					<div><img src="images/vhod.png" alt="" /></div>
					<div id="auto-form-1">
						<input id="f1" type="text" name="login_username" value="логин" onfocus="if(this.value=='логин') this.value='';" onblur="if(this.value=='') this.value='логин';" accesskey="l" tabindex="1" />
					</div>
					<div id="auto-form-2">
						<input id="f1" type="password" name="login_password" value="пароль" onfocus="if(this.value=='пароль') this.value='';" onblur="if(this.value=='') this.value='пароль';" tabindex="2" />
					</div>
					<div id="auto-form-2">
            <label title="Автоматически входить при каждом посещении"><input type="checkbox" name="autologin" value="1" tabindex="3" /> Запомнить</label>
					</div>
				</form>
				</div>
				<div id="autorize-form-2">
					<input type="image" name="login" tabindex="4" src="images/enter.png" alt="Ok" />
				</div>
							<div id="reg"><a href="/profile.php?mode=register">Регистрация</a> | <a href="/profile.php?mode=sendpassword">Забыли пароль?</a></div>
			</div>
			</div>

Вот код css
Код: 
#autorize
	{
		float: left;
		width: 257px;
		height: 137px;
		background-image:url(../images/menu/form-autorize.jpg);
		background-repeat:no-repeat;
		background-position: right;
		position: absolute;
	}

Пожалуйста помогите решить проблему :confused:
 

Вложения

  • opera.gif
    opera.gif
    181,4 KB · Просмотры: 20
  • ie.gif
    ie.gif
    199,9 KB · Просмотры: 20
на сколько я помню float и position:absolute взаимоисключающие параметры. т.е. должно быть что то оно ибо float выстаривает позицию относительно, а absolute по заданным координатам относительно окна
 
upandhigh написал(а):
на сколько я помню float и position:absolute взаимоисключающие параметры. т.е. должно быть что то оно ибо float выстаривает позицию относительно, а absolute по заданным координатам относительно окна
Нажмите для раскрытия...

Дело в том что нужно этот слой с id="autorize" положить на слой id="content" частично... в IE отображается отлично всё это дело в Oper'e отображается не так как нужно, вообщем задача этот слой id="autorize" прибить к левому краю слоя c id="body" да так чтобы при изменении экрана элементы дизайна отображались нормально.
 
Попробуй вот этот хак
Код: 
<style type="opera/css">
.right_radius { top:1px; }
</style>

соответственно и для файла 

<link rel="stylesheet" type="opera/css" href="?" />
Сам не проверял но говорят что работает. А вообще попробуй обойтиь без связки position и float, в опере это больная мазоль
 
silent.3w написал(а):
Попробуй вот этот хак
Код: 
<style type="opera/css">
.right_radius { top:1px; }
</style>

соответственно и для файла 

<link rel="stylesheet" type="opera/css" href="?" />
Сам не проверял но говорят что работает. А вообще попробуй обойтиь без связки position и float, в опере это больная мазоль
Нажмите для раскрытия...

Не помогает :( Могу привести полный html и css код, сроки поджимают уже :(
 
index.html

Код: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="opera/css" href="css/main.css" />
<title>RAP.UA &mdash; Главная страница</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/main.css?v=1" type="text/css" />
<!-- Report -->
<link rel="stylesheet" type="text/css" href="css/report_hack.css" />
<!-- Report [END] -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Подключаем библиотеку -->

<script type="text/javascript" src="js/jquery.pack.js?v=1"></script>

<script type="text/javascript" src="js/main.js?v=1"></script>
<style type="opera/css">
.right_radius { top:1px; }
</style>

<script type="text/javascript">
var BB_ROOT       = "./";
var cookieDomain  = "";
var cookiePath    = "/";
var cookieSecure  = 0;
var cookiePrefix  = "bb_";
var LOGGED_IN     = 1;
var InfoWinParams = 'HEIGHT=510,resizable=yes,WIDTH=780';

var user = {
	opt_js: {"only_new":0,"h_flag":0,"h_av":0,"h_rnk_i":0,"h_post_i":0,"h_smile":0,"h_sig":0,"sp_op":0,"tr_t_ax":0},

	set: function(opt, val, days, reload) {
		this.opt_js[opt] = val;
		setCookie('opt_js', $.toJSON(this.opt_js), days);
		if (reload) {
			window.location.reload();
		}
	}
}


$(document).ready(function(){
	$('div.post_body wbr').after('<wbr></wbr>​');
});

var ajax = new Ajax('./ajax.php', 'POST', 'json');

</script>

<!--[if lt IE 7]><script type="text/javascript">
$(document).ready(ie6_make_clickable_labels);

$(document).ready(function(){
	$('div.menu-sub').prepend('<iframe class="ie-fix-select-overlap"></iframe>'); // iframe for IE select box z-index issue
	Menu.iframeFix = true;
});
</script><![endif]-->

<!--[if gte IE 7]><style type="text/css">
input[type="checkbox"] { margin-bottom: -1px; }
</style><![endif]-->

<!--[if lte IE 6]><style type="text/css">
.forumline th { height: 24px; padding: 2px 4px; }
</style><![endif]-->

<!--[if IE]><style type="text/css">
.code-copy { display: block; }
.post-hr   { margin: 2px auto; }
</style><![endif]-->

<script type="text/javascript" src="./misc/js/develop.js"></script>
<script type="text/javascript">
function OpenInEditor ($file, $line)
{
	$editor_path = '';
	$editor_args = '';

	$url = BB_ROOT +'develop/open_editor.php';
	$url += '?prog='+ $editor_path +'&args='+ $editor_args.sprintf($file, $line);

	window.open($url,'','height=1,width=1,left=1,top=1,resizable=yes,scrollbars=no,toolbar=no');
}
</script>

<style type="text/css">
.menu-sub, #ajax-loading, #ajax-error, var.ajax-params { display: none; }

/* temp */


/* temp end */
</style>
</head>
<body>
	<center>
		<div id="body">
			<div id="logo">
					<div id="search">
		<form action="" method="post" onsubmit="
		$(this).attr('action', $('#search-action').val());
		var txt=$('#search-text').val(); return !(txt=='поиск...' || !txt);
	">
		<input type="hidden" name="max" value="1" />
		<input type="hidden" name="to" value="1" />
		<input id="form" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />
		<select id="form2">
			<option value="tracker.php#results" selected="selected">*по трекеру*</option>
			<option value="search.php">*по форуму*</option>
		  </select>
		<input type="submit" class="med bold" value="&raquo;" style="width: 30px;" />
	</form>
					</div>
					<div id="favorite">
					<a href="/forum/"><img src="images/home.png" alt="" /></a>&nbsp; &nbsp; 
					<a href="mailto:admin@rap.ua"><img src="images/mail.png" alt="" /></a>&nbsp; &nbsp; 
					<a href="/"><img src="images/map.png" alt="" /></a>
					</div>
			</div>
			<div id="menu-left">
			<div id="menu">
				<a href="/"><img style="padding: 9px 0px 0px 45px" src="images/menu/index.png" alt="" /></a>
				<a href="/tracker.php"><img style="padding: 9px 0px 0px 49px" src="images/menu/traker.png" alt="" /></a>
				<a href="/search.php"><img style="padding: 9px 0px 0px 55px" src="images/menu/search.png" alt="" /></a>
				<a href="/"><img style="padding: 9px 0px 0px 57px" src="images/menu/pravila.png" alt="" /></a>
				<a href="/faq.php"><img style="padding: 9px 0px 0px 69px" src="images/menu/faq.png" alt="" /></a>
				<a href="/privmsg.php?folder=inbox"><img style="padding: 9px 0px 0px 60px" src="images/menu/private.png" alt="" /></a>
			</div>
			<div style="background-position: right;">
			<div id="autorize">
				<div id="autorize-form">
				<form action="./login.php" method="post">
					<div><img src="images/vhod.png" alt="" /></div>
					<div id="auto-form-1">
						<input id="f1" type="text" name="login_username" value="логин" onfocus="if(this.value=='логин') this.value='';" onblur="if(this.value=='') this.value='логин';" accesskey="l" tabindex="1" />
					</div>
					<div id="auto-form-2">
						<input id="f1" type="password" name="login_password" value="пароль" onfocus="if(this.value=='пароль') this.value='';" onblur="if(this.value=='') this.value='пароль';" tabindex="2" />
					</div>
					<div id="auto-form-2">
            <label title="Автоматически входить при каждом посещении"><input type="checkbox" name="autologin" value="1" tabindex="3" /> Запомнить</label>
					</div>
				</form>
				</div>
				<div id="autorize-form-2">
					<input type="image" name="login" tabindex="4" src="images/enter.png" alt="Ok" />
				</div>
							<div id="reg"><a href="/profile.php?mode=register">Регистрация</a> | <a href="/profile.php?mode=sendpassword">Забыли пароль?</a></div>
			</div>
			</div>
			</div>
			<div id="site">
				<div id="navigation">
				
					<div>
						<img src="images/rating.jpg" alt="Рейтинг" />
					</div>
					
					<div id="nav2">
						<table cellpadding="0"> 
							<tr><td>Ваш рейтинг</td><td><b>нет</b> (DL < 2&nbsp;GB)</td></tr> 
							<tr><td>Скачано</td><td class="leechmed"><b>0&nbsp;B</b></td></tr> 
							<tr><td>Отдано</td><td class="seedmed"><b>0&nbsp;B</b></td></tr> 
							<tr><td><i>на своих</i></td><td class="seedmed">0&nbsp;B</td></tr> 
							<tr><td><i>бонус</i></td><td class="seedmed">0&nbsp;B</td></tr> 
						</table> 
					</div>
										<div>
						<img src="images/bt-clients.jpg" alt="Bit Torrent кленты" />
					</div>
					
					<div id="nav">
						<ul>
						<li><a href="">uTorrent (1.8)</a></li>
						<li><a href="">BitComet (0.8x)</a></li>
						<li><a href="">ABC, Azureus, BitSpirit</a></li>
						<li><a href="">Клиенты под Linux</a></li>
						</ul>
					</div>
										<div>
						<img src="images/faq.jpg" alt="Правила пользования ресурсом" />
					</div>
					<div id="nav">
						<ul>
						<li><a href="">Правила пользования данным ресурсом</a></li>
						<li><a href="">Как тут качать?</a></li>
						<li><a href="">Всё о рейтинге</a></li>
						<li><a href="">Как создать и оформить раздачу</a></li>
						<li><a href="">Правила оформления раздачи</a></li>
						<li><a href="">Как создать torrent</a></li>
						<li><a href="">Как организовать дораздачу</a></li>
						<li><a href="">Часто употребляемые выражения</a></li>
						<li><a href="">Руководство по BBCode</a></li>
						<li><a href="">Как залить картинку на бесплатный хост</a></li>
						<li><a href="">Как пользоваться Поиском</a></li>
						<li><a href="">Решатель проблем (от p1415)</a></li>
						</ul>
					</div>
										<div>
						<img src="images/donate.jpg" alt="Помощь трекеру" />
					</div>
					<div>
						<a href="/donate.php"><img src="images/donate-help.jpg" alt="Помощь трекеру" /></a>
					</div>
				</div>
				<div id="content">
					<div id="con">
						<h1>Последние новости</h1>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>

				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
				  <p>&nbsp;</p>
					</div>
				</div>
			</div>
			<div id="copy-sub">
			<div id="sub1"></div>
			<div id="sub2"></div>
			<a href="">пользовательское соглашение</a>&nbsp; &nbsp; | &nbsp; &nbsp;      
			<a href="">для правообладателей</a>&nbsp; &nbsp; | &nbsp; &nbsp; 
			<a href="">реклама на сайте</a>			</div>
			<div id="copyright">
				<div id="c1">
				© 2009. Rap.ua. All rights reserved.<br />
				Design by <a target="_blank" href="http://danjii.jimdo.com">Danjii</a>.<br />
				Developed by <a target="_blank" href="http://mcfucktor.net.ru">MC Fucktor</a>.
				</div>
				<div id="c2">
				Сайт не предоставляет электронные версии произведений, а занимается лишь коллекционированием и 
				каталогизацией ссылок, присылаемых и публикуемых на форуме нашими читателями. Если вы являетесь
				правообладателем какого-либо представленного материала и не желаете чтобы ссылка на него находилась в
				нашем каталоге, свяжитесь с нами и мы незамедлительно удалим её. Файлы для обмена на трекере
				предоставлены пользователями сайта, и администрация не несёт ответственности за их содержание. Просьба
				не заливать файлы, защищенные авторскими правами, а также файлы нелегального содержания!
				</div>
			</div>
		</div>
	</center>
</body>
</html>

main.css

Код: 
*
{
	font-family:Tahoma;
}
body
	{
		margin: 0px;
		padding: 0px;
		background-color: #232b3b;
		text-align: center;
	}
	
img
	{
		border: 0px;
	}

h1
	{
		font-size: 16px;
		color: #ffe389;
		margin: 0px;
		padding: 10px;
	}

h2
	{
		font-size: 14px;
		color: #b26a4b;
	}

a
	{
		
		font-size: 0.8em;
		color: #FFFFFF;
		font-weight: bold;
		font-variant:small-caps;
		text-decoration: none;
		text-align: center;
	}
	
a:hover
	{
		
		font-size: 0.8em;
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: underline;
		text-align: center;
	}

#body
	{
		background-color: #3f434b;
		border-left: 1px solid #585d67;
		border-right: 1px solid #585d67;
		width: 962px;
	}

#logo
	{
		background-image: url(../images/logo.jpg);
		background-repeat: no-repeat;
		height: 271px;
	}

#head
	{
		width: 962px;
	}	

#form
	{
		float: left;
		width: 106px;
		height: 20px;
		border: 1px solid #73476d;
		background-color: #c3a7bd;
		
		font-size: 12px;
		color: #876d81;
		padding: 0px 0px 0px 10px;
	}
	
#form2
	{
		float: left;
		width: 106px;
		height: 21px;
		border: 0px;
		background-color: #c3a7bd;
		
		font-size: 12px;
		color: #876d81;
		margin: 0px 0px 0px 10px;
	}

.med hold
	{
		border: 1px solid #73476d;
		background-color: #c3a7bd;
		
		font-size: 12px;
		color: #876d81;		
	}

#search
	{
		float: left;
		width: 280px;
		padding: 19px 10px 0px 75px;
	}

#select
	{
		float: left;
		width: 140px;
		padding: 19px 0px 0px 4px;
	}

#favorite
	{
		float: left;
		width: 60%;
		text-align: right;
		padding: 6px 0px 0px 0px;
	}

#menu-left
	{
		text-align: left;
	}

#menu
	{
		background-image:url(../images/menu.png);
		background-repeat: no-repeat;
		height: 57px;
		width: 705px;
		padding: 0px;
		margin: 0px;
		text-align: left;
		float: left;
	}

#autorize
	{
		width: 257px;
		height: 137px;
		background-image:url(../images/menu/form-autorize.jpg);
		background-repeat:no-repeat;
		background-position: right;
		position: absolute;
	}

#autorize-form
	{
		padding:0px 0px 0px 59px;
		float: left;
		width: 141px;
		font-size: 10px;
		color: #ffffff;
	}
	
#autorize-form-2
	{
		float: left;
		width: 30px;
		padding: 28px 0px 0px 8px;
	}
	
#auto-form-1
	{
		padding: 10px 0px 0px 0px;
		font-size: 12px;
		color: #ffffff;
	}

#auto-form-2
	{
		padding: 8px 0px 0px 0px;
		font-size: 12px;
		color: #ffffff;
	}

#reg
	{
		font-size: 10px;
		color: #df9285;
		padding: 0px 0px 0px 59px;
	}

#reg a
	{
		text-decoration: none;
		font-size: 10px;
		color: #df9285;
	}

#reg a:hover
	{
		text-decoration: underline;
		font-size: 10px;
		color: #df9285;
	}

#f1
	{
		background-color: #c5addb;
		border-top: 1px solid #8266a7;
		border-left: 1px solid #cac9cb;
		border-right: 1px solid #c5addb;
		border-bottom: 1px solid #cac9cb;
	}

#menu a
	{
		border: 0px;
	}

#menu a:hover
	{
		border: 0px;
	}

#site
	{
		background-color: #3f434b;
		width: 962px;
		padding: 0px;
	}

#navigation
	{
		float: left;
		width: 216px;
		padding: 41px 21px 0px 23px;
		background-color: #3f434b;
		background-image:url(../images/m1.png);
		background-repeat:no-repeat;
	}

#nav
	{
		background-color: #343639;
		padding: 10px;
		margin: 1px 0px 1px 0px;		
		font-size:11px;
		color: #c6d9ff;
		text-align: left;
	}

#nav2
	{
		background-color: #343639;
		padding: 10px;
		margin: 1px 0px 1px 0px;
		font-size:11px;
		color: #c6d9ff;
		text-align: left;
		filter:alpha(opacity=50);
		-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
		-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
		opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	}
	
#nav a
	{
		font-size:10px;
		color: #c6d9ff;
		text-align: left;
		text-decoration: none;
		letter-spacing: 1px;
	}
	
#nav a:hover
	{
		color: #c6d9ff;
		text-align: left;
		text-decoration: underline;
		letter-spacing: 1px;
	}		

#content
	{
		float: left;
		width: 678px;
		border-left: 1px solid #585d67;
		border-right: 1px solid #585d67;
		border-top: 1px solid #585d67;
		border-bottom: 1px solid #585d67;
		
		font-size:12px;
		color: #c6d9ff;
		letter-spacing: 1px;
		text-align: left;
	}
	
#con
	{
		padding: 10px;
	}

#copy-sub
	{
		background-image: url(../images/copy-sub.png);
		background-repeat: no-repeat;
		width: 962px;
		padding: 230px 0px 22px 0px;
		color:#FFFFFF;
		letter-spacing: 1px;
		text-shadow: black 0px 0px 5px;
		background-position:bottom;
	}
		
#copyright
	{
		background-image:url(../images/copyright.jpg);
		background-repeat: repeat-x;
		height: 103px;
		
		font-size: 11px;
		font-style: normal;
		color: #FFFFFF;
		text-align: left;
	}
	
#c1
	{
		float: left;
		width: 30%;
		padding: 10px 0px 0px 37px;
		text-align: justify;
	}
	
#c2
	{
		float: left;
		width: 60%;
		padding: 10px 0px 0px 0px;
		text-align: justify; 
	}
 
в FF кстати тоже не работает.

для menu-left добавь цсс margin:auto 0; и убери position: absolute; для авторайз. и глянь то что ты хочешь получается или нет? просто без картинок нехера не понять если честно.
 
FF 3 // IE7 // OPERA 9 - done
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху