Рендеринг веб-страницы с нежелательным разрывом строки после div "jabbrs" в IE7 (но не в Chrome или FF4).
Кроме того, текст в теге h1 в "hi" div не центрируется, как должно быть.
Я посмотрел вокруг и попробовал много разных вещей, но мне кажется, что я не могу решить эту проблему.
Решения пробовали:
- Изменение типа документа со строгого на переходный
- Игра с выравниванием текста, дополнительными элементами, полем: авто и т. Д.
Я прилагаю код, над которым я работаю ниже, если вы хотите, чтобы веб-страница была онлайн, спросите. Я вырезал все элементы javascript и так далее, чтобы было легче увидеть, что происходит с дизайном.
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body {
background-color:#747E80;
font-family:Arial, Sans-serif;
}
#hi{
font-family:'Pacifico', arial, serif;
margin:0 auto;
text-align:center;
display:inline;
height: 80px;
width:400px;
}
#jabbr_form {
background-color:#F2583E;
padding:5px;
}
#main {
background-color:#77BED2;
width:600px;
margin:0 auto;
padding:5px;
}
#jabbr{
background-color:#FFFFFF;
padding:5px;
width:590px;
overflow: auto;
}
#jabbrs{
height:400px;
}
</style>
<title>jabbr</title>
</head>
<body>
<div id="main">
<br />
<div id="hi"><h1>jabbr away!</h1></div>
<br />
<div id="jabbr">
<div id="jabbrs"><span id="nattr">Nattr-ing with server...</span></div>
</div>
<form id="jabbr_form">
Name: <input type="text" id="author" />
Jabbr: <input type="text" id="msg" autocomplete="off" />
<input type="submit" value="rawr" /><br />
</form>
</div>
</body>
</html>