2
Это мой первый пост, и я довольно долго отсутствовал как в HTML, так и в CSS, поэтому, пожалуйста, простите меня, если это очевидный вопрос или мой код грязный или непоследовательный. Мне пришлось искать различные решения для частей этого журнала на странице, над которой я работаю.Таблица полностью исчезает в Firefox и IE
Моя проблема в том, что, хотя эта страница отлично работает как в Chrome, так и в Opera, в Firefox и Internet Explorer все до того, как ссылка и кнопка исчезнут, и они застряли на верхней части страницы.
Не могли бы вы помочь мне, почему это может быть?
Специальные символы необходимы, потому что это будет на шведском языке.
HTML:
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="logindiv">
<img src="AAA.png" style="width: 80px; height: 80px;"/>
<img src="BBB.jpg" style="width: 80px; height: 80px;"/>
<h1>Välkommen</h1>
<br/><br/><br/><br/>
<div id="logindiv">
<table>
<tr>
<td></td>
</tr>
<tr>
<td><img src="user.png"/></td>
<td><input type="text" value="användarnamn" name="username" id="user" style="color: #BCC8CC; text-align: center; font-family: 'jaapokki-regular', Helvetica, sans-serif;"
onblur="if (this.value == '') {this.value = 'användarnamn';} this.style.color='#BCC8CC';"
onfocus="if (this.value == 'användarnamn') {this.value = '';} this.style.color='#606060';" /></td>
</tr>
<tr>
<td><img src="password.png"></td>
<td><input type="password" value="lösenord" name="pwd" id="pwd" style="color: #BCC8CC; text-align: center; font-family: 'jaapokki-regular', Helvetica, sans-serif;"
onblur="if (this.value == '') {this.value = 'lösenord';} this.style.color='#BCC8CC';"
onfocus="if (this.value == 'lösenord') {this.value = '';} this.style.color='#606060';" /></td>
</tr>
</table>
<p><a href="password.html">Har du glömt ditt lösenord?</a></p>
<table>
<tr>
<td></td>
<td id="login"><a href="cases.html"><input type="button" name="btn" class="btn-style" value="LOGGA IN"/></a></td>
</tr>
</table>
<p></p>
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: 'jaapokki-regular';
src: url('jaapokki-regular.eot');
src: url('jaapokki-regular.eot?#iefix') format('embedded-opentype'),
url('jaapokki-regular.woff') format('woff'),
url('jaapokki-regular.ttf') format('truetype'),
url('jaapokki-regular.svg#jaapokki-regular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
color: #6e8196;
text-decoration: none;
}
body {
background-color: #FFFEF5;
color: #606060;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
h1 {
font-family: "jaapokki-regular", Helvetica, sans-serif;
text-align: center;
color: #606060;
}
div#logindiv {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
table {
width: 220px;
position: relative;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
td {
height: 50px;
vertical-align: middle;
}
td#login {
height: 80px;
vertical-align: middle;
}
.user-style{
color: #606060;
}
.btn-style{
border : solid 1px #606060;
font-size : 17px;
color : #fffef5;
padding : 4px 12px;
background-color : #6e8196;
font-family: "jaapokki-regular", Helvetica, sans-serif;
}
Я не уверен, что вы понимаете цель позиции: относительная с точки зрения того, что я думаю, вы хотите, чтобы это делалось. Если вы хотите сосредоточиться на вещах, попробуйте использовать «margin: 0 auto; – briansol
Я думаю, вы можете проверить совместимость браузера css transform. http://www.w3schools.com/cssref/css3_pr_transform.asp –
Вы правы, @briansol; Я не понимаю, что об этом много, потому что, как я уже сказал, я возвращаюсь к сценариям после долгого долгого отсутствия. Спасибо за ваше предложение, я проверю его. –