CSS/IE7 - Text within div not centered, extra break after div

Question

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="text" id="author" />
        Jabbr: <input type="text" id="msg" autocomplete="off" />
        <input type="submit" value="rawr" /><br />
    </form> 
</div>
</body>
</html>

Put your code through the [validator](http://validator.w3.org) and fix all issues you might find. — Sparky, Jun 09 '11 at 21:58
Thanks for all the help guys, the fix turned out to be removing an incorrectly added `display:inline` on a div and adding a `margin:0;` to another to stop what I suppose is an IE7 quirk(?) I would vote up people's comment's but I don't have the rep' needed, so big thanks to you all anyway! — Curly Brace, Jun 09 '11 at 23:00

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

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?

edited May 23 '17 at 11:55

Community

1
1

answered Jun 09 '11 at 22:33

thirtydot

224,678
48
389
349

Thanks, you're spot on about the `display:inline`, I was trying to use the `div` like a `span` because with a span, text in the jabbrs div had a white background the width of the text. Surely another noob issue. Adding `margin:0;` to `#jabbr_form` seems to work even without adding the `zoom: 1` fix. Many thanks – Curly Brace Jun 09 '11 at 22:58
You're welcome. You're right about not needing the `zoom: 1`. Stupid IE Developer Tools not updating the page properly.. – thirtydot Jun 09 '11 at 23:03

score 0 · Answer 2 · answered Jun 09 '11 at 22:05

0

As stated, you have two relatively minor issues within IE 7...

Text inside #hi not 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

answered Jun 09 '11 at 22:05

Sparky

98,165
25
199
285

Unfortunately in *this case*, the validation errors are not relevant. Though I definitely agree that issues in other cases can be resolved by making sure the HTML is valid. – thirtydot Jun 09 '11 at 22:35
Correct, these are the issues. Thanks for the validator tip, I'd used it on the orignal page but it objected to my placement of tags in the javascript – Curly Brace Jun 09 '11 at 22:52
@thirtydot: Yes, agreed... validated code may not solve the current problem. However, validated code is a better starting point to avoid introducing new rendering issues during troubleshooting. – Sparky Jun 09 '11 at 23:01

score 0 · Answer 3 · answered Jun 09 '11 at 22:18

0

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.

answered Jun 09 '11 at 22:18

bdparrish

3,216
3
37
58

This workaround solves the alignment problem; I don't appear to have any developer tools in IE? Hitting F12 doesn't do anything and I've checked all the tool menus. Thanks though! – Curly Brace Jun 09 '11 at 22:47
@Curly Brace: If you're using IE9/IE8, F12 should work, or your IE is broken. If you're being forced to use genuine IE7, then you need to install this: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 - it's very useful. – thirtydot Jun 09 '11 at 23:00

CSS/IE7 - Text within div not centered, extra break after div

3 Answers3