Глюк CSS в Opera 11.01 - HTML и CSS

hotaxe · 20.02.2011, 16:59

Здравствуйте у меня возникла проблема с выравниванием элементов внутри <div>, дело в том, что браузер Opera 11.01, зачем-то добавляет лишний отступ с права:

В Google Chrome отброжается правильно:

И даже в IE 8 нет проблем:

Исходный код:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Глюк CSS в Opera 11.01</title>
</head>
<div id="button_div_all">
<h1><p>Глюк CSS в Opera 11.01</p></h1>
<ul class="arrow">
<li class="button_div"><a class="button" href="#"><p>
<span class="letter">Предыдущее</span></p></a></li>
<li class="button_div"><a class="button" href="#"><p>
<span class="letter">Следущее</span></p></a></li>
<li class="button_div"><a class="button" href="#"><p>
<span class="letter">Закрыть</span></p></a></li>
</ul>
</div>

<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}
:focus {
	outline: 0;
	}
body {
	line-height: 1;
	color: black;
	background: white;
	}
ol, ul {
	list-style: none;
	}
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}
body {
	background-color: #FFF;
	

}
/*то что выше это сброс стиля для браузеров*/
#button_div_all{
	background-color:#30ABFE;
	width:70%;
	height:100px;
margin-left: auto;
margin-right:auto;
}
.button_div{
	position:relative;
	float:left;
display:block;
	width:31.3%;
	height:30px;
	background-color:#AEFC58;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	text-align:center;
	margin-left:3%;
	}
	.button_div:first-child{ margin-left:0%;}
	.button_div a {position:relative; text-decoration:none;}
	.letter {
		width:100%;
		position:relative;
	height:100%;
	display:inline-block;
	font-family:"times New Roman";
  font-size: 20px;
  font-style: normal;
  font-weight: 50%;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 143%;
  color:#000;}

</style>
</html>

Если писать одними div-ами, то результат тот-же.
Помогите пожалуйста, не знаю что ещё можно сделать.

Глюк происходит только когда ширину .button_div указываешь в процентах, проценты мне нужны для резинового дизайна

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Opera 9.64	Chudo4258	Софт	8	06.10.2009 19:27
CSS в Opera !	armref	Помощь студентам	0	23.09.2009 21:27