Мне нужна помощь!
У меня есть простой нижний колонтитул внутри <div> с хорошим фоновым цветом.Когда в Safari мой переход затухает в div, слева от нижнего колонтитула появляется линия размером 1 пиксель, и я вижу уродливую границу с тем же цветом фона, что и нижний колонтитул.Почему это так?Как избежать?
Дарт Мун
Редактировать:
Здесь появляются и исчезают:
/* Smooth menu and dialog appearance */
.menu, .dialog {
font-weight: normal;
z-index: 1;
-webkit-transition: opacity 1.5s;
transition: opacity 1.5s;
opacity: 0.0;
background: transparent;
position: absolute;
left: 50%;
top: 60%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dialog {
top: 50%;
}
/* Focused dialogs and active menus */
.active {
z-index: 2;
opacity: 1.0;
}
Еще немного CSS ...:
.dialog header {
position: relative;
background: orange;
}
.dialog header h1 {
display: inline;
font-size: 1.2em;
font-weight: bold;
}
.dialog .content {
padding: 0.4em;
text-align: left;
}
.dialog footer {
font-size: 0.8em;
background: purple;
}
settings.tpl
<div id='settings' class='dialog decorated'>
<header class='row'>
<h1>{{ $title }}</h1>
</header>
<div class='row content'>
<label class='dialogentry'>
{{ $language }}:
<select id='language' name='language'>
<option value='de'>{{ $german }}</option>
<option value='en'>{{ $english }}</option>
<option value='fr'>{{ $french }}</option>
</select>
</label>
<label class='dialogentry'>
{{ $resolution }}: <input name='resolution' id='resolution' type='range' min='30' max='50' value='40' step='5' />
</label>
<label class='dialogentry'>
{{ $volume }}: <input name='volume' id='volume' type='range' min='0' max='100' value='50' />
</label>
</div>
<footer class='row'>
<input type='button' value='{{ $save }}' id='save' onclick='Game.setUp()' />
</footer>
</div>