CSS/IE7 - Text within div not centered, extra break after div
The webpage is rendering with an unwanted line break after the "jabbrs" div in IE7 (but not in Chrome or FF4).
Additionally the text in h1 tag in the "hi" div is not centering as it should be.
I've looked around and tried many different things but I seem unable to sort this problem.
Solutions tried:
- Changing doctype from strict to transitional
- Playing about with text-align, extra elements, margin:auto and so on.
I attach the code I'm working on below, if you want to see the webpage online do ask. I've cut out all elements of javascript and so on to make it easier to see what's going on with the design.
<!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="t开发者_运维问答ext" id="author" />
Jabbr: <input type="text" id="msg" autocomplete="off" />
<input type="submit" value="rawr" /><br />
</form>
</div>
</body>
</html>
To fix the h1 centering, remove display: inline from #hi.
To fix the "unwanted line break after the "jabbrs" div", add margin: 0; zoom: 1 to #jabbr_form.
Here's your original code: http://jsbin.com/arivo5/
Here's a version with both fixes: http://jsbin.com/arivo5/2
Why does zoom: 1 make any difference? See: What bug does zoom:1; fix in CSS?
As stated, you have two relatively minor issues within IE 7...
Text inside
#hinot centered.Extra line after
#jabbr.
Usually small rendering issues like this can be resolved by fixing whatever you may find when you try to validate the code.
http://validator.w3.org
To center add this ...
#hi > h1 {
text-align: center;
}
or try ...
#hi > h1 {
margin: 0 auto;
}
IE doesn't always play nice with the cascading part of CSS
For the line break sometimes IE will interpret a Carriage Return in your html as a literal carriage return, so hit F12 developer tools and see if there is a line break entered in as a carriage return on the page.
加载中,请稍侯......
精彩评论